数组去重的若干方法

今天学习一下「数组去重」的多种办法！

双层 for 循环

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr(array) {
  var _arr = [];
  var isRepeat;
  
  for (let i = 0; i < array.length; i++) {
    isRepeat = false;
    for (let j = 0; j < _arr.length; j++) {
      // 比较 _arr 和 array 的每一项
      if (_arr[j] === array[i]) {
        isRepeat = true;
        break;
      }
    }
    // 如果为 false 说明 _arr 中不存在
    if (!isRepeat) {
      _arr.push(array[i]);
    }
  }
  return _arr;
}
console.log(unqueArr(arr)); // [1, 2, 6, 3, 5, 0, 8, 9, 4]

filter + indexOf

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr1(array) {
  return array.filter(function (item, index) {
    // indexOf() 会返回数据在数组中第一个位置
    // 假如 indexOf(1) 返回 0
    // 所以就是 indexOf(1) = 0 和 index = 0 比较为 true
    // 如果是 indexOf(1) = 0 和 index = 1 比较为 false
    return array.indexOf(item) === index;
  });
}
console.log(unqueArr1(arr)); // [1, 2, 6, 3, 5, 0, 8, 9, 4]

forEach + indexOf

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr2(array) {
  var _arr = [];

  array.forEach((element) => {
    if (_arr.indexOf(element) === -1) {
      _arr.push(element);
    }
  });
  return _arr;
}
console.log(unqueArr2(arr)); // [1, 2, 6, 3, 5, 0, 8, 9, 4]

forEach + includes

这个方法个indexOf是一样的道理，都是检查新数组中是否存在某个值。

includes检查数组中是否包含某个元素，返回true或者false

indexOf检查数组中是否包含某个元素，返回该元素在数组中的下标

indexOf对NaN数据是无效的，会返回-1

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr3(array) {
  var _arr = [];
  array.forEach((item) => {
    if (!_arr.includes(item)) {
      _arr.push(item);
    }
  });
  return _arr;
}
console.log(unqueArr3(arr)); // [1, 2, 6, 3, 5, 0, 8, 9, 4]

for + sort

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr4(array) {
  var _arr = [];

  array.sort();
  // 排序后
  // [0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 8, 9, 9]

  for (let i = 0; i < array.length; i++) {
    // 该方法原理就是用数组的前一项和后一项进行对比
    // 0 !== 0 返回 false，所以就不会 push
    // 0 !== 1 返回 true，所以就会 push(0)
    // 1 !== 1 返回 false，所以就不会 push
    // 1 !== 2 返回 true，所以就会 push(1)
    if (array[i] !== array[i + 1]) {
      _arr.push(array[i]);
    }
  }

  return _arr;
}
console.log(unqueArr4(arr));  // [1, 2, 6, 3, 5, 0, 8, 9, 4]

sort + reduce

该方法的道理和for + sort的方式道理是一样的

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr5(array) {
  // 先排序
  // [0, 0, 1, 1, 2, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 8, 9, 9]
  return array.sort().reduce((prev, item) => {
    // 0 肯定是满足条件所以 push(0) , [0]
    // prev[prev.length - 1] 也就是 0, 0 !== 0 返回 false 所以不会push
    // 然后 prev[prev.length - 1] 还是 0，0 !== 1 返回 true，所以就会 push(1)，[0, 1]
    // 然后 prev[prev.length - 1] 拿到 1 ，1 和 1 比较返回 false 所以不会 push
    if (prev.length === 0 || prev[prev.length - 1] !== item) {
      prev.push(item);
    }
    return prev;
  }, []);
}
console.log(unqueArr5(arr)); // [1, 2, 6, 3, 5, 0, 8, 9, 4]

for + map

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr6(array) {
  var _arr = [];
  var _temp = new Map();

  for (let index = 0; index < array.length; index++) {
    // 如果 map 中没有 1 这个属性就会添加到 map 对象中 Map{1:1}
    // 如果 map 中没有 2 这个属性就会添加到 map 对象中 Map{1:1, 2:1}
    if (!_temp.get(array[index])) {
      // 添加到 map 对象里，方便下次判断
      _temp.set(array[index], 1);
      // push 进数组中
      _arr.push(array[index]);
    }
  }
  return _arr;
}
console.log(unqueArr6(arr)); // [1, 2, 6, 3, 5, 0, 8, 9, 4]

Array.from + Set

var arr = [1, 1, 2, 6, 3, 5, 0, 3, 6, 8, 9, 4, 4, 2, 0, 9, 5, 2];

function unqueArr6(array) {
  // 利用 Set 不能唯一的特性
  // 然后将 Set 转化成数组
  return Array.from(new Set(array));
}
console.log(unqueArr6(arr)); // [1, 2, 6, 3, 5, 0, 8, 9, 4]