JavaScript 数组去重

2022-09-05JavaScript

主要记录一下前端数组去重的几种方法，也方便后面查看。

ES6 new Set() + ... || Array.from

ES6 提供了新的数据结构 Set。类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，可以接受一个具有 iterable 接口数据结构作为参数（如数组，字符串），用来初始化。

不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let newArr = [...new Set(arr)]; // [1, 2, 3, null, "a", "b"]

let newArr1 = Array.from(new Set(arr)); // [1, 2, 3, null, "a", "b"]

ES6 new Map()

ES6 提供了新的数据结构 Map 。类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

• set 方法设置键名 key 对应的键值为 value，然后返回整个 Map 结构。如果 key 已经有值，则键值会被更新，否则就新生成该键。
• get 方法读取 key 对应的键值，如果找不到 key，返回 undefined。
• has 方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let map = new Map();
let newArr = [];

for (let i = 0, len = arr.length; i < len; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], true);
    newArr.push(arr[i]);
  }
}

console.log(newArr); //  [1, 2, 3, null, "a", "b"]

Array.includes()

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

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let newArr = [];
for (var i = 0, len = arr.length; i < len; i++) {
  if (!newArr.includes(arr[i])) newArr.push(arr[i]);
}

// forEach
arr.forEach((item) => (!newArr.includes(item) ? newArr.push(item) : ""));

console.log(newArr); // [1, 2, 3, null, "a", "b"]

Array.indexOf()

indexOf()方法：返回数组中某个指定元素的位置。该方法遍历数组，查找有无对应元素并返回元素第一次出现的索引，若未找到指定元素则返回-1。

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let newArr = [];
for (var i = 0, len = arr.length; i < len; i++) {
  if (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]);
}

//等同于使用forEach遍历
arr.forEach((item) => (newArr.indexOf(item) === -1 ? newArr.push(item) : ""));

Array.reduce + Array.includes

reduce()方法：接收一个函数作为累加器，数组中的每个值从左到右开始计算，最终计算为一个值。

语法：arr.reduce(function(total, currValue, currIndex, arr), initValue) > reduce()对于空数组是不会执行回调函数的。

• total：必需。初始值, 或者计算结束后的返回值
• currValue：必需。当前元素
• currIndex：可选。当前元素的索引
• arr ：可选。当前数组对象。
• initValue：可选。累加器初始值

一个空数组调用 reduce()方法且沒有提供初始值，会报错。 一个空数组调用 reduce()方法且提供了初始值，将直接返回该初始值，不會调用 callback 函数。 非空数组调用 reduce()提供初始值，则 total 将会等于初始值，且 currValue 从第一个元素开始；若沒有提供初始值，则 total 会等于的第一个元素值，且 currValue 将会从第二个元素开始。

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let newArr = arr.reduce((acc, cur) => {
  return acc.includes(cur) ? acc : acc.concat(cur); // 1. 拼接方法
  // return acc.includes(cur) ? acc : [...acc, cur]; // 2. 扩展运算
}, []);

console.log(newArr); // [1, 2, 3, null, "a", "b"]

Array.filter + Array.indexOf

filter()方法：创建一个新数组，新数组中的元素是指定数组中符合某种条件的所有元素。如果没有符合条件的元素则返回空数组。

语法：array.filter(function(item,index,arr))

filter()不会对空数组进行检测。 filter()不会改变原始数组。

• 原理：返回 item 第一次出现的位置等于当前的 index 的元素

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let newArr = arr.filter((item, index) => arr.indexOf(item) === index);

console.log(newArr); // [1, 2, 3, null, "a", "b"]

Array.filter + Object.hasOwnProperty

hasOwnProperty()方法：返回一个布尔值，表示对象自身属性中是否具有指定的属性

• 原理：利用对象的键名不可重复的特点。

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let obj = {};
arr.filter((item) =>
  obj.hasOwnProperty(typeof item + item)
    ? false
    : (obj[typeof item + item] = true)
);

// [1, 2, 3, null, "a", "b"]

利用对象的 key 唯一

对象的 key 不可重复，否则后者将覆盖前者。利用该特性，实现数组去重，遍历数组，将数组的每一项做为对象的 key 值。

若当前元素重复，则与数组最后一位元素交换位置，i--再次进行判断即可，同时 length--,操作数组的长度实现删除数组的最后一个元素，这样便不会影响到数组中其他元素。

const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];

let obj = {};
for (let i = 0; i < arr.length; i++) {
  let item = arr[i];
  if (obj[item] !== undefined) {
    arr[i] = arr[arr.length - 1];
    arr.length--;
    i--;
    continue;
  }
  obj[item] = item;
}

console.log(arr); // [1, 2, 3, null, "a", "b"]

利用 sort()

利用 sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log("type error!");
    return;
  }
  arr = arr.sort();
  var arrry = [arr[0]];
  for (var i = 1; i < arr.length; i++) {
    if (arr[i] !== arr[i - 1]) {
      arrry.push(arr[i]);
    }
  }
  return arrry;
}

var arr = [
  1,
  1,
  "true",
  "true",
  true,
  true,
  20,
  20,
  false,
  false,
  undefined,
  undefined,
  null,
  null,
  NaN,
  NaN,
  "NaN",
  0,
  0,
  "a",
  "a",
  {},
  {},
];
console.log(unique(arr));
// [0, 1, 20, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}没有去重

双层 for 循环，splice 去重（ES5）

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

function unique(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        //第一个等同于第二个，splice方法删除第二个
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}
var arr = [
  1,
  1,
  "true",
  "true",
  true,
  true,
  15,
  15,
  false,
  false,
  undefined,
  undefined,
  null,
  null,
  NaN,
  NaN,
  "NaN",
  0,
  0,
  "a",
  "a",
  {},
  {},
];
console.log(unique(arr));
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了

递归去重

function unique(arr) {
  var array = arr;
  var len = array.length;
  array.sort(function (a, b) {
    //排序后更加方便去重
    return a - b;
  });

  function loop(index) {
    if (index >= 1) {
      if (array[index] === array[index - 1]) {
        array.splice(index, 1);
      }
      loop(index - 1); //递归loop，然后数组去重
    }
  }
  loop(len - 1);
  return array;
}
var arr = [
  1,
  1,
  "true",
  "true",
  true,
  true,
  15,
  15,
  false,
  false,
  undefined,
  undefined,
  null,
  null,
  NaN,
  NaN,
  "NaN",
  0,
  0,
  "a",
  "a",
  {},
  {},
];
console.log(unique(arr));
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

根据数组中对象的某个属性值进行去重

Map + filter

const arr = [{name:'张三'，age:20},{name:'张三'，age:22},{name:'李四'，age:24}]

function unique(arr) {
  const res = new Map();
  return arr.filter((a) => !res.has(a.name) && res.set(a.name, 1))

unique(arr)    // [{name:'张三'，age:20},{name:'李四'，age:24}]

• 更多实现方式：js 数组对象根据对象中的指定属性去重