详解JavaScript中的数组过滤

在JavaScript中，数组是一种非常常见的数据类型。有时候我们需要对数组中的元素进行过滤，去除一些不必要的、重复的或者特定的元素。本文将从多个方面对JavaScript中的数组过滤进行详细阐述。

一、JavaScript数组过滤对象

在JavaScript中，我们可以使用filter()方法过滤数组对象。该方法接收一个函数作为参数，该函数会对数组中的每一项进行判断，只有当函数返回true的时候，该项才会被保留在新数组中，否则该项会被过滤掉。

let arr = [
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Jerry'},
  {id: 3, name: 'Tom'},
];

let newArr = arr.filter(item => item.name === 'Tom');

console.log(newArr);
// Output: [{id: 1, name: 'Tom'},{id: 3, name: 'Tom'}]

上面的例子中，我们使用了filter()方法从数组中找出了所有名字为Tom的对象，并将它们放入了一个新的数组中。

二、JavaScript数组过滤重复子集

在JavaScript中，如果我们有一个数组，该数组中的元素也是对象，我们可以使用set集合结构进行去重操作。在去重之前，我们需要将每个对象转化为JSON字符串，并且将该字符串存储到一个set集合中。最后我们再将set集合转化为数组得到去重后的结果。

let arr = [
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Jerry'},
  {id: 1, name: 'Tom'},
];

let set = new Set(arr.map(JSON.stringify));
let newArr = Array.from(set).map(JSON.parse);

console.log(newArr);
// Output: [{id: 1, name: 'Tom'},{id: 2, name: 'Jerry'}]

上述例子中，我们使用了ES6中set集合的特性进行了去重操作，注意需要在map()方法中使用JSON.stringify()对每个对象进行处理。

三、JavaScript数组过滤方法

除了使用filter()方法，我们还可以使用其他方法来对JavaScript中的数组进行过滤，例如：

• forEach() - 遍历数组，对每个元素进行处理
• indexOf() - 获取指定元素在数组中的位置，如果不存在则返回-1
• lastIndexOf() - 获取指定元素在数组中从后往前的位置，如果不存在则返回-1

下面我们来看一个使用indexOf()方法进行数组过滤的例子：

let arr = ['Tom', 'Jerry', 'Lucy', 'Tom'];

let newArr = [];

for(let i=0; i


   
在上述例子中，我们使用了indexOf()方法遍历数组中的每一个元素，并且判断该元素在新数组中是否已经存在，如果不存在则将该元素加入新数组中。


   
四、JavaScript数组过滤取值


   
当我们需要从一个数组中获取特定的一些元素时，我们可以使用ES6中的destructuring(解构)语法进行获取，并且将不需要的元素过滤掉。


   
let arr = [
  {id: 1, name: 'Tom', age: 18},
  {id: 2, name: 'Jerry', age: 20},
  {id: 3, name: 'Lucy', age: 19},
];

let newArr = arr.map(({ id, name }) => ({ id, name }));

console.log(newArr);
// Output: [{id: 1, name: 'Tom'},{id: 2, name: 'Jerry'},{id: 3, name: 'Lucy'}]



   
在上述例子中，我们使用了map()方法对原数组进行操作，并利用解构语法对每个对象取出id和name属性，并且将其他属性过滤掉。


   
五、JavaScript数组过滤指定元素


   
有时我们需要从一个数组中过滤掉给定的几个元素，比如一个黑名单列表，我们需要将这些元素从数组中删除。可以使用filter方法过滤，排除不想要删除项，也可以使用splice函数对其进行删除操作。


   
// 使用filter过滤黑名单
let arr = ['Tom', 'Jerry', 'Lucy', 'Jack'];

let blacklist = ['Lucy', 'Jack'];
let newArr = arr.filter(item => !blacklist.includes(item));

console.log(newArr);
// Output: ['Tom', 'Jerry']

// 使用splice删除指定项
let arr1 = ['Tom', 'Jerry', 'Lucy', 'Jack'];

let index = arr1.indexOf('Lucy');
arr1.splice(index,1);

console.log(arr1);
// Output: ['Tom', 'Jerry', 'Jack']



   
上面的例子中，我们使用filter()方法将黑名单列表中的元素过滤掉，同时使用includes()方法判断一个元素是否在黑名单中；另外我们还使用splice()方法删除了指定元素。


   
六、JavaScript数组过滤中重复元素的方法


   
当数组中有重复的元素时，我们可以使用es6中提供的set数据结构进行去重操作，也可以自定义一个函数实现去重功能。


   
//使用Set去重
let arr = [1,2,3,3,4];
let set = new Set(arr);
let newArr = Array.from(set);

console.log(newArr);
// Output: [1, 2, 3，4]

//使用自定义函数去重
let arr1= [1,2,3,3,4,5];

function unique(arr) {
  let newArr = [];
  for(let i=0; i


     
在上述例子中，我们使用了Set数据结构对数组进行去重操作，并且使用Array.from()方法将Set转化为数组；另外我们还自定义了一个unique()函数实现了去重操作。


     
七、JavaScript数组过滤相同的对象


     
有时候我们需要从数组中过滤出仅在另一个数组中出现的对象，可以使用filter()方法组合includes()方法来实现这个目标。


     
let arr1 = [
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Jerry'},
  {id: 3, name: 'Lucy'},
];

let arr2 = [
  {id: 1, name: 'Tom'},
  {id: 4, name: 'Jack'}
];

let newArr = arr1.filter(item => {
  return arr2.some(ele => JSON.stringify(ele) === JSON.stringify(item));
});

console.log(newArr);
// Output: [{id: 1, name: 'Tom'}]



     
上述例子中，我们将arr1和arr2两个数组进行比较，找出两个数组存在的相同元素，使用了ES6中的some()方法和JSON.stringify()方法。


     
八、JavaScript数组过滤重复的对象


     
在实际开发中，我们应该会遇到要将数组中的对象去重的需求。 ES6中提供了一个可以快速去重的方法，就是利用Set数据结构。但是需注意的是，Set只能自动去重基本数据类型，对于对象数组中的元素去重需要些小手脚。


     
let arr = [
  {id: 1, name: 'Tom'},
  {id: 2, name: 'Jerry'},
  {id: 1, name: 'Tom'}
];

let newArr = Array.from(new Set(arr.map((item) => JSON.stringify(item)))) //处理数据之前需要先stringify，不然遇到对象类型就去不了重了
  .map((item) => JSON.parse(item));//去重之后再parse还原

console.log(newArr);
// Output: [{id: 1, name: 'Tom'},{id: 2, name: 'Jerry'}]



     
在上述例子中，我们首先使用map()方法对数组中的对象进行JSON.stringify()处理，将每个对象转化为字符串形式，以支持Set的去重操作；接着我们将Set集合转化为数组形式，并且使用map()方法将每个元素重新处理成对象形式。


     
九、JavaScript数组过滤重复的元素


     
上文中讲解了如何对数组中的对象重复元素进行去重操作，我们通常的需求是基于某个字段去重。


     
//过滤重复
let arr = [1,2,3,3,4];

function fuzzyUnique(arr) {
  let unique=[];

  for(let i=0; i {
    if(!obj[data[keyStr]]) {
      obj[data[keyStr]] = 1;
      res.push(data);
    }
  });

  return res;
}

console.log(uniqueArr(personData, 'name'));
// Output: [{name: 'Tom', age: 18},{name: 'Jerry', age: 20},{name: 'Lucy', age: 18}]

      


     
在上述例子中，我们首先使用了自定义函数fuzzyUnique()进行基于元素的去重操作，以过滤掉重复的元素。接着我们使用了另一个自定义函数uniqueArr()，该函数接收两个参数，第一个参数是需要进行去重操作的数组，第二个参数是指定的去重字段。函数内部使用了对象字面量来对重复的元素进行去重操作。