js 去重的方法

 本文详细介绍了JavaScript中去除数组重复元素的几种方法，包括利用Set、两层循环、indexOf、includes、filter、Map以及对象属性。

在 JavaScript 中，有多种方法可以对数组进行去重。以下是几种常用的方法：
 

1. 使用 Set，Set 是最简洁和高效的方式。

Set 是一种新的数据结构，能够存储唯一值。

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

2. 使用 filter 和 indexOf

利用 filter 方法和 indexOf 来判断元素是否已经出现过。

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

3. 使用 reduce

通过 reduce 方法构建一个新的数组，并确保每个元素唯一。

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

4. 使用 forEach 和 Map

使用 Map 来跟踪唯一值。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueMap = new Map();
array.forEach(value => uniqueMap.set(value, true));
const uniqueArray = Array.from(uniqueMap.keys());
console.log(uniqueArray); // [1, 2, 3, 4, 5]

5. 使用 sort 和 filter

通过排序后结合 filter 去重（不推荐，因为会改变原数组的顺序）。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.sort().filter((value, index, self) => !index || value !== self[index - 1]);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

6.利用Set()+Array.from()

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]
const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

• Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。
• Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
   

7.利用两层循环+数组的splice方法

通过两层循环对数组元素进行逐一比较，然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

function removeDuplicate(arr) {
  let len = arr.length
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        len-- // 减少循环次数提高性能
        j-- // 保证j的值自加后不变
      }
    }
  }
  return arr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

8.利用数组的indexOf方法
新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。

indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (newArr.indexOf(item) === -1) {
      newArr.push(item)
    }
  })
  return newArr // 返回一个新数组
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

9.利用数组的includes方法

此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。

• includes()方法：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

  const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]
  
  function removeDuplicate(arr) {
    const newArr = []
    arr.forEach(item => {
      if (!newArr.includes(item)) {
        newArr.push(item)
      }
    })
    return newArr
  }
  
  const result = removeDuplicate(arr)
  console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]
  

10.利用Map()
Map对象是JavaScript提供的一种数据结构，结构为键值对形式，将数组元素作为map的键存入，然后结合has()和set()方法判断键是否重复。

Map 对象：用于保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

function removeDuplicate(arr) {
  const map = new Map()
  const newArr = []

  arr.forEach(item => {
    if (!map.has(item)) { // has()用于判断map是否包为item的属性值
      map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true
      newArr.push(item)
    }
  })

  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

 注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。

11.利用对象

其实现思想和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]

function removeDuplicate(arr) {
  const newArr = []
  const obj = {}

  arr.forEach(item => {
    if (!obj[item]) {
      newArr.push(item)
      obj[item] = true
    }
  })

  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

原文地址：https://blog.csdn.net/2301_81449444/article/details/142908809

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！