[广告：最高 ¥2000 红包]阿里云服务器、主机等产品通用，可叠加官网常规优惠使用 | 限时领取

原文：How to Remove Array Duplicates in ES6 | SamanthaMing.com

本文提供三种方法对简单数组去重，其中本人最喜欢set方法，因其简单代码量小。

const array = ['🐑', 1,  2, '🐑','🐑', 3];

// 1: "Set"
[...new Set(array)];

// 2: "Filter"
array.filter((item, index) => array.indexOf(item) === index);

// 3: "Reduce"
array.reduce((unique, item) => 
  unique.includes(item) ? unique : [...unique, item], []);


// RESULT:
// ['🐑', 1, 2, 3];

Set

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

PS:集合(set)在任何语言中表现都是一样的。

集合是指具有某种特定性质的具体的或抽象的对象汇总而成的集体。

集合具有互异性: 一个集合中，任何两个元素都认为是不相同的，即每个元素只能出现一次。

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

使用Set时，有两个步骤：

1. 首先，我们Set通过传递数组来创建一个新数组。因为Set仅允许唯一值，所以将删除所有重复项。
2. 现在重复项不见了，我们将使用散布运算符将其转换回数组 ...

const array = ['🐑', 1,  2, '🐑','🐑', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐑', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐑', 1, 2, 3]

另外，您也可以使用Array.from将转换Set为数组：

const array = ['🐑', 1,  2, '🐑','🐑', 3];

Array.from(new Set(array));

// ['🐑', 1, 2, 3]

Filter

为了理解此方式，我们可以需要了解indexOf和filter这两种方法。

indexOf

indexOf方法返回从数组中找到的所提供元素的第一个索引。

const array = ['🐑', 1,  2, '🐑','🐑', 3];

array.indexOf('🐑'); // 0
array.indexOf(1); // 1
array.indexOf(2); // 2
array.indexOf(3); // 5

该filter()方法创建一个新的元素数组，这些数组可以通过我们提供的条件。换句话说，如果元素通过并返回true，它将被包含在过滤后的数组中。并且任何失败或返回的元素false都将不在过滤后的数组中。

所以filter的最终实现代码是：

const array = ['🐑', 1,  2, '🐑','🐑', 3];

array.filter((item, index) => array.indexOf(item) !== index);

// ['🐑','🐑']

Reduce

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

在这种情况下，我们的reducer函数将检查最终数组是否包含该项。如果没有，则将该项目推入我们的最终数组。否则，跳过该元素并按原样返回我们的最终数组（基本上跳过该元素）。

const array = ['🐑', 1,  2, '🐑','🐑', 3];

array.reduce((unique, item) => {
  console.log(
    // a. Item
    item,
    // b. Final Array (Accumulator)
    unique,
    // c. Condition (Remember it only get pushed if this returns `false`)
    unique.includes(item),
    // d. Reducer Function Result
    unique.includes(item) ? unique : [...unique, item],
  );
  
  return unique.includes(item) ? unique : [...unique, item]
}, []); // 👈 The initial value of our Accumulator is an empty array 

// RESULT:
// ['🐑', 1, 2, 3];