js中字符串数组去重常用方法

更新日期: 2025-03-23阅读: 37标签: 数组分享

复制链接

新浪微博

QQ 好友

扫一扫分享

在Js中，如果你有一个数组，其中包含字符串，并且你想要去除重复的字符串（即数组去重），有几种方法可以实现。这里我将介绍几种常见的方法：

方法 1：使用 Set

Set 是 ES6 引入的数据结构，它天然去重。将数组转换为 Set，再转换回数组即可。

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'grape'];

// 使用 Set 去重
const uniqueArr = [...new Set(arr)];

console.log(uniqueArr); // 输出: ['apple', 'banana', 'orange', 'grape']

方法 2：使用 filter 和 indexOf

通过 filter 和 indexOf 结合，保留第一次出现的元素。

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'grape'];

// 使用 filter 和 indexOf 去重
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

console.log(uniqueArr); // 输出: ['apple', 'banana', 'orange', 'grape']

方法 3：使用 reduce

通过 reduce 遍历数组，将不重复的元素添加到新数组中。

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'grape'];

// 使用 reduce 去重
const uniqueArr = arr.reduce((acc, item) => {
    if (!acc.includes(item)) {
        acc.push(item);
    }
    return acc;
}, []);

console.log(uniqueArr); // 输出: ['apple', 'banana', 'orange', 'grape']

方法 4：使用 forEach 和对象（或 Set）去重

通过遍历数组，利用对象或 Set 的特性去重。

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'grape'];

// 使用 forEach 和对象去重
const uniqueArr = [];
const seen = {};

arr.forEach(item => {
    if (!seen[item]) {
        seen[item] = true;
        uniqueArr.push(item);
    }
});

console.log(uniqueArr); // 输出: ['apple', 'banana', 'orange', 'grape']

方法 5：使用 reduce 和 Set（结合方法 1 和方法 3）

结合 reduce 和 Set，代码更简洁。

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'grape'];

// 使用 reduce 和 Set 去重
const uniqueArr = arr.reduce((acc, item) => {
    acc.add(item);
    return acc;
}, new Set());

console.log([...uniqueArr]); // 输出: ['apple', 'banana', 'orange', 'grape']

总结

推荐方法：使用 Set（方法 1），因为它最简单且性能较好。
兼容性：如果需要兼容老版本浏览器，可以使用 filter 和 indexOf（方法 2）。
灵活性：如果需要更复杂的去重逻辑，可以使用 reduce（方法 3 或方法 5）。
性能：对于非常大的数组，Set 和对象（方法 1 和方法 4）的性能通常更好。

选择适合你场景的方法即可！

链接: https://fly63.com/article/detial/12720

js中字符串数组去重常用方法

方法 1：使用 Set

方法 2：使用 filter 和 indexOf

方法 3：使用 reduce

方法 4：使用 forEach 和对象（或 Set）去重

方法 5：使用 reduce 和 Set（结合方法 1 和方法 3）

总结

探索JavaScript数组奥秘

js使用数组+循环+条件实现数字转换为汉字的简单方法。

[译]async-await 数组循环的几个坑

数组、字符串去重

JavaScript 数组方法

如何删除JavaScript 数组中的虚值

JavaScript中十种一步拷贝数组的方法

JS数组的几个经典api

关于Vue不能监听（watch）数组变化

JS计算两个数组的交集、差集、并集、补集（多种实现方式）