今日前端小知识——数组去重的方法

现在有一个数组，存在一些重复元素，如下

let arr = [1, 1, 'a', 'b', true, undefined, true, false, true, false, 3, 4, 5, 6, 7, 6, null, 6, null, undefined];

去重后的结果应该如下

[1, 'a', 'b', true, undefined, false, 3, 4, 5, 6, 7, null];

双重for循环遍历+splice()

遍历原数组的每一个元素，并将该元素与之后的所有元素进行比较，如果遇到相同元素，则通过 splice 方法将后面这个重复元素删除，最后得到的就是一个无重复元素的数组。该方法会直接修改原数组，代码如下。

function distinct0(list) {
  for (let i = 0, len = list.length; i < len - 1; i++) {
    for(let j = i + 1; j < len; j++) {
      if (list[i] === list[j]) {
        list.splice(j, 1);
        j--;
        len--;
      }
    }
  }
  return list;
}
let arr0 = distinct0(arr);

for循环遍历+indexOf()+splice()

遍历原数组的每一个元素，并通过 indexOf 方法获取到当前元素第一次出现的位置，与该元素的索引（循环的下标）比较，如果不相等，则说明当前索引的元素重复了，通过 splice 方法将该元素删除。该方法会直接修改原数组，代码如下。

function distinct1(list) {
  for (let i = 0, len = list.length; i < len; i++) {
    if (list.indexOf(list[i]) != i) {
      list.splice(i, 1);
      i--;
      len--;
    }
  }
  return list;
}
let arr1 = distinct1(arr);

filter()+indexOf()

通过 filter 方法遍历原数组的每一个元素，并通过 indexOf 方法过滤出所有第一次在数组中出现的位置与元素索引相等的元素。该方法会生成新的数组，不改变原数组，代码如下。

function distinct2(list) {
  return list.filter((v, i, arr) => arr.indexOf(v) == i);
}
let arr2 = distinct2(arr);

借用新数组+for循环遍历+indexOf()

需要借用新数组存储去重后的元素，遍历原数组的每一个元素，通过 indexOf 方法判断新数组中是否存在当前元素，不存在则将该元素添加到新数组中；或者通过 indexOf 方法获取当前元素在原数组中第一次出现的位置，与该元素的索引（循环的下标）比较，相等则说明是第一次出现，将该元素添加到新数组中。代码如下。

function distinct3(list) {
  let res = [];
  for (let i = 0, len = list.length; i < len; i++) {
    if (res.indexOf(list[i]) == -1 || list.indexOf(list[i]) == i) {
      res.push(list[i]);
    }
  }
  return res;
}
let arr3 = distinct3(arr);

借用新数组+for循环遍历+includes()

借用新数组，遍历原数组的每一个元素，通过 includes 方法判断新数组中是否存在当前元素，不存在则将该元素添加到新数组中。代码如下。

function distinct4(list) {
  let res = [];
  for (let i = 0, len = list.length; i < len; i++) {
    if (!res.includes(list[i])) {
      res.push(list[i]);
    }
  }
  return res;
}
let arr4 = distinct4(arr);

借用新数组+for循环遍历+some()

借用新数组，遍历原数组的每一个元素，通过 some 方法判断新数组中是否存在当前元素，不存在则将该元素添加到新数组中。代码如下。

function distinct5(list) {
  let res = [];
  for (let i = 0, len = list.length; i < len; i++) {
    if (!(res.some(v => v === list[i]))) {
      res.push(list[i]);
    }
  }
  return res;
}
let arr5 = distinct5(arr);

利用ES6新增的数据结构——集合Set

Set 表示集合，它包含的所有元素都是不重复的。利用这一特点，将数组转换成 Set 之后，再转换成数组，就可以拿到一个去重后的数组了。

function distinct6(list) {
  let res = Array.from(new Set(arr));
  // let res = [...new Set(arr)];
  return res;
}
let arr6 = distinct6(arr);