js数组去重最简单的方法，JavaScript数组去重之简易攻略

使用JavaScript进行数组去重，最简单的方法是利用Set对象，首先将数组转换为Set，它会自动去除重复的值，然后再次转换回数组，以下是一个示例代码：，``javascript，const arr = [1, 2, 2, 3, 4, 4, 5];，const uniqueArr = [...new Set(arr)];，console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]，``

JS数组去重最简单的方法

作为一个经常和JavaScript打交道的开发者,我经常遇到数组去重的问题，就让我来和大家分享一下，JS数组去重最简单的方法。

用户提问：我有一个数组，里面有很多重复的元素，我想去掉这些重复的元素，有什么简单的方法吗？

解答：当然有！在JavaScript中，数组去重的方法有很多，但最简单的方法之一就是使用Set对象。

一：使用Set对象去重

1. Set简介：Set是一个内置对象，它类似于数组，但成员的值都是唯一的，没有重复的值。
2. 转换方法：你可以直接将数组转换为Set对象，这样重复的元素就会被自动去除。
3. 转换示例：const uniqueArray = [...new Set(array)];
4. 注意：Set对象中的元素是无序的，如果你需要保持数组的原有顺序，可以结合使用Array.from()或展开运算符。

二：使用数组的filter方法

1. filter方法：数组的filter方法可以创建一个新数组，包含通过所提供函数实现的测试的所有元素。
2. 去重逻辑：通过比较当前元素和之前元素是否相同，可以实现去重。
3. 示例代码：const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
4. 性能考虑：这种方法在数组较大时可能会比较慢，因为它需要遍历整个数组。

三：使用数组的reduce方法

1. reduce方法：数组的reduce方法对数组的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。
2. 去重逻辑：使用reduce方法可以构建一个新数组，同时检查元素是否已存在。
3. 示例代码：const uniqueArray = array.reduce((acc, item) => { if (!acc.includes(item)) acc.push(item); return acc; }, []);
4. 注意：这种方法也可能会在数组较大时性能较差。

四：使用数组的indexOf方法

1. indexOf方法：数组的indexOf方法可以返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
2. 去重逻辑：通过检查当前元素的索引是否与第一次出现的索引相同，可以实现去重。
3. 示例代码：const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
4. 注意：这种方法与filter方法类似，性能可能不是最佳。

五：使用数组的map和filter方法

1. map和filter方法：map方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数（处理函数）的结果。
2. 去重逻辑：结合使用map和filter方法，可以先创建一个包含所有元素的新数组，然后过滤掉重复的元素。
3. 示例代码：const uniqueArray = array.map((item) => item).filter((item, index, arr) => arr.indexOf(item) === index);
4. 注意：这种方法可能会比其他方法更复杂，但性能通常较好。

JavaScript中数组去重的方法有很多,但最简单的方法之一是使用Set对象，根据你的具体需求和性能考虑，你也可以选择其他方法，希望这篇文章能帮助你轻松解决数组去重的问题！

其他相关扩展阅读资料参考文献：

基础方法：循环与条件判断
1 传统循环遍历
使用双重循环对比元素，通过includes或indexOf判断是否已存在。

function unique(arr) {  
  let result = [];  
  for (let i = 0; i < arr.length; i++) {  
    if (result.indexOf(arr[i]) === -1) {  
      result.push(arr[i]);  
    }  
  }  
  return result;  
}

这种方法时间复杂度为O(n²)，适合小数据量场景，但效率较低,不推荐处理大数据集。

2 Set对象去重
利用Set数据结构自动去重特性，将数组转换为Set后恢复为数组：

function unique(arr) {  
  return Array.from(new Set(arr));  
}

此方法简洁高效，时间复杂度为O(n),但无法处理对象类型或复杂数据结构的去重。

3 filter函数结合includes
通过filter筛选出未重复的元素，代码如下：

function unique(arr) {  
  return arr.filter((item, index) => arr.indexOf(item) === index);  
}

该方法逻辑清晰，但同样存在时间复杂度高、无法处理对象数组的问题。

ES6特性：更简洁的语法实现
1 Set对象的直接应用
ES6中Set的使用更加灵活，支持直接通过Set构造函数去重，

const unique = (arr) => [...new Set(arr)];

此方法代码量最少，但需注意Set会丢失数组顺序,且无法处理对象或嵌套结构。

2 Map对象优化去重逻辑
通过Map的键值对特性，可实现更复杂的去重逻辑，

function unique(arr) {  
  return Array.from(new Map(arr.map((item) => [item, 1]))).map(([key]) => key);  
}

此方法适用于对象数组，通过唯一键值对确保元素唯一性,但代码复杂度较高。

3 扩展运算符与Set结合
将Set与扩展运算符结合，可同时保留顺序并去重，

const unique = (arr) => [...new Set(arr)];

此方法兼容性好，且能处理大部分基础数据类型的去重需求,但对对象数组仍需额外处理。

性能优化：高效去重策略
1 时间复杂度对比
传统方法（如双重循环）时间复杂度为O(n²)，而Set方法为O(n)。

// 传统方法  
function unique(arr) {  
  let result = [];  
  for (let i = 0; i < arr.length; i++) {  
    let isUnique = true;  
    for (let j = 0; j < result.length; j++) {  
      if (arr[i] === result[j]) {  
        isUnique = false;  
        break;  
      }  
    }  
    if (isUnique) result.push(arr[i]);  
  }  
  return result;  
}

此方法适合小数据集,但处理大数据时效率低下。

2 数据类型处理优化
针对字符串、数字、布尔值等基本类型，Set方法已足够；但处理对象或NaN时需特殊处理：

function unique(arr) {  
  return arr.filter((item, index) => arr.indexOf(item) === index);  
}

若数组包含对象，需通过JSON.stringify转换为字符串后再去重，

function unique(arr) {  
  return [...new Set(arr.map(JSON.stringify))].map(JSON.parse);  
}

此方法能处理对象数组,但可能因字符串化导致精度丢失。

3 避免重复元素的边界问题
需注意以下特殊情况：

• NaN的特殊性：NaN !== NaN，需通过Object.is判断；
• Symbol类型：Set会自动识别Symbol的唯一性；
• 重复元素的识别：需确保比较逻辑覆盖所有可能的重复形式。
  

  function unique(arr) {  
  return arr.filter((item, index) => arr.findIndex(i => Object.is(i, item)) === index);  
  }

  此方法能精准处理NaN和Symbol，但时间复杂度仍为O(n²)。

实际应用场景：复杂数据的去重处理
1 对象数组去重
当数组元素为对象时，需通过唯一标识（如id）判断重复：

const arr = [  
  { id: 1, name: 'Alice' },  
  { id: 2, name: 'Bob' },  
  { id: 1, name: 'Alice' }  
];  
const unique = (arr) => {  
  return arr.filter((item, index) => arr.findIndex(i => i.id === item.id) === index);  
};

此方法能保留对象的完整信息,但需确保唯一标识的准确性。

2 嵌套数组去重
若数组元素为嵌套结构，需递归处理或展开后比较：

function unique(arr) {  
  return arr.filter((item, index) => {  
    const isUnique = arr.findIndex(i => JSON.stringify(i) === JSON.stringify(item)) === index;  
    return isUnique;  
  });  
}

此方法适用于多层嵌套数组,但可能因字符串化导致性能损耗。

3 异步数据去重
在处理异步获取的数据时，需结合Promise和async/await确保去重逻辑的正确性：

async function fetchData() {  
  const data = await Promise.all([...]);  
  return [...new Set(data)];  
}

此方法能避免重复请求,但需注意异步数据的顺序和唯一性判断。

常见误区：避免踩坑
1 忽略类型转换问题
数字和字符串类型相同但会被视为不同元素，

[1, '1', 1].filter((item, index) => [...].indexOf(item) === index)  

结果为[1, '1']，需通过JSON.stringify统一转换类型。

2 错误判断重复元素
直接使用可能无法识别复杂对象的重复，

const arr = [  
  { name: 'Alice' },  
  { name: 'Alice' }  
];  
arr.filter((item, index) => arr.findIndex(i => i.name === item.name) === index)  

此方法能识别相同属性的对象,但需明确比较条件。

3 忽视边界情况
空数组、单元素数组或重复元素的特殊处理可能引发错误，

function unique(arr) {  
  if (arr.length === 0) return [];  
  return [...new Set(arr)];  
}

此方法能避免空数组的异常,但需提前处理边界条件。

综合实践：选择最优方案
1 根据数据量选择方法
小数据量使用传统循环或Set，大数据量优先使用Set，

// 大数据集去重  
const unique = (arr) => [...new Set(arr)];

此方法性能最优,适合处理大规模数据。

2 根据数据类型调整策略
基本类型直接使用Set，对象类型需通过唯一标识或字符串化处理，

// 对象数组去重  
const unique = (arr) => arr.filter((item, index) => arr.findIndex(i => i.id === item.id) === index);

此方法能保留对象结构,同时避免重复。

3 结合其他方法提升效率
在需要保留顺序或处理复杂结构时，可结合filter、map和Set，

const unique = (arr) => {  
  const seen = new Set();  
  return arr.filter(item => {  
    const key = JSON.stringify(item);  
    if (seen.has(key)) return false;  
    seen.add(key);  
    return true;  
  });  
};

此方法兼顾效率与灵活性,适合多种场景。

高阶技巧：进阶去重方案
1 使用Map实现更精准的去重
通过Map的键值对特性，可处理更复杂的去重逻辑，

function unique(arr) {  
  return Array.from(new Map(arr.map((item) => [item, 1]))).map(([key]) => key);  
}

此方法能避免Set的顺序丢失问题,同时支持对象数组去重。

2 利用数组的reduce方法
通过reduce逐个筛选元素，

function unique(arr) {  
  return arr.reduce((acc, item) => {  
    if (!acc.includes(item)) acc.push(item);  
    return acc;  
  }, []);  
}

此方法逻辑清晰，但时间复杂度仍为O(n²),不推荐大数据集。

3 动态去重条件的实现
根据业务需求动态设置去重条件，

function unique(arr, keyFn = (x) => x) {  
  return arr.filter((item, index) => {  
    const key = keyFn(item);  
    return arr.findIndex(i => keyFn(i) === key) === index;  
  });  
}

此方法支持自定义去重规则,如按属性或函数返回值判断唯一性。

JS数组去重的核心在于选择合适的方法和数据结构，基础方法（如循环、Set）适合简单场景，而ES6特性（如Map）和高阶技巧（如动态条件）则能应对复杂需求，在实际开发中，需结合数据量、类型和业务逻辑，优先使用Set或Map实现高效去重，同时避免常见误区（如类型转换、边界条件），最终目标是在性能与可读性之间找到平衡点,确保代码简洁且稳定运行。