三种方式实现数组去重

从数组中过滤掉重复项并仅返回唯一值的三种方法

	const arr = ['a', 1, 2, 'a', 3, 2, 'b'];
	
	// set
	const res1 = [...new Set(arr)];  //  [ 'a', 1, 2, 3, 'b' ]
	console.log(res1);
	console.log(arr);
	// filter
	const res2 = arr.filter((item, index) => arr.indexOf(item) === index);  //  [ 'a', 1, 2, 3, 'b' ]
	console.log(res2);
	console.log(arr);
	
	// reduce
	const res3 = arr.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []); //  [ 'a', 1, 2, 3, 'b' ]›
	console.log(res3);
	console.log(arr);

1.使用set

Set是ES6中引入的新数据对象。因为Set只允许您存储唯一值。传入数组时，它将删除任何重复的值。

使用set过滤数组共需要执行两步：

	const arr = ['a', 1, 2, 'a', 3, 2, 'b'];
    // 1: 创建set对象
    const setArr = new Set(arr);
    // 2L: 返回新的array
    const res = Array.from(setArr);  // [ 'a', 1, 2, 3, 'b' ]
    // es6写法	[...setArr]
    
    console.log(res); 

set的本质是一个key唯一的object-array

2. 使用filter

const arr = ['a', 1, 2, 'a', 3, 2, 'b'];

const res = arr.filter((item, index) => {
  console.log(
    // 1. item
    item,
    // 2. index 
    index,
    // 3. indexOf
    arr.indexOf(item),
    // 4. compare
    arr.indexOf(item) === index,
  );

  return arr.indexOf(item) === index;
})

通过indexOf判断索引值唯一的元素并返回。

3.使用reduce

reduce方法用于减少数组的元素，并根据您传递的某些reducer函数将它们组合成最终数组

const arr = ['a', 1, 2, 'a', 3, 2, 'b'];

const res = arr.reduce((unique, item) => {
  console.log(
    // 1. item
    item,
    // 2. unique 
    unique,
    // 3. includes
    unique.includes(item),
    // 4. compare
    unique.includes(item) ? unique: [...unique, item],
  );

  return unique.includes(item) ? unique: [...unique, item];
})

console.log(res);

代码运行效果：

1 'a' false [ 'a', 1 ]
2 [ 'a', 1 ] false [ 'a', 1, 2 ]
a [ 'a', 1, 2 ] true [ 'a', 1, 2 ]
3 [ 'a', 1, 2 ] false [ 'a', 1, 2, 3 ]
2 [ 'a', 1, 2, 3 ] true [ 'a', 1, 2, 3 ]
b [ 'a', 1, 2, 3 ] false [ 'a', 1, 2, 3, 'b' ]
[ 'a', 1, 2, 3, 'b' ]

reduce通过创建unique来存储返回的数组

参考资源

MDN JavaScript