JS数组去重六大方法

1. 利用ES6中的Set方法去重

var array = [1, 0, 2, 9, 2, 1, 3, 8, 9]
function uniqe(arr) {
  return Array.from(new Set(arr))
}
console.log(uniqe(array))
console.log(...new Set(array))

2.双重循环，再用数组的splice方法去重

var array = [1, 0, 2, 9, 2, 1, 3, 8, 9]
function uniqe(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i+1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
      }
    }
  }
  return arr;
}
console.log(uniqe(array))

3. 利用数组indexof去重

var array = [1, 0, 2, 9, 2, 1, 3, 8, 9]
function uniqe1(arr) {
  let newArray = []
  for (let i = 0; i < arr.length; i++) {
    if (newArray.indexof(arr[i]) === -1) {
     newArray.push(arr[i])
    }
  }
  return newArray;
}
console.log(uniqe(array))

4.利用数组sort方法去重(相邻数组比对法)

// 注：arr.sort(function)参数必须是函数，可选，默认升序
var array = [1, 0, 2, 9, 2, 1, 3, 8, 9]
function uniqe1(arr) {
  arr = arr.sort()
  console.log(arr)
  let newArray = arr[0]
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] != arr[i -1]) {
     newArray.push(arr[i])
    }
  }
  return newArray;
}
console.log(uniqe(array))

5.利用数组include方法去重

var array = [1, 0, 2, 9, 2, 1, 3, 8, 9]
function uniqe1(arr) {
  let newArray = []
  for (let i = 0; i < arr.length; i++) {
    if (!newArray.includes(arr[i])) {
     newArray.push(arr[i])
    }
  }
  return newArray;
}
console.log(uniqe(array))

6.利用数组reduce方法去重

var arrayC = [1, 0, 2, 9, 2, 1, 3, 8, 9, 'qqq', 'a', 'qqq', 'ertr', 'www', 'ertr']
  let newArray = arrayC.reduce((pre, cur) => {
    if (!pre.includes(cur)) {
      return pre.concat(cur)
    } else {
      return pre
    }
  }, [])
console.log(newArray)

数组reduce方法解析

1. 语法

   arr.reduce(callback, [initalValue])
   

   reduce为数组中的每一个元素一次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受4个参数：初始值（或上一次回调函数返回的值）、当前元素、当前索引、调用reduce的数组。

   callback(执行数组中每个值的函数，包含4个参数)

   1. previousValue：上一次回调函数的返回值，或是提供的初始值
   2. currentValue：数组中当前被处理的值
   3. Index：当前值在数组中的下标
   4. array：调用reduce的数组

2. 实例解析initalValue

   initalValue：作为第一次调用callback的第一个参数

   如果不设置initalValue为0，默认从下标1开始，且如果数组为空，会直接报错。所以initalValue的值每次都指定初始值是0，更安全。

3. reduce简单用法

   var arr = [1, 2, ,3, 4]
   // 数组求和
   var sum = arr.reduce((x, y) => x + y)
   // 数组乘积
   var mul = arr.reduce((x, y) => x * y)
   

4. reduce的高级用法

   • 计算数组中每个元素出现的次数

     /**
     * 计算数组中每个元素出现的次数
     */
     let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
     let nameNum = names.reduce((pre, cur) => {
       if (cur in pre) {
         pre[cur]++;
       } else {
         pre[cur] = 1
       }
       return pre
     }, {})
     console.log(nameNum) // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
     

   • 将二维数组转换为一维数组

     let arr = [[0., 1], [2, 3], [4, 5]]
     let newArr = arr.reduce((pre, cur) => {
       return pre.concat(cur)
     }, [])
     
     console.log(newArr) // [0, 1, 2, 3, 4, 5]
     

   • 将多维数组转换为一维数组

     let arr = [[0, 1], [2, 3], [4, [5, 6, 7]]]
     const newArr = function(arr) {
       return arr.reduce((pre, cur) => {
         return pre.concat(Array.isArray(cur) ? newArr(cur) : cur)
       }, [])
     }
     
     console.log(newArr(arr))
     

   • 对象里的属性求和

     var result = [
       {
         subObject: 'Math',
         score: 100
       }, {
         subObject: 'Chinese',
         score: 95
       }, {
         subObject: 'English',
         score: 90
       }
     ]
     
     var sum = result.reduce((pre, cur) => {
       return pre + cur.score
     }, 0)
     console.log(sum)  // 285