ECMAScript 2019: 如何使用 Map 和 Set-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2019: 如何使用 Map 和 Set

Map 和 Set 是 JavaScript 中的两个新数据结构，它们分别提供了一种键值对和一种无重复值的集合。这两个数据结构在 ES2015 中就已经被引入，而在 ES2019 中又有了一些新的特性和用法。

Map

Map 可以看作是一种更加灵活的 Object，它可以使用任意类型的值作为键，而不仅仅是字符串或 Symbol。Map 的键值对可以通过 set 方法添加，也可以通过构造函数初始化。Map 的 size 属性可以获取其键值对的数量。

// javascriptcn.com 代码示例
const map = new Map();
map.set('name', 'Jack');
map.set(1, 'one');
map.set(true, 'yes');
console.log(map.get('name')); // Jack
console.log(map.size); // 3

const map2 = new Map([
  ['name', 'Jack'],
  [1, 'one'],
  [true, 'yes']
]);
console.log(map2.get(1)); // one

Map 还有一些方便的方法：

has(key)：判断 Map 中是否存在指定键。
delete(key)：删除指定键的键值对。
clear()：清空 Map 中的所有键值对。

console.log(map.has('name')); // true
map.delete(true);
console.log(map.size); // 2
map.clear();
console.log(map.size); // 0

除了以上方法，Map 还有一个 forEach 方法，可以遍历其键值对并执行指定操作。forEach 的第一个参数是一个回调函数，该函数接受三个参数：键值对的值、键、Map 对象本身。

const map = new Map([
  ['name', 'Jack'],
  ['age', 25]
]);
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

Set

Set 是一种无重复值的集合，可以用来去重或者判断某个值是否存在。Set 的值可以通过 add 方法添加，也可以通过构造函数初始化。Set 的 size 属性可以获取其值的数量。

const set = new Set();
set.add('apple');
set.add('banana');
set.add('apple');
console.log(set.size); // 2

const set2 = new Set(['apple', 'banana', 'apple']);
console.log(set2.size); // 2

Set 还有一些方便的方法：

has(value)：判断 Set 中是否存在指定值。
delete(value)：删除指定值。
clear()：清空 Set 中的所有值。

console.log(set.has('apple')); // true
set.delete('banana');
console.log(set.size); // 1
set.clear();
console.log(set.size); // 0

除了以上方法，Set 还有一个 forEach 方法，可以遍历其值并执行指定操作。forEach 的第一个参数是一个回调函数，该函数接受三个参数：值、同样的值、Set 对象本身。

const set = new Set(['apple', 'banana']);
set.forEach((value, sameValue, set) => {
  console.log(value);
});

总结

Map 和 Set 是两个非常实用的数据结构，它们可以用来解决很多问题。例如，Map 可以用来存储对象之间的关系，Set 可以用来去重数组。在使用 Map 和 Set 时，请注意它们的特性和限制。例如，Map 的键可以是任意类型的值，但是在比较时会使用严格相等运算符（===）；Set 的值也可以是任意类型的值，但是 NaN 在 Set 中等于自身，而且 Set 中的值是不可变的。

希望本文可以帮助你更好地理解和使用 Map 和 Set。如果你有任何问题或建议，欢迎在评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6569995ad2f5e1655d22906d