本文详细介绍 ES6 引入的 Sets 对象类型，用于存储唯一值。涵盖初始化方式（数组、字符串解构）、核心方法（add、has、delete、clear、forEach）以及 keys/values 和 for...of 遍历用法。通过代码示例展示原始值与复杂对象在 Set 中的行为差异，帮助开发者掌握集合的基本操作。
ES6 Sets 概述
概述
ECMAScript 6（简称ES6）作为JavaScript的后续标准，因于2015年发布，亦被命名为ECMAScript 2015。
Sets为ES6（ES2015）新增的对象类型，用于构建包含唯一值的集合。集合元素可涵盖字符串或整数等原始类型，亦可包含对象字面量或数组等复杂类型。
Sets 基本方法
基础操作
以下示例演示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); // 0Sets 初始化与解构
初始化方式
另一示例展示通过数组初始化Set的过程。需注意初始数组已被解构，而后续添加的数组将保持数组形态：
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：
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遍历 Sets
For...of循环遍历
除forEach外，for...of循环亦可用于遍历Set：
let moreAnimals = new Set(['🐺', '🐴', '🐕', '🐇']);
for (let animal of moreAnimals) {
console.log(`Howdy ${ animal }`);
}
// Howdy 🐺
// Howdy 🐴
// Howdy 🐕
// Howdy 🐇Keys 与 Values 方法
Keys与Values方法
Set提供keys和values方法，二者互为别名，功能一致。调用任一方法均返回新迭代对象，其值顺序与添加至集合时的顺序保持一致。
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结语
本文内容至此结束，旨在为读者学习或工作提供参考。如有疑问欢迎留言交流，感谢支持本站。
备注：
原文标题：Introduction to Sets in JavaScript
原作者：alligatorio
译者：smallbone
译文链接：https://alligator.io//js/sets-introduction/