js 数组去重方法总结

var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 'NaN', 0, 0, 'a', 'a', {}, {}];

/*
 * ES3 的方法
 */

// 方法一 思路：新建空数组，利用双层for循环，逐一取出传入数组的项与新数组中的每一项做对比，如果没有相同的则将该项插入新数组中，如果对比项相同则跳出当前循环回到父循环中继续做下一轮对比。新数组为去重后的数组，不会影响老数组
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique1(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if (newArr.length == 0) { newArr.push(arr[i]); } else { var isPush = true; for (var k = 0; k < newArr.length; k++) { if (newArr[k] == arr[i]) { isPush = false; break; }; }; if (isPush == true) { newArr.push(arr[i]); } } }; return newArr;
};
console.log(unique1(arr)); // [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]


// 方法二 思路：新建空数组，利用双层for循环，将传入数组的项（从第一项开始）与其后面的项做对比，如果有相同的，不做处理，如果没有相同的，就插入到新数组中。新数组为去重后的数组，不会影响老数组
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique2(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { for (var k = i + 1; k < arr.length; k++) { if(arr[k] == arr[i]){ k = ++i; }; }; newArr.push(arr[i]); }; return newArr;
};
console.log(unique2(arr)); // ["true", true, 15, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]


// 方法三 思路：双层for循环，让当前项与其后面的项做比较，如果相同，就对后面重复的项做删除操作，会影响老数组。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
// 备注 示例方法是正向遍历，也可以逆向遍历，此处不做演示
function unique3(arr) { for (var i = 0; i < arr.length; i++) { for (var k = i + 1; k < arr.length; k++) { if (arr[k] == arr[i]) { arr.splice(k, 1); k--; } } }
};
unique3(arr)
console.log(arr); // [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]


// 方法四 思路：利用对象的属性名字不能重复的特点，建立新对象，将数组中的某项作为属性名放到对象当中，使用for循环判断对象属性是否存在，如果存在，不进行操作，如果不存在则放置到对象中。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN、Object。
// 缺点：针对 NaN和'NaN', 对象的key会视为一个key，区分不了NaN和'NaN'。
function unique4(arr) { var newObj = {}, newArr = []; for (var i = 0; i < arr.length; i++) { if (!newObj[arr[i]]) { newObj[arr[i]] = true; newArr.push(arr[i]); } } return newArr;
};
console.log(unique4(arr)); // [1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]


// 方法五 思路：利用sort()方法先将数组排序，然后使用for循环遍历排序后的数组，如果当前项与其后面相邻的项不相同，则将该项插入新数组中，此方法不改变元素组，返回排序后的新数组。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique5(arr){ var sortArr = arr.sort(function(a, b){ return a - b; }); var newArr = [sortArr[0]]; for(var i = 1; i< sortArr.length;i++){ if(sortArr[i] !== sortArr[i-1]){ newArr.push(sortArr[i]); } }; return newArr;
};
console.log(unique5(arr)); // [1, "true", false, null, 0, true, 15, {…}, {…}, NaN, NaN, "NaN", "a", undefined]


// 方法六 思路：利用sort()方法先将数组排序，然后创建递归函数判断当前项与其后面的项是否相同，相同用splice方法删除，然后运行递归函数继续进行判断操作。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique6(arr) { var newArr = arr, arrLen = arr.length; var sortArr = arr.sort(function(a, b) { return a - b; }); function loop(index) { if (index >= 1) { if (newArr[index] === newArr[index - 1]) { newArr.splice(index, 1); }; loop(index - 1); } }; loop(arrLen - 1); return newArr;
};
console.log(unique6(arr)); // [1, "true", false, null, 0, true, 15, {…}, {…}, NaN, NaN, "NaN", "a", undefined] /*
 * ES5的方法
 */

// 方法七 思路：结合indexOf()方法和forEach()方法，如果老数组中循环的项在新数组中不存在，则将该项插入新数组，不改变老数组，返回新数组。注意indexOf()方法也可以用lastIndexOf()方法替代，forEach()方法也可以用for循环替代的。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique7(arr){ var newArr = []; // for(var i = 0; i< arr.length; i++){ // if(newArr.indexOf(arr[i]) === -1){ // newArr.push(arr[i]); // } // } arr.forEach(function(item, index, array){ if(newArr.indexOf(item) === -1){ newArr.push(item); } }); return newArr;
};
console.log(unique7(arr)); // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]


// 方法八 思路：结合includes()方法和forEach()方法，includes方法检测数组中是否有某个值。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique8(arr){ var newArr = []; arr.forEach(function(item, index, array){ if(!newArr.includes(item)){ newArr.push(item); } }); return newArr;
};
console.log(unique8(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// 方法九 思路：结合includes()方法和filter()方法，includes方法检测数组中是否有某个值。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique9(arr){ var newArr = []; arr.filter(function(item){ if(!newArr.includes(item)){ newArr.push(item); } }); return newArr;
};
console.log(unique9(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// 方法十 思路：结合indexOf()方法和filter()方法，includes方法检测数组中是否有某个值。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique10(arr){ var newArr = []; arr.filter(function(item){ if(newArr.indexOf(item) === -1){ newArr.push(item); } }); return newArr;
};
console.log(unique10(arr));  // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]


// 方法十一 思路：利用map()方法去重。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉 Object
function unique11(arr){ var map = new Map(); var newArr = []; arr.forEach(function(item){ if(map.has(item)){ map.set(item, true); } else { map.set(item, false); newArr.push(item); } }); return newArr;
};
console.log(unique11(arr));  // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// // 方法十二 思路：利用hasOwnProperty去重。
// // 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN、Object。
function unique12(arr){ var obj = {}; return arr.filter(function(item){ return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true); });
};
console.log(unique12(arr));  // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]


/*
 * ES6的方法
 */

// 方法十三 思路：利用ES6中的拓展运算符...和set()方法。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique13(arr){ return [...new Set(arr)];
};
console.log(unique13(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// 方法十四 思路：利用ES6中Array.from()方法和set()方法，set()方法可以生产set数据结构，这种结构成员的值是唯一的，然后用Array.from()方法将set对象转为数组。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique14(arr){ return Array.from(new Set(arr));
};
console.log(unique14(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]