共计 2708 个字符，预计需要花费 7 分钟才能阅读完成。
这一篇文章，我们讲解一下数组去重。
1. 最简单粗暴地方式，两重 for 循环
let arr = [9, 5, 6, 5, ‘1’, ‘1’, true, 5, true];
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if(arr[i] === arr[j]){
arr.splice(j,1);
}
}
}
console.log(arr); // [9, 5, 6, “1”, true, undefined, null, NaN, NaN, {…}, {…}]
// 两个 NaN, 因为 NaN!=NaN
2.indexOf
let a = [];
for (var i = 0; i < arr.length; i++) {
if(a.indexOf(arr[i]) === -1){
a.push(arr[i]);
}
}
console.log(a); // [9, 5, 6, “1”, true, undefined, null, NaN, NaN, {…}, {…}]
// 两个 NaN, 因为 NaN!=NaN
3.includes
for (var i = 0; i < arr.length; i++) {
if(!a.includes(arr[i])){
a.push(arr[i]);
}
}
console.log(a); // [9, 5, 6, “1”, true, undefined, null, NaN, {…}, {…}]
4.Set
let a = […(new Set(arr))];
console.log(a); // [9, 5, 6, “1”, true, undefined, null, NaN, {…}, {…}]
5.filter
let a = arr.filter(function(value, index){
return arr.indexOf(value, 0) === index;
})
console.log(a);// [9, 5, 6, “1”, true, undefined, null, {…}, {…}]
arr.filter(function(value){
return a.indexOf(value) === -1 ? a.push(value) : a;
})
console.log(a);// [9, 5, 6, “1”, true, undefined, null, NaN, NaN, {…}, {…}]
6.sort
arr = arr.sort(); // 排序，如果相同就会挨着
a.push(arr[0]); // 先放数组第一个元素
for (var i = 1; i < arr.length; i++) {
if(arr[i] !== arr[i – 1]){
a.push(arr[i]);
}
}
7.reduce
arr = arr.sort();
arr.reduce(function(preVal, nowVal){
if(preVal !== nowVal){
a.push(preVal);
}
return nowVal;
}, a)
arr.reduce(function(preVal, nowVal){
return a.indexOf(nowVal) === -1 ? a.push(nowVal) : a;
}, a)
console.log(a); //[“1”, 5, 6, 9, NaN, NaN, {…}, {…}, null, true, undefined]
8.hasOwnProperty
let obj = {};
for (var i = 0; i < arr.length; i++) {
if(!obj.hasOwnProperty(obj[typeof arr[i] + arr[i]])){
obj[typeof arr[i] + arr[i]] = arr[i];
}
}
console.log(Object.values(obj)); //[9, 5, 6, “1”, true, undefined, null, NaN, {…}] 无法判断对象
9. 对象数组去重方法
let obj = {};
for (var i = 0; i < arr.length; i++) {
if(!obj[typeof arr[i] + arr[i]]){
obj[typeof arr[i] + arr[i]] = arr[i];
}
}
console.log(Object.values(obj)); //[9, 5, 6, “1”, true, undefined, null, NaN, {…}]
10.Map
let map = new Map();
for (var i = 0; i < arr.length; i++) {
if(!map.get(arr[i])){
map.set(arr[i], arr[i]);
}
}
console.log(map);
补充
我想说一下 forEach 与 map
arr.forEach(function(element, index) {
console.log(element);
});
arr.map(function(element, index){
console.log(element);
});
相同点
他们都是用来遍历数组的。
不同点
map 能有返回值，forEach 没有返回值。
let arr = [9,3,6,3,6,3];
arr = arr.forEach(function(element, index) {
return element + 1;
});
console.log(arr); // undefined
arr = arr.map(function(element, index){
return element + 1;
});
console.log(arr); //[10, 4, 7, 4, 7, 4]
forEach 不能中途打断
let arr = [9,3,6,3,6,3];
arr.forEach(function(element, index) {
console.log(element);
if(index === 2){
return; // 没用，break,continue 会报错是无效的
}
});
forEach 模拟实现
Array.prototype.bforEach = function (fn) {
let array = this;
for (var i = 0; i < array.length; i++) {
fn(array[i], i, array);
}
}
arr.bforEach(function(element, index){
console.log(element); // 9, 3, 6, 3, 6, 3
});
map 模拟实现
Array.prototype.Map = function (fn) {
let array = this,
a = [],
r;
for (var i = 0; i < array.length; i++) {
r = fn(array[i], i, array);
a.push(r);
}
return a;
}
喜欢的可以点一个赞，或者关注一下。鼓励一下一名自学前端的大学生。
