JavaScrip数组去重操作实例小结

本文将详细讲解“JavaScript 数组去重操作实例小结”，包括去重的常用方法以及实例说明。

一、常用去重方法

1. Set(ES6新增)

ES6 中引入了 Set 数据结构，它类似于数组，但是数组中的元素是不能重复的，可以很方便地实现数组去重。

const arr = [1, 2, 2, 3, 3, 4];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4]

2. filter

通过 Array.prototype.filter() 方法可以实现数组去重操作，将数组中的每个元素与其它元素比较，留下不重复的。

const arr = [1, 2, 2, 3, 3, 4];

const uniqueArr = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});

console.log(uniqueArr); // [1, 2, 3, 4]

3. reduce

使用 reduce 方法，遍历数组，将元素添加到结果数组中，如果该元素已存在于结果数组中，则不再添加。

const arr = [1, 2, 2, 3, 3, 4];

const uniqueArr = arr.reduce((tempArr, cur) => {
  if (!tempArr.includes(cur)) {
    tempArr.push(cur);
  }
  return tempArr;
}, []);

console.log(uniqueArr); // [1, 2, 3, 4]

二、去重实例说明

1. 数组对象去重

考虑以下数组对象：

const userArr = [
  { name: 'Alice', age: 18 },
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 18 }
];

我们可以使用 Set 去重：

const uniqueArr = [...new Set(userArr.map(user => JSON.stringify(user)))].map(str => JSON.parse(str));
console.log(uniqueArr); // [{name: "Alice", age: 18}, {name: "Bob", age: 20}]

其中，数组对象首先需要转换成 JSON 字符串，然后再去重操作完成后再将其转换回数组对象。

2. 多维数组去重

对于多维数组，也需要用到上文提到的方法进行去重。如下所示：

const multiArr = [[1, 2, 3], [2, 3, 4], [1, 2]];
const uniqueArr = multiArr.reduce((tempArr, arr) => {
  const str = arr.join();
  if (!tempArr.includes(str)) {
    tempArr.push(str);
  }
  return tempArr;
}, []).map(str => str.split(',').map(Number));

console.log(uniqueArr); // [[1, 2, 3], [2, 3, 4], [1, 2]]

其中，多维数组将每个子数组都转换成以逗号分隔的字符串，然后进行去重操作，最后在还原成多维数组。

以上就是本文的全部内容，希望对你有所帮助。