ES6 中的 Map 和 Set 数据结构详解

在 JavaScript 中，Map 和 Set 是两种常用的数据结构。它们在 ES6 中得到了进一步的加强和扩展，可以更方便地处理数据。本文将详细介绍 ES6 中 Map 和 Set 的使用方法和注意事项。

Map

Map 是一种键值对的集合，其中键和值可以是任意类型的数据。在 ES6 中，Map 的 API 得到了扩展，可以更方便地访问和修改其中的数据。

创建 Map

创建 Map 可以使用 new Map()，也可以使用一个数组作为参数。

const map1 = new Map();
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

基本操作

Map 的基本操作包括添加、删除、修改和查询。

// javascriptcn.com 代码示例
const map = new Map();

// 添加元素
map.set('key1', 'value1');
map.set('key2', 'value2');

// 删除元素
map.delete('key1');

// 修改元素
map.set('key2', 'new_value2');

// 查询元素
map.get('key2'); // 'new_value2'

遍历 Map

Map 提供了多种遍历方式，包括 keys()、values()、entries() 和 forEach()。

// javascriptcn.com 代码示例
const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

// 遍历 keys
for (let key of map.keys()) {
  console.log(key);
}

// 遍历 values
for (let value of map.values()) {
  console.log(value);
}

// 遍历 entries
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

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

Map 的应用

Map 可以用于处理一些复杂的数据结构，比如二维数组或对象。

// javascriptcn.com 代码示例
const data = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Charlie'}
];

const map = new Map(data.map(item => [item.id, item.name]));

console.log(map.get(1)); // 'Alice'

Set

Set 是一种无序的集合，其中每个元素只出现一次。在 ES6 中，Set 的 API 得到了扩展，可以更方便地访问和修改其中的数据。

创建 Set

创建 Set 可以使用 new Set()，也可以使用一个数组作为参数。

const set1 = new Set();
const set2 = new Set([1, 2, 3]);

基本操作

Set 的基本操作包括添加、删除和查询。

// javascriptcn.com 代码示例
const set = new Set();

// 添加元素
set.add(1);
set.add(2);

// 删除元素
set.delete(1);

// 查询元素
set.has(2); // true

遍历 Set

Set 提供了多种遍历方式，包括 keys()、values()、entries() 和 forEach()。

// javascriptcn.com 代码示例
const set = new Set([1, 2, 3]);

// 遍历 keys
for (let key of set.keys()) {
  console.log(key);
}

// 遍历 values
for (let value of set.values()) {
  console.log(value);
}

// 遍历 entries
for (let [key, value] of set.entries()) {
  console.log(key, value);
}

// 遍历 forEach
set.forEach(value => {
  console.log(value);
});

Set 的应用

Set 可以用于去重和数组的交集、并集、差集等操作。

// javascriptcn.com 代码示例
const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];

const set1 = new Set(arr1);
const set2 = new Set(arr2);

// 求交集
const intersection = new Set([...set1].filter(x => set2.has(x)));

// 求并集
const union = new Set([...set1, ...set2]);

// 求差集
const difference = new Set([...set1].filter(x => !set2.has(x)));

总结

Map 和 Set 是 ES6 中常用的数据结构，可以更方便地处理数据。在实际开发中，我们可以根据具体的需求选择使用哪种数据结构。同时，我们也需要注意 Map 和 Set 的性能和使用方法，以提高代码的效率和可读性。

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