js怎么删除数组中值相同的元素

JavaScript中删除数组中值相同的元素的几种方法包括：使用Set、filter方法、for循环、reduce方法。本文将详细介绍这些方法，并在每个方法中提供代码示例和解释其工作原理。

一、使用Set

利用Set去重

JavaScript中的Set对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。利用Set的这一特性，我们可以轻松地删除数组中值相同的元素。

let array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]

在这个示例中，我们使用new Set(array)创建了一个包含数组中唯一值的Set对象。然后，我们利用扩展运算符...将Set对象转换回数组。

优点

简洁明了：代码非常简洁，只需一行。
性能优越：对于大多数情况下，使用Set对象的性能都非常优越。

缺点

兼容性问题：Set在一些旧版本的浏览器中可能不支持。

二、使用filter方法

基于indexOf和filter方法去重

filter方法用于创建一个新的数组，其中包含通过指定函数实现的测试的所有元素。配合indexOf方法，我们可以实现数组去重。

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

在这个示例中，filter方法遍历数组的每个元素，并且只有在该元素第一次出现时才会被保留。

优点

直观易懂：逻辑清晰，容易理解。
兼容性好：filter和indexOf都是广泛支持的方法。

缺点

性能较差：由于indexOf在数组中查找元素的时间复杂度是O(n)，因此整体时间复杂度是O(n^2)，对于大数组性能较差。

三、使用for循环

基于for循环去重

最基本的方法是使用for循环来遍历数组并构建一个新的数组，其中不包含重复的元素。

let array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [];
for(let i = 0; i < array.length; i++) {
    if(uniqueArray.indexOf(array[i]) === -1) {
        uniqueArray.push(array[i]);
    }
}
console.log(uniqueArray); // [1, 2, 3, 4, 5]

在这个示例中，我们通过遍历原数组来检查每个元素是否已经存在于新的数组中，如果不存在则将其添加到新数组中。

优点

完全控制：通过手动实现去重逻辑，你可以完全控制去重过程。
兼容性好：适用于所有JavaScript环境。

缺点

代码冗长：相比其他方法，代码较为冗长。
性能较差：同样由于indexOf的时间复杂度，整体性能不如Set对象。

四、使用reduce方法

基于reduce方法去重

reduce方法执行一个由你提供的reducer函数（升序执行）来对数组中的每个元素进行处理，最终计算为一个值。我们可以利用这个方法来实现数组去重。

let array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = array.reduce((accumulator, currentValue) => {
    if (!accumulator.includes(currentValue)) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

在这个示例中，reduce方法遍历数组的每个元素，并将不重复的元素添加到累加器数组中。

优点

简洁灵活：代码简洁且灵活，可以轻松适应复杂场景。
函数式编程：更符合函数式编程的风格。

缺点

性能较差：includes方法的时间复杂度是O(n)，因此整体时间复杂度仍然是O(n^2)。

五、性能对比

小数组

对于小数组，所有方法的性能差异不大，几乎可以忽略不计。以下是一个简单的测试结果：

let smallArray = [1, 2, 2, 3, 4, 4, 5];
console.time('Set');
[...new Set(smallArray)];
console.timeEnd('Set');
console.time('filter');
smallArray.filter((item, index) => smallArray.indexOf(item) === index);
console.timeEnd('filter');
console.time('for loop');
let uniqueArray1 = [];
for(let i = 0; i < smallArray.length; i++) {
    if(uniqueArray1.indexOf(smallArray[i]) === -1) {
        uniqueArray1.push(smallArray[i]);
    }
}
console.timeEnd('for loop');
console.time('reduce');
smallArray.reduce((accumulator, currentValue) => {
    if (!accumulator.includes(currentValue)) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.timeEnd('reduce');

大数组

对于大数组，性能差异会变得显著。以下是一个大数组的测试结果：

let largeArray = Array.from({length: 100000}, () => Math.floor(Math.random() * 100000));
console.time('Set');
[...new Set(largeArray)];
console.timeEnd('Set');
console.time('filter');
largeArray.filter((item, index) => largeArray.indexOf(item) === index);
console.timeEnd('filter');
console.time('for loop');
let uniqueArray2 = [];
for(let i = 0; i < largeArray.length; i++) {
    if(uniqueArray2.indexOf(largeArray[i]) === -1) {
        uniqueArray2.push(largeArray[i]);
    }
}
console.timeEnd('for loop');
console.time('reduce');
largeArray.reduce((accumulator, currentValue) => {
    if (!accumulator.includes(currentValue)) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.timeEnd('reduce');

结果分析

从上述测试结果可以看出，对于大数组，使用Set对象的性能是最优的，而filter、for循环、reduce方法的性能较差。在实际应用中，选择合适的去重方法可以显著提升性能。

六、总结

在JavaScript中删除数组中值相同的元素有多种方法，包括使用Set、filter方法、for循环、reduce方法等。每种方法都有其优缺点和适用场景。使用Set对象是最简洁和高效的方法，适用于大多数场景。而filter、for循环、reduce方法则提供了更多的灵活性，适用于需要更复杂逻辑的场景。