轻松掌握ES6中集合Set的用法

前言

Set 是 ES6 中新的对象类型，用来创建一个唯一值的集合

Set 中的值可以是简单的基本类型，例如字符串、数字，也可以是复杂的类型，例如数组、对象

基本用法

例如 add, size, has, forEach, delete, clear

let animals = new Set();

animals.add('?');
animals.add('?');
animals.add('?');
animals.add('?');
console.log(animals.size); // 4
animals.add('?');
console.log(animals.size); // 4

console.log(animals.has('?')); // true
animals.delete('?');
console.log(animals.has('?')); // false

animals.forEach(animal => {
  console.log(`Hey ${animal}!`);
});

// Hey ?!
// Hey ?!
// Hey ?!

animals.clear();
console.log(animals.size); // 0

数组、对象

let myAnimals = new Set(['?', '?', '?', '?']);

myAnimals.add(['?', '?']);
myAnimals.add({ name: 'Rud', type: '?' });
console.log(myAnimals.size); // 4

myAnimals.forEach(animal => {
  console.log(animal);
});


// ?
// ?
// ["?", "?"]
// Object { name: "Rud", type: "?" }

注意，数组作为构造参数传递进去时会被set解构，相当于把数组中的每一项 add 到 set 中，但使用 add 方法向 set 中添加数组时，整个数组是作为一个元素

字符串作为构造参数

console.log('Only unique characters will be in this set.'.length); // 43

let sentence = new Set('Only unique characters will be in this set.');
console.log(sentence.size); // 18

字符串是可以被迭代的，所以作为构造参数时类似数组，字符串会被拆成单个字符 add 到 set 中

for…of

之前是使用 foreach 遍历 set，也可以使用 for…of迭代

let moreAnimals = new Set(['?', '?', '?', '?']);

for (let animal of moreAnimals) {
  console.log(`Howdy ${ animal }`);
}

// Howdy ?
// Howdy ?
// Howdy ?
// Howdy ?

Keys、Values

set 有 Keys 和 Values 方法，但他们的作用是一样的，keys 只是 values 的别名

调用 Keys 和 Values 后会得到一个迭代器，有 next方法

let partyItems = new Set(['?', '?', '?']);
let items = partyItems.values();

console.log(items.next());
console.log(items.next());
console.log(items.next());
console.log(items.next().done);

// Object {
//   done: false,
//   value: "?"
// }

// Object {
//   done: false,
//   value: "?"
// }

// Object {
//   done: false,
//   value: "?"
// }

// true