数组去重之后可进阶实现数据合并计算。
一、数组去重(js数组去重(9种方法))
1.利用Array.from(new Set)去重:
// 1.利用set去重
// Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合
// Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组,也是ES6的新增方法
let list = ['你是最棒的', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的',]
let newList = Array.from(new Set(list))
console.log('newList', newList);
2.利用includes去重
//2.利用Array.includes 去重
//includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
let list = ['你是最棒的1', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的1',]
let newList2 = []
list.forEach((item) => {
// 空数组newList2 不包含item为false ,取反为true 执行数组添加操作
// 如果数组包含了 item为true 取反为false 不执行数组添加操作
if (!newList2.includes(item)) {
newList2.push(item)
}
})
console.log('newList2', newList2);
3.利用map去重
//3.利用map去重
//map数据结构是es6中新出的语法,其本质也是键值对,只是其键不局限于普通对象的字符串
let list = ['你是最棒的2', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的2',]
let newList3 = [];
let map = new Map()
list.forEach((item) => {
// 如果map.has指定的item不存在,那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
// 如果下次出现重复的item,那么map.has(item等于ture 取反 !map.has(item) 不执行
if (!map.has(item)) {
map.set(item,ture)
newList3.push(item)
}
})
console.log('newList3', newList3);
4.利用indexOf去重
//4.利用indexOf去重
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1
let list = ['你是最棒的3', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的3',]
let newList4 = [];
list.forEach((item) => {
// 空数组newList4第一次循环没有找到匹配的item 返回-1 执行数组添加操作
// 如果数组在第n次循环中找到了newList4数组中item 例如:item等于6 而在newList4数组中已经有9 所以indexOf就不等于-1 不执行数组添加操作
if (newList4.indexOf(item) === -1) {
newList4.push(item)
}
})
console.log('newList4', newList4);
5. 利用单层for循环去重
// 5.单层for循环去重
// Array.splice() 方法用于添加或删除数组中的元素。会改变原数组
let list = ['你是最棒的4', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的4',]
let newlist5 = [];
for (let i = 0; i < list.sort().length; i++) {
if (list[i] == list[i + 1]) {
list.splice(i, 1)
i--
}
}
console.log('newlist5', list);
6.利用双层for循环去重
// 6.双层for循环去重
// Array.splice() 方法用于添加或删除数组中的元素。会改变原数组
let list = ['你是最棒的5', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的5',]
for (let i = 0; i < list.sort().length; i++) {
for (let j = i + 1; j < list.sort().length; j++) {
if (list[i] == list[j]) {
list.splice(i, 1)
j--
}
}
}
console.log('newlist6', list);
7.利用递归去重
// 7.递归去重
let list = ['你是最棒的6', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的6',]
function callBack(index) {
// 数组的长度不能等于0
if (index >= 1) {
// 第一次如果数组最后一个索引和最后第二个索引相等
if (list[index] === list[index - 1]) {
// 那么就删除这个索引的元素
list.splice(index, 1)
}
// 继续调用这个函数 第一次传入的参数是数组末尾第一个 第二次传入的参数是数组末尾第二个 层层递减
callBack(index - 1)
}
}
//传入排序好的数组的最大索引index
callBack(list.sort().length - 1)
console.log('newList7', list);
8.利用Array.filter和map对象数组去重 (性能较高)
//8.利用Array.filter和map去重
let map = new Map()
let list3 = [{
name: '好先森1',
id: 1
},
{
name: '好先森1',
id: 2
},
{
name: '好先森2',
id: 3
},
{
name: '好先森3',
id: 3
}
]
// 对象数组去重
function xxx(list3, key) {
return list3.filter((item) => !map.has(item[key].toString()) && map.set(item[key].toString()))
}
console.log('newList8', xxx(list3, 'id'));
9.利用Array.filter和Array.includes 对象数组去重
// 9.利用Array.filter和Array.includes去重
let list4 = [{
name: '好先森1',
id: 1
},
{
name: '好先森1',
id: 2
},
{
name: '好先森2',
id: 3
},
{
name: '好先森3',
id: 3
}
]
function xxx(arr) {
let list = [];
return arr.filter((item) => !list.includes(item.name) && list.push(item.name))
}
console.log('newList9', xxx(list4));
二、对象数组去重(JS数组对象去重(4种方法) )
1、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);
2、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);
3、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);
4、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}];
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
// (function(必选初始值或计算结束返回值, 必选当前元素, 可选索引, 可选原数组),可选函数初始值)
var obj = {};
function deWeightFour() {
arr4 = arr4.reduce(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);