js数组去重方式汇编
Methods 1:
思路：先定义一个“新数组”，并存放“源数组”（待去重的数组，以下简称源数组）的第一个元素，然后将源数组和新数组的元素一一对比，若不同则存放在新数组中。
/** * * @param arr 源数组 * @returns {*[]} */function unique(arr) { // 结果数据 var res = [arr[0]]; for (var i = 1; i < arr.length; i++) { var repeat = false; for (var j = 0; j < res.length; j++) { if (arr[i] === res[j]) { repeat = true; break; } } if (!repeat) { res.push(arr[i]); } } return res;}console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 2:
思路：先将源数组排序，在与相邻的进行比较，如果不同则存入新数组。
/** * * @param arr 源数组 * @returns {*[]} */function unique2(arr) { var arr2 = arr.sort(); var res = [arr2[0]]; for (var i = 1; i < arr2.length; i++) { if (arr2[i] !== res[res.length - 1]) { res.push(arr2[i]); } } return res;}console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 4, 5, 6, 7] Methods 3:
思路：利用对象属性存在的特性，如果没有该属性则存入新数组。
/** * * @param arr 源数组 * @returns {*[]} */function unique3(arr) { var res = []; var obj = {}; for (var i = 0; i < arr.length; i++) { if (!obj[arr[i]]) { obj[arr[i]] = 1; res.push(arr[i]); } } return res;}console.log(unique3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 4:
思路：利用数组的indexOf下标属性来查询。
/** * * @param arr 源数组 * @returns {*[]} */function unique4(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (res.indexOf(arr[i]) == -1) { res.push(arr[i]); } } return res;}console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 5:
思路：利用数组原型对象上的includes方法。
/** * * @param arr 源数组 * @returns {*[]} */function unique5(arr) { var res = []; for (var i = 0; i < arr.length; i++) { // 如果res新数组包含当前循环item if (!res.includes(arr[i])) { res.push(arr[i]); } } return res;}console.log(unique5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 6:
思路：利用数组原型对象上的 filter 和 includes方法。
/** * * @param arr 源数组 * @returns {*[]} */function unique6(arr) { var res = []; res = arr.filter(function (item) { return res.includes(item) ? '' : res.push(item); }); return res;}console.log(unique6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 7:
思路：利用数组原型对象上的 forEach 和 includes方法。
/** * * @param arr 源数组 * @returns {*[]} */function unique7(arr) { var res = []; arr.forEach(function (item) { res.includes(item) ? '' : res.push(item); }); return res;}console.log(unique7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 8:
思路：利用数组原型对象上的 splice 方法。
/** * * @param arr 源数组 * @returns {*[]} */function unique8(arr) { var i, j, len = arr.length; for (i = 0; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1); len--; j--; } } } return arr;}console.log(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 9:
思路：利用数组原型对象上的 lastIndexOf 方法。
/** * * @param arr 源数组 * @returns {*[]} */function unique9(arr) { var res = []; for (var i = 0; i < arr.length; i++) { res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]); } return res;}console.log(unique9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 10:
思路：利用 ES6的set 方法。
/** * * @param arr 源数组 * @returns {*[]} */function unique10(arr) { // Set数据结构，它类似于数组，其成员的值都是唯一的 // 利用Array.from将Set结构转换成数组 return Array.from(new Set(arr)); }console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] 进阶篇：画龙点睛，一行代码搞定
Methods 10_1:
思路：利用ES6拓展运算符(...)内部使用for...of循环，以及Set成员值都是唯一的特性
/** * * @param arr 源数组 * @returns {*[]} */function unique10_1(arr) { // A.Set数据结构，它类似于数组，其成员的值都是唯一的 // B.拓展运算符(...)内部使用for...of循环 return [...(new Set(arr))];}console.log(unique10_1([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4] Methods 10_2:
思路：利用数组原型对象上的 filter函数以及ES6的Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
/** * * @param arr 源数组 * @returns {*[]} */function unique10_2(arr) { const res = new Map(); // 过滤条件是，如果res中没有某个键，就设置这个键的值为1 return arr.filter((a) => !res.has(a) && res.set(a, 1))}console.log(unique10_2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // [1, 2, 3, 5, 6, 7, 4]