JavaScript ES6 Sets 对象详解:创建、方法与遍历

作者:青柠时间:2026-10-22 06:02:22浏览:145

本文详细介绍 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); // 0

Sets 初始化与解构

初始化方式

另一示例展示通过数组初始化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/

作者最新文章