詳解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<arr.length; i++) {
  if(newArr.indexOf(arr[i]) === -1) {
    newArr.push(arr[i]);
  }
}

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

在上述例子中，我們使用了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<arr.length; i++) {
    if(newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i]);
    };
  };

  return newArr;
};

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

在上述例子中，我們使用了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()，該函數接收兩個參數，第一個參數是需要進行去重操作的數組，第二個參數是指定的去重欄位。函數內部使用了對象字面量來對重複的元素進行去重操作。