在JavaScript中，如何给字符串数组中的元素去重

在 JavaScript 中，给字符串数组（或其他类型数组）去重有多种方法，下面列举几种常用的方式，并说明各自的特点。

1. 利用Set（最简洁、推荐）

Set是 ES6 新增的数据结构，它类似于数组，但成员的值都是唯一的。将数组传入Set构造函数，再通过扩展运算符或Array.from()转回数组即可。

constarr=['apple','banana','apple','orange','banana'];constunique=[...newSet(arr)];console.log(unique);// ['apple', 'banana', 'orange']

优点：代码简洁，效率高（时间复杂度 O(n)）。
缺点：无法保留原数组中的元素顺序吗？——会保留第一次出现的顺序，Set 遍历顺序就是插入顺序，因此顺序是保持的。所以一般没有缺点。但注意：Set 去重使用“SameValueZero”比较，认为NaN与自身相等，而===不认为相等；在字符串数组中基本无影响。

2. 利用filter+indexOf

通过数组自身的filter方法，配合indexOf检测当前元素第一次出现的位置是否等于当前索引。

constarr=['apple','banana','apple','orange','banana'];constunique=arr.filter((item,index)=>arr.indexOf(item)===index);console.log(unique);// ['apple', 'banana', 'orange']

优点：兼容性非常好（ES5 即可），语义清晰。
缺点：indexOf会从头遍历数组，整体时间复杂度 O(n²)，在大型数组上性能较差。同时indexOf无法正确查找NaN，但字符串数组通常无此问题。

3. 利用reduce累加器

通过reduce构建新数组，判断当前元素是否已存在于累加器中。

constarr=['apple','banana','apple','orange','banana'];constunique=arr.reduce((acc,cur)=>{if(!acc.includes(cur)){acc.push(cur);}returnacc;},[]);console.log(unique);// ['apple', 'banana', 'orange']

优点：逻辑直观，可灵活扩展。
缺点：includes也是遍历，时间复杂度 O(n²)；同时includes能处理NaN但字符串场景无影响。

4. 利用对象/Map 作为哈希表（性能最优）

使用Map或普通对象记录已出现的元素，一次遍历即可，时间复杂度 O(n)。

constarr=['apple','banana','apple','orange','banana'];constmap=newMap();constunique=arr.filter(item=>{if(map.has(item))returnfalse;map.set(item,true);returntrue;});console.log(unique);// ['apple', 'banana', 'orange']

用对象也可以，但对象键会被转为字符串，对于纯字符串数组没问题，但若数组中包含数字或其他类型，需注意类型转换。

constobj={};constunique=arr.filter(item=>obj.hasOwnProperty(item)?false:(obj[item]=true));

优点：线性时间复杂度，适合大数据量。
缺点：代码略复杂。

5. 进阶：保持首次出现顺序 + 去重

上述所有方法中，除了Set和filter+indexOf默认保持顺序，其余若稍加调整也能保持顺序。Set和Map本身也是按插入顺序迭代，因此上述基于Set和Map的方案自然保持顺序。

总结

• 日常开发：推荐使用[...new Set(arr)]，代码最简洁，性能也不错。
• 需要兼容极旧环境（如 IE）：可用filter+indexOf。
• 大数据量且对性能有极致要求：用Map哈希表方式。

注意，以上方法不仅适用于字符串数组，同样适用于数字、混合类型数组，但去重逻辑是基于严格相等（或Set的 SameValueZero）。对于对象数组，则需要根据对象的某个属性去重，以上方法需配合map提取属性值再进行去重。