JS数组去重（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