JS数组去重

1、前端数组去重的方法

目标数组：

let targetArr = ['1', 1, 2, 3, 2, 1, true, false, true, 'false', {}, {}];

l 方法一：Set去重

Set（集合）保留插入元素的顺序，并且只包含唯一值，new Set（targetArr）接收一个数组作为参数，通过new Set（targetArr）我们得到的是一个伪数组，可以通过ES6新增的属性...(扩展符)将它转化成为一个数组：

let resArr = [...new Set(targetArr)];

console.log(resArr);// ['1', 1, 2, 3, true, false, 'false', {…}, {…}]

l 方法2：双层循环+splice

循环遍历数组，如果发现有相同元素就使用splice将其删除，就可以得到一个没有重复项的新数组，具体代码示例如下：

let targetArr = ['1', 1, 2, 3, 2, 1, true, false, true, 'false', {}, {}];

let fun = arr => {

let len = arr.length;

//异常判断，如果arr是一个空数组，那么直接返回arr

if (!len) {

return arr;

}

//这里使用提前计算好的arr数组的长度，避免每次循环都要计算一次arr的长度

for(let i = 0; i < len; i++) {

for(let j = i+1; j < len; j++) {

if (arr[i] === arr[j]) {

/**splice删除一个元素后，其后面的元素索引值都会减1，

* 所以需要使用j--以保证下次循环能够从正确的位置开始，

* 同时使用len--，可以减少不必要的循环，性能得到优化**/

arr.splice(j, 1);

len--;

j--;

}

}

}

return arr;

};

l 方法三：filter + indexOf

let targetArr = ['1', 1, 2, 3, 2, 1, true, false, true, 'false', {}, {}];

/**

* filter是es6新增的操作数组的方法，它的作用就是过滤数组

* 筛选出复合某一条件的值并返回一个新数组

* 它接收一个函数作为参数，该函数共有三个参数

* item ：当前元素的值

* index：当前元素的索引值

* array: 原数组也就是我们的目标数组targetArr

*/

let res = targetArr.filter((item, index, array) => {

/**

* indexOf返回在数组中首次遇到的等于指定值的索引

* 所以只要不是重复项那么必indexOf返回的值必然和index相等

* 只要是不相等的必然是重复项

* */

return array.indexOf(item) === index;

});

l 方法4：include

let targetArr = ['1', 1, 2, 3, 2, 1, true, false, true, 'false', {}, {}];

let fun = arr => {

let res = [];

let len = arr.length;

for (let i = 0; i < len; i++) {

/**

* includes是ES6中操作字符串和数组的方法，

* 它可以判断一个数组或者字符串中是否包含某个指定值

* 如果包含则返回true,反之返回false

* 它的语法是: arr.includes(searchValue,[start]);

* arr表示当前数组

* 接收两个参数

* searchValue： 表示要查询的元素

* [start]：开始查找的索引,该参数可有可无

*/

if (!res.includes(arr[i])) {

res.push(arr[i]);

}

}

return res;

};

l 方法5：map

let targetArr = ['1', 1, 2, 3, 2, 1, true, false, true, 'false', {}, {}];

let fun = arr => {

let tempMap = newMap();

let res = [];

let len = arr.length;

for (let i = 0; i < i + 1; i++) {

/**

* map是ES6中的一种数组结构，类似于对象，

* 但是它里面的值可以是各种数据类型，

* map有一个方法has()可以判断当前map中是否包含指定值

* map.has(searchValue)返回的true/false

*/

if (!tempMap.has(arr[i])) {

tempMap.set(arr[i], true);

res.push(arr[i])

}

}

}; 作者：Web前端-搬砖小黄 https://www.bilibili.com/read/cv23257936 出处：bilibili