ES6 中 Map 和 Set 的高级用法

在 ES6 中，Map 和 Set 是两个重要的数据结构。它们的高级用法可以让前端开发变得更加高效和便捷。本文将为大家介绍 Map 和 Set 的高级用法，帮助大家更好地理解和掌握这两个数据结构。

Map 的高级用法

1. Map 的迭代

Map 提供了四种迭代器。分别是：keys()、values()、entries() 和 forEach()，它们都可以用来遍历 Map 对象。

const myMap = new Map();
myMap.set('a', 'alpha');
myMap.set('b', 'beta');
myMap.set('g', 'gamma');

// 通过 for-of 遍历
for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const item of myMap.entries()) {
  console.log(item[0], item[1]);
}

// 通过 forEach 遍历
myMap.forEach((value, key, map) => {
  console.log(value, key, map);
});

2. Map 的默认值

当 get() 方法从一个不存在的 key 中取值时，返回的是 undefined。但是，如果我们想要一个默认值来代替 undefined，可以给 Map 构造函数的参数传一个函数。

function getDefault() {
  return 'default value';
}
const myMap = new Map([[1, 'one'], [2, 'two']]);
const notExists = 5;
const val = myMap.get(notExists) || getDefault();
console.log(val); // 'default value'

还可以使用 get() 的第二个参数来设置默认值。

const myMap = new Map([[1, 'one'], [2, 'two']]);
const notExists = 5;
const val = myMap.get(notExists, 'default value');
console.log(val); // 'default value'

3. Map 中嵌套 Map

Map 对象中的值可以是任何数据类型。所以我们可以使用另一个 Map 作为值来嵌套 Map 对象。

const parentMap = new Map();
const childMap = new Map();
childMap.set('a', 'alpha');
childMap.set('b', 'beta');
childMap.set('g', 'gamma');
parentMap.set('childMap', childMap);

console.log(parentMap.get('childMap').get('a')); // 'alpha'

Set 的高级用法

1. Set 的迭代

和 Map 一样，Set 也有四个迭代器，分别是：keys()、values()、entries() 和 forEach()。它们也可以用来遍历 Set 对象。

const mySet = new Set(['a', 'b', 'g']);

for (const value of mySet.keys()) {
  console.log(value);
}

for (const value of mySet.values()) {
  console.log(value);
}

for (const [key, value] of mySet.entries()) {
  console.log(key, value);
}

mySet.forEach((value, key, set) => {
  console.log(value, key, set);
});

2. Set 的数组操作

Set 可以用来处理数组操作。比如，取交集、并集和差集。

const a = new Set([1, 2, 3]);
const b = new Set([4, 3, 2]);

// 交集
const intersection = new Set([...a].filter(x => b.has(x)));
console.log(intersection); // Set { 2, 3 }

// 并集
const union = new Set([...a, ...b]);
console.log(union); // Set { 1, 2, 3, 4 }

// 差集
const difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference); // Set { 1 }

3. Set 的链式操作

Set 对象的操作可以链式调用，这样可以让代码更加清晰。

const mySet = new Set([1, 2, 3])
  .add(4)
  .delete(1)
  .clear()
  .add(5);

console.log(mySet); // Set { 4, 5 }

总结

Map 和 Set 是 ES6 中两个十分重要的数据结构。它们的高级用法可以让开发者更加高效地处理数据。本文介绍了 Map 和 Set 的多种高级用法，包括迭代、默认值、嵌套、数组操作和链式操作。相信读完该文章，大家对 Map 和 Set 的理解会更深入和进阶。

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