js数组去重_前端js列表去重

一、理解

• 根据当前数组产生一个去除重复元素后的新数组
• 如: [6,9,8,7,2,5,6,5,4,5,6,4,5] ==> [6,9,8,7,2,5,4]

二、实现代码

1. forEach()和indexOf() 说明: 本质是双重遍历, 效率差些

  /*
    接收一个数组为参数,返回一个去重的数组
  */
  function unique (array) {
    // 定义一个空数组
    const resultArr = []
    // 循环遍历未去重的数组
    array.forEach(item => {
      // 判断resultArr中是否有该元素,没有才添加
      if (arr.indexOf(item)===-1) {
        resultArr.push(item)
      }
    })
    // 返回
    return resultArr
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. 利用forEach() + 对象容器 说明: 只需一重遍历, 效率高些

  /*
    接收一个数组为参数,返回一个去重的数组
  */
  function unique (array) {
    // 定义要返回的数组
    const resultArr = []
    // 定义一个对象
    const obj = {}
    // 循环遍历未去重的数组
    array.forEach(item => {
      // 如果obj中没有改元素属性
      if (!obj.hasOwnProperty(item)) {
        // 没有就为obj添加这个属性
        obj[item] = true
        resultArr.push(item)
      }
    })
    return resultArr
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. 利用ES6语法 说明: 编码简洁

  // 1. ... + Set
  function unique1 (array) {
    /*
      Set构造函数接收一个数组内部去重
      三点运算符将set转换为数组返回
    */
    return [...new Set(array)]
  }

  // 2. from + Set
  function unique2 (array) {
    /*
      Set构造函数接收一个数组内部去重
      使用Array的from方法把Set转换为数组返回
    */
    return Array.from(new Set(array))
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18