JS 数组去重!!! 一篇不怎么靠谱的 "深度" 水文

前言

数组去重,这是一个老梗了…今天我又拿出来说了…

我们在考虑全面一点的情况下,数组去重的实现,比如针对

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()

[ES5]: 不等特性,需要借助占位符

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来写的话，应该代码量可以稍微再精简些

总结

相信各位小伙伴把这个弄懂了之后，各种面试中的花样数组去重要求对你来说都不是很坑了;