前言
数组去重,这是一个老梗了...今天我又拿出来说了... 我们在考虑全面一点的情况下,数组去重的实现,比如针对NaN,undefined,{}; 这其中涉及的知识点挺多，不信跟着走一波; 这里不考虑浏览器兼容性这些破问题，因为涉及ES5&6
实现大全
基础版
只包含一些可以直接比较的数值
测试数组
[1,1,'','','e','e',true,'true',true,false,false,'false',undefined,'undefined',undefined,null,'null',null]
- ES5万能的
for方法
function uniqueUseFor(array) { var temp = []; //一个临时数组 //遍历当前数组 for (var i = 0, j = array.length; i < j; i++) { //很直白，新数组内判断是否有这个值，没有的情况下，就推入该新数组 temp.indexOf(array[i]) === -1 ? temp.push(array[i]) : ''; } return temp; } // result: [1, "", "e", true, "true", false, "false", undefined, "undefined", "null", null]
- ES5内置的
forEach方法
function uniqueUseForEach(array) { // 传入值必须存在，且长度小于等于1的时候直接返回数组 if (array && array.length <= 1) { return array; } else { var temp = []; //一个临时数组 //遍历当前数组 array.forEach(function (value, index) { temp.indexOf(value) == -1 ? temp.push(value) : ''; }) return temp; } } // result: [1, "", "e", true, "true", false, "false", undefined, "undefined", "null", null]
- [ES6]内置的
for-of方法
function uniqueUseForOf(array) { const temp = []; //一个临时数组 // 传入值必须存在，且长度小于等于1的时候直接返回数组 if (array && array.length <= 1) { return array; } else { //遍历当前数组 for (let x of array) { temp.indexOf(x) === -1 ? temp.push(x) : ''; } } return temp; } // result: [1, "", "e", true, "true", false, "false", undefined, "undefined", "null", null]
进阶版
包含NaN,undefined,null
测试数组
[1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN, 0, 1, 'a', 'a', NaN,'NaN']
知识点
- NaN有两中通用判定方法和数组中一种判定方法：
- 一个是绝对不全等于(
===)自身 - 一个是
ES6的isNaN() - 数组原型链上的
Array.prototype.includes()
function uniqueUseNotAllEqual(array) { var temp = [], //一个临时数组 mark = true; // 标识位 //遍历当前数组 for (var i = 0, j = array.length; i < j; i++) { // 标识位的作用就是用来判断是否存在NaN,第一次找到保留到新数组中 // 然后标识位置改为false是为了再次找到的时候不推入数组 if (array[i] !== array[i]) { // 这里的不等特性,也可以用isNaN判断[ES6] mark && temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : ''; mark = false; } else temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : ''; } return temp; } // result: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"]
- [ES6]内置
Array.prototype.includes()大法
function uniqueCompareUseIncludes(array) { // 传入值必须存在，且长度小于等于1的时候直接返回数组 if (array && array.length <= 1) { return array; } else { let temp = []; //一个临时数组 //遍历当前数组 for (let x of array) { // includes() 方法用来判断当前数组是否包含某指定的值，如果是，则返回 true，否则返回 false。 temp.includes(x) ? '': temp.push(x) ; } return temp; } } // result: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"]
- [ES6]
Array.from或拓展运算符[...]结合Set大法
知识点
Set的值具有唯一性，内部会自动===比较，是可迭代对象(iterable),有点特殊的是NaN这货虽然有不全等的特性，在Set里面认为是相同的，所以只能有一个Array.from和...可以把类似数组【nodelist or arguments】这类可迭代的对象中转为一个标准的数组
// Array.from + Set的方法 Array.from(new Set([1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN, 0, 1, 'a', 'a', NaN,'NaN'])) // resule: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"] // ... + Set的方法 [...new Set([1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN, 0, 1, 'a', 'a', NaN,'NaN'])] //result: [1, "true", true, 5, "F", false, undefined, null, NaN, 0, "a", "NaN"]
高阶版
包含{},NaN,undefined,null
测试数组
[1,1,'true',true,true,5,'F',false, undefined, null,null,undefined, NaN,{},{},'{}', 0, 1, 'a', 'a', NaN]
知识点
{}的比较真心不好做，有残缺性的比较可以这样写JSON.stringify({}) == '{}'- 一个比较完美的方案是借助
for in结合原型链的toString来判断 - ES5
for-in+call+for方案
function uniqueUseForIn(array) { var temp = []; var emptyObjectMark = true; // 标识位 var NaNObjectMark = true; // 标识位 // 判断空对象,这块判断折腾了许久 function isEmptyObject(object) { if (Object.prototype.toString.call(object) === "[object Object]") { for (var i in object) { // 存在属性或方法，则不是空对象 return false } return true; } else { return false; } } // 传入值必须存在，且长度小于等于1的时候直接返回数组 if (array && array.length <= 1) { return array; } else { //遍历当前数组 for (var i = 0, j = array.length; i < j; i++) { // 标识位的作用就是用来判断是否存在NaN和空对象,第一次找到保留到新数组中 // 然后标识位置改为false是为了再次找到的时候不推入数组 if (isEmptyObject(array[i])) { emptyObjectMark && temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : ''; emptyObjectMark = false; } else if (array[i] !== array[i]) { NaNObjectMark && temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : ''; NaNObjectMark = false; } else temp.indexOf(array[i]) == -1 ? temp.push(array[i]) : ''; } return temp; } } // result：[1, "true", true, 5, "F", false, undefined, null, NaN, Object, "{}", 0, "a"]
拓展版
多维数组扁平化再去重;
回应:
留言板的小伙伴说去重深度不够。。2017/5/12
测试数组
[1, 1, [['true', true, true, [5, 'F'], false], undefined], null, null, [undefined, NaN, {}], {}, '{}', 0,1, 'a','a', NaN]
知识点
- 数组扁平化用了递归实现
- 代码也考虑了默认参数，防止不传递参数的时候报错
- ES5
for-in+call+for+ 递归扁平化方案
function uniqueArrayWithFlattern(array) { var _array = array || []; // 保存传参 // 判断空对象,这块判断折腾了许久 function isEmptyObject(object) { if (Object.prototype.toString.call(object) === "[object Object]") { for (var i in object) { // 存在属性或方法，则不是空对象 return false } return true; } else { return false; } } // 遍历查询判断,扁平化数组 function forArrayFlattern(arr) { for (var m = 0, n = arr.length; m < n; m++) { if (Array.isArray(arr[m])) { var _tempSpliceArr = _array.splice(m, 1)[0]; _array = _array.concat(_tempSpliceArr); return forArrayFlattern(_array); } } return uniqueArr(_array); } // 传入值必须存在，且长度小于等于1的时候直接返回数组 if (_array && _array.length <= 1) { return _array } else { if (Array.isArray(_array)) { return forArrayFlattern(_array) } else { return _array; } } // 数组去重 function uniqueArr(_array) { var temp = []; var emptyObjectMark = true; // 标识位 var NaNObjectMark = true; // 标识位 console.log(_array.length) //遍历当前数组 for (var a = 0, b = _array.length; a < b; a++) { // 标识位的作用就是用来判断是否存在NaN和空对象,第一次找到保留到新数组中 // 然后标识位置改为false是为了再次找到的时候不推入数组 console.log(_array[a]); if (isEmptyObject(_array[a])) { emptyObjectMark && temp.indexOf(_array[a]) == -1 ? temp.push(_array[a]) : ''; emptyObjectMark = false; } else if (_array[a] !== _array[a]) { NaNObjectMark && temp.indexOf(_array[a]) == -1 ? temp.push(_array[a]) : ''; NaNObjectMark = false; } else { temp.indexOf(_array[a]) === -1 ? temp.push(_array[a]) : ''; } } console.log(temp); return temp; } } // result：[1, null, Object, "{}", 0, "a", NaN, undefined, "true", true, false, 5, "F"] // 用ES6来写的话，应该代码量可以稍微再精简些
