javascript 数组去重有哪些方法

在JavaScript中实现数组去重可以通过几种常用的方法来实现：使用Set对象、利用filter配合indexOf、双层循环去重、使用reduce配合includes、利用Map对象。利用Set对象是最为简洁高效的方法，在现代浏览器和环境中得到广泛支持。Set是ES6中引入的新的数据结构，可以自动过滤掉重复项。只需将数组转换为Set，然后再将Set转换回数组，即可实现去重。例如，可以这样做：let uniqueArray = [...new Set(yourArray)];。使用Set是实现数组去重的推荐方法，因为它既简单又高效。

接下来，我会详细介绍每种方法的实现以及应用场景。

一、使用SET对象

JavaScript的ES6引入了Set数据结构，可以用来存储任何类型的唯一值。由于Set内部无法包含重复的值，可以利用这个特性轻松实现数组去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];

以上代码中，先通过new Set(array)创建了一个新的Set实例，然后通过扩展运算符...将Set转换成了数组。

优点：代码简洁、执行效率高。

缺点：不支持IE11以下的版本。

二、利用FILTER配合INDEXOF

使用数组的filter方法结合indexOf来筛选出那些“首次出现”的元素，从而实现去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);

在这个例子中，filter方法会过滤数组，仅当当前元素的索引等于该元素首次出现的索引时，才会保留该元素。

优点：无需额外数据结构、兼容所有浏览器。

缺点：性能较差，特别是对大数组处理时效率低下。

三、双层循环去重

可以通过双层循环遍历数组，并逐个检查是否有重复的元素。如果发现有重复，就将其删除。

const array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [];
for (let i = 0; i < array.length; ++i) {
    let isUnique = true;
    for (let j = 0; j < uniqueArray.length; ++j) {
        if (array[i] === uniqueArray[j]) {
            isUnique = false;
            break;
        }
    }
    if (isUnique) {
        uniqueArray.push(array[i]);
    }
}

优点：理解简单、不使用任何ES6或者特殊的API。

缺点：效率极低，尤其在处理大数组时几乎不可用。

四、使用REDUCE配合INCLUDES

reduce配合includes也是实现数组去重的一种方法。通过累加器来逐步构建最终的去重数组。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((prev, curr) => {
    return prev.includes(curr) ? prev : [...prev, curr];
}, []);

在这个例子中，reduce用于遍历数组，同时使用includes检查当前元素是否已经存在于累加器数组中。如果不存在，则添加到累加器数组中。

优点：代码相对简洁。

缺点：性能不是最优的，特别是对大数组处理。

五、利用MAP对象

Map是ES6引入的一种新的数据结构，它保存键值对。每个键只能出现一次，借助这个特性，也可以实现数组去重。

const array = [1, 2, 2, 3, 4, 4, 5];
let map = new Map();
for(let item of array){
    map.set(item, true);
}
const uniqueArray = [...map.keys()];

在这个例子中，通过遍历数组并使用map.set(item, true)存储每个元素。由于Map的键是唯一的，最后通过获取map.keys()并转换为数组来获得去重后的数组。

优点：语法简洁、执行效率相对较高。

缺点：不支持IE11以下版本。

在选择使用哪种方法进行数组去重时，需要考虑到浏览器的兼容性、数组的大小以及执行效率。对于现代浏览器，优先推荐使用Set和Map，它们的性能通常是最优的。对于需要兼容老旧浏览器的情况，可以考虑使用filter结合indexOf或者传统的双层循环方法。在处理大数据量时，应尽可能避免使用性能较低的方法，以免造成长时间的计算。

相关问答FAQs：

Q1: JavaScript数组去重有哪些常用的方法？

A1: JavaScript数组去重有多种方法，以下是几种常用的方法：

使用Set数据结构。Set是一种无重复值的有序列表，可以通过将数组转换为Set来实现去重。例如：

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

使用filter()方法。通过遍历数组，利用filter()方法返回只包含唯一元素的新数组。例如：

const arr = [1, 2, 3, 2, 4, 1];
const uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr);  // [1, 2, 3, 4]

使用reduce()方法。通过使用reduce()方法遍历数组，将每个元素添加到结果数组中，但只有在结果数组中不存在该元素时才添加。例如：

const arr = [1, 2, 3, 2, 4, 1];
const uniqueArr = arr.reduce((prev, cur) => {
  if (!prev.includes(cur)) {
    prev.push(cur);
  }
  return prev;
}, []);
console.log(uniqueArr);  // [1, 2, 3, 4]

Q2: 如何使用JavaScript对一个多维数组进行去重？

A2: 如果要对一个多维数组进行去重处理，可以使用递归来处理每个子数组。以下是一个示例代码：

function deepUnique(arr) {
  const seen = new Set();
  return arr.filter((value) => {
    if (Array.isArray(value)) {
      return !seen.has(JSON.stringify(value)) && seen.add(JSON.stringify(value));
    }
    return !seen.has(value) && seen.add(value);
  });
}

const arr = [1, [2, 3], [4, 5, [6, 7, 8]], [2, 3]];
const uniqueArr = deepUnique(arr);
console.log(uniqueArr);  // [1, [2, 3], [4, 5, [6, 7, 8]]]

该方法通过使用Set来存储已经出现过的子数组，使用JSON.stringify()将子数组转换为字符串进行比较，确保所有维度的数组都能正确去重。

Q3: 除了使用Set、filter和reduce，还有其他什么方法可以实现JavaScript数组去重？

A3: 除了使用Set、filter和reduce方法，还有其他一些方法可以实现JavaScript数组去重。以下是几种常用的方法：

使用indexOf()方法。遍历数组，对于每个元素，使用indexOf()方法判断该元素在数组中的第一个索引位置是否与当前索引相等，如果相等则保留，否则去重。例如：

const arr = [1, 2, 3, 2, 4, 1];
const uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr);  // [1, 2, 3, 4]

使用includes()方法。遍历数组，对于每个元素，使用includes()方法判断结果数组中是否已经包含该元素，如果不包含则添加到结果数组中。例如：

const arr = [1, 2, 3, 2, 4, 1];
const uniqueArr = arr.reduce((prev, cur) => {
  if (!prev.includes(cur)) {
    prev.push(cur);
  }
  return prev;
}, []);
console.log(uniqueArr);  // [1, 2, 3, 4]

使用Map数据结构。遍历数组，使用Map数据结构存储已经出现过的元素，然后将Map的values转换为数组。例如：

const arr = [1, 2, 3, 2, 4, 1];
const uniqueArr = Array.from(new Map(arr.map(value => [value, value])).values());
console.log(uniqueArr);  // [1, 2, 3, 4]

这些方法可以灵活地应用于不同的场景，选择适合自己的方法进行数组去重处理。