ECMAScript 2017 中的 Set 和 Map-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2017 是 JavaScript 语言的最新标准版本，在这个版本中，添加了两个新的数据结构：Set 和 Map。

Set

Set 是一种无序且不重复的集合结构。集合中的元素可以是任意类型的对象。Set 相较于数组拥有更好性能，因为它内部使用了类似 Hash Table 的算法，支持常数级别的添加、查找和删除操作。

在 ES6 中，我们可以使用 new Set() 来创建一个空的 Set。

const set = new Set();

我们还可以使用一个可迭代对象来初始化一个 Set。

const set = new Set([1, 2, 3]);
console.log(set); // 输出 Set(3) {1, 2, 3}

我们可以使用 add() 方法向 Set 中添加新的元素。

const set = new Set();
set.add('foo');
set.add(1);
console.log(set); // 输出 Set(2) {'foo', 1}

需要注意的是，Set 中不允许添加重复的元素。

我们可以使用 delete() 方法来删除 Set 中指定的元素。

const set = new Set([1, 2, 3]);
set.delete(2);
console.log(set); // 输出 Set(2) {1, 3}

我们可以使用 has() 方法来检查 Set 中是否包含某个元素。

const set = new Set([1, 2, 3]);
console.log(set.has(2)); // 输出 true

我们可以使用 for...of 循环来遍历 Set 中的所有元素。

const set = new Set([1, 2, 3]);
for (const item of set) {
  console.log(item);
}
// 输出
// 1
// 2
// 3

我们可以使用 Array.from() 方法将 Set 转换为数组。

const set = new Set([1, 2, 3]);
const arr = Array.from(set);
console.log(arr); // 输出 [1, 2, 3]

反之，我们也可以使用 new Set() 将数组转换为 Set。

const arr = [1, 2, 3];
const set = new Set(arr);
console.log(set); // 输出 Set(3) {1, 2, 3}

Map 是一种键值对的映射结构。与 Object 一样，键可以是任意类型的对象。Map 相较于 Object 拥有更好性能，因为它内部使用了类似 Hash Table 的算法，支持常数级别的添加、查找和删除操作。

在 ES6 中，我们可以使用 new Map() 来创建一个空的 Map。

const map = new Map();

我们还可以使用一个可迭代对象来初始化一个 Map。

const map = new Map([['name', 'Tom'], ['age', 18]]);
console.log(map); // 输出 Map(2) { 'name' => 'Tom', 'age' => 18 }

我们可以使用 set() 方法向 Map 中添加新的键值对。

const map = new Map();
map.set('name', 'Tom');
map.set('age', 18);
console.log(map); // 输出 Map(2) { 'name' => 'Tom', 'age' => 18 }

如果添加的键已经存在，那么将会更新键对应的值。

const map = new Map();
map.set('name', 'Tom');
map.set('name', 'Jerry');
console.log(map); // 输出 Map(1) { 'name' => 'Jerry' }

我们可以使用 get() 方法获取 Map 中指定键的值。

const map = new Map([['name', 'Tom'], ['age', 18]]);
console.log(map.get('name')); // 输出 'Tom'

如果指定的键不存在，那么将会返回 undefined。

我们可以使用 delete() 方法来删除 Map 中指定的键值对。

const map = new Map([['name', 'Tom'], ['age', 18]]);
map.delete('age');
console.log(map); // 输出 Map(1) { 'name' => 'Tom' }

我们可以使用 has() 方法来检查 Map 中是否包含某个键。

const map = new Map([['name', 'Tom'], ['age', 18]]);
console.log(map.has('age')); // 输出 true

我们可以使用 for...of 循环来遍历 Map 中的所有键值对。

const map = new Map([['name', 'Tom'], ['age', 18]]);
for (const [key, value] of map) {
  console.log(key, value);
}
// 输出
// name Tom
// age 18

我们也可以使用 forEach() 方法来遍历 Map 中的所有键值对。

const map = new Map([['name', 'Tom'], ['age', 18]]);
map.forEach((value, key) => {
  console.log(key, value);
});
// 输出
// name Tom
// age 18

我们可以使用 Object.fromEntries() 将 Map 转换为对象。

const map = new Map([['name', 'Tom'], ['age', 18]]);
const obj = Object.fromEntries(map);
console.log(obj); // 输出 { name: 'Tom', age: 18 }

反之，我们也可以使用 new Map() 将对象转换为 Map。

const obj = { name: 'Tom', age: 18 };
const map = new Map(Object.entries(obj));
console.log(map); // 输出 Map(2) { 'name' => 'Tom', 'age' => 18 }

Set 和 Map 是 ECMAScript 2017 新增的两个数据结构，它们可以优化 JavaScript 中集合和映射的性能。这些新功能与其他新的 ES2015 和 ES2016 功能一起，为 JavaScript 语言带来了更多的灵活性和实用性。

我们可以使用 Set 和 Map 来无缝替换以前使用的数组和对象，以获得更好的性能和更好的代码可读性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64c32bf383d39b488171fb19