JS数组对象去重（4种⽅法）
问题：数组对象去重
var arr = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4}, {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}]；对数组对象name进⾏去重处理，结果显⽰为：
[{name: 'a',id: 1}, {name: 'b',id: 3}, {name: 'c',id: 4}, {name: 'd',id: 7}];
⽅法⼀：es5冒泡排序法，去重arr
var arr = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
{name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
function deWeight() {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i].name == arr[j].name) {
arr.splice(j, 1);
//因为数组长度减⼩1，所以直接 j++ 会漏掉⼀个元素，所以要 j--
j--;
}
}
}
return arr;
}
var newArr = deWeight();
console.log('%c%s', 'color:red;', '⽅法⼀：es5,newArr', newArr);
⽅法⼆：es5新建数据双重循环，去重arr2
var arr2 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
{name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
var temp = [];
function deWeightTwo() {
arr2.forEach(function(a) {
var check = temp.every(function(b) {
return a.name !== b.name;
})
check ? temp.push(a) : ''
})
return temp;
}
var newArr2 = deWeightTwo();
console.log('%c%s', 'color:red;', '⽅法⼆：es5,newArr2', newArr2);js数组方法总结
⽅法三：es6的Map()，去重arr3
var arr3 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
{name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
let deWeightThree = () => {
let name = 'name';
let map = new Map();
for (let item of arr3) {
if (!map.has(item.name)) {
map.set(item.name, item);
}
}
return [...map.values()];
}
let newArr3 = deWeightThree();
console.log('%c%s', 'color:red;', '⽅法三：es6,newArr3', newArr3);
⽅法四：es5，对象法去重arr4
var arr4 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
{name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
// duce(function(total, currentValue, currentIndex, arr), initialValue)
/
/ (function(必选初始值或计算结束返回值, 必选当前元素, 可选索引, 可选原数组)，可选函数初始值)
var obj = {};
function deWeightFour() {
arr4 = duce(function(a, b) {
obj[b.name] ? '' : obj[b.name] = true && a.push(b);
return a;
}, [])
return arr4;
}
var newArr4 = deWeightFour();
console.log('%c%s', 'color:red;', '⽅法四：es5,newArr4', newArr4);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。