数组对象如何去重

好久没更新博客，因为自从跳槽到现在的公司一直很忙，最关键技术栈竟然变成了jquery + bootstrap！！！很多代码封装无力，做了很多重复的活！！！
好了，不吐槽了，转到今天的主题，如何给数组对象去重,举个栗子:

[
	{name:'test',age:12},
	{name:'test1',age:13},
	{name:'test2',age:14},
	{name:'test',age:12}
]
// 需要将上面的数组对象去重

0、利用Lodash中的uniqWith方法去重

Lodash是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。

let arr = [
	{ name: 'test', age: 12 },
	{ name: 'test1', age: 13 },
	{ name: 'test2', age: 14 },
	{ name: 'test2', age: 15 },
	{ name: 'test', age: 12 }
];
console.log(arr);

console.log(_.uniqWith(arr, _.isEqual));//[{ name: 'test', age: 12 },{ name: 'test1', age: 13 },{ name: 'test2', age: 14 },{ name: 'test2', age: 15 }];

1、for循环去重

这个应该是最基础的，也是很多人最先想到的给数组对象去重的方法

let arr = [
	{ name: 'test', age: 12 },
	{ name: 'test1', age: 13 },
	{ name: 'test2', age: 14 },
	{ name: 'test2', age: 15 },
	{ name: 'test', age: 12 }
];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
	let tag = true;
	for (let j = 0; j < newArr.length; j++) {
		if (arr[i].name == newArr[j].name && arr[i].age == newArr[j].age) {
			tag = false;
		}
	}
	if (tag) {
		newArr.push(arr[i]);
	}
}
console.log(newArr); // [{ name: 'test', age: 12 },{ name: 'test1', age: 13 },{ name: 'test2', age: 14 },{ name: 'test2', age: 15 }];

2、利用JSON.stringify这个方法来字符串化数组里面的值，从而比较字符串来实现去重

经过测试发现JSON.stringify后的{ name: 'test', age: 12 },{ age: 12, name: 'test' }值虽然不同，但显然他们是一样的对象，所以这个方法有bug，慎用！！！

let arr = [
	{ name: 'test', age: 12 },
	{ name: 'test1', age: 13 },
	{ name: 'test2', age: 14 },
	{ name: 'test2', age: 15 },
	{ name: 'test', age: 12 }
];
let reduceRepeat = (arr) => {
	let newArr = [];
	arr.forEach(item => {
		newArr[JSON.stringify(item)] = item;
	});
	arr = Object.keys(newArr).map(item => {
		return JSON.parse(item);
	})
	return arr;
};
reduceRepeat(arr);// [{ name: 'test', age: 12 },{ name: 'test1', age: 13 },{ name: 'test2', age: 14 },{ name: 'test2', age: 15 }];

3、 利用reduce去重

const arr = [
	{ label: 'All', value: 'All' },
	{ label: 'All', value: 'All' },
	{ label: 'Alex', value: 'Ninja' },
	{ label: 'Bill', value: 'Op' },
	{ label: 'Cill', value: 'iopop' }
]

var result = arr.reduce((unique, o) => {
	if (!unique.some(obj => obj.label === o.label && obj.value === o.value)) {
		unique.push(o);
	}
	return unique;
}, []);

console.log(result);

4、 利用filter

const arr = [
	{ label: 'All', value: 'All' },
	{ label: 'All', value: 'All' },
	{ label: 'Alex', value: 'Ninja' },
	{ label: 'Bill', value: 'Op' },
	{ label: 'Cill', value: 'iopop' }
]
const result = arr.filter((v, i, a) => a.findIndex(t => (t.label === v.label && t.value === v.value)) === i)

上面的代码太过精简，我们来分解一下

const arr = [
	{ label: 'All', value: 'All' },
	{ label: 'All', value: 'All' },
	{ label: 'Alex', value: 'Ninja' },
	{ label: 'Alex', value: 'Ninja' },
	{ label: 'Alex', value: 'Ninja1' },
	{ label: 'Bill', value: 'Op' },
	{ label: 'Cill', value: 'iopop' }
]
const result = arr.filter((v, i, a) => {
	// v为当前遍历到的对象
	// i为当前对象的索引
	// a为完整的arr数组
	let index = a.findIndex(t => {
		// findIndex()返回符合条件的对象的索引
		if (t.label === v.label && t.value === v.value) {
			return t;
		}
	})
	if (index === i) {
		return v;
	}
})