ES7 中的 Map 和 Set 数据结构详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，新增了两个重要的数据结构：Map 和 Set。它们在前端开发中的应用非常广泛。本文将详细介绍 Map 和 Set 的用法和特性。

1. Map 数据结构

Map 是一种键值对的集合。其中的键和值都可以是任意类型的值（包括对象、基础类型、函数）。Map 与对象最大的区别在于，Map 中的键可以是任意类型的，而对象的键只能是字符串或 Symbol。

1.1 创建 Map

Map 可以使用 Map 构造函数来创建：

const map = new Map()

Map 构造函数也可以接受一个数组作为参数，该数组的元素也必须是键值对的形式：

const map = new Map([
  ['name', 'Tom'],
  ['age', 18]
])

1.2 Map 的方法

Map 提供了一系列的方法用于添加、删除、修改和查询元素：

set(key, value)：向 Map 中添加一个键值对。
get(key)：获取 Map 中指定键的值。
has(key)：判断 Map 中是否有指定的键。
delete(key)：删除 Map 中指定的键值对。
clear()：清空 Map 中的所有键值对。
keys()：返回 Map 中所有的键。
values()：返回 Map 中所有的值。
entries()：返回 Map 中所有键值对的数组。

示例代码：

// javascriptcn.com 代码示例
const map = new Map([
  ['name', 'Tom'],
  ['age', 18]
])

// set
map.set('gender', 'male')

// get
console.log(map.get('name')) // Tom

// has
console.log(map.has('gender')) // true

// delete
map.delete('age')

// clear
map.clear()

// keys
console.log(map.keys()) // MapIterator {'name', 'gender'}

// values
console.log(map.values()) // MapIterator {'Tom', 'male'}

// entries
console.log(map.entries()) // MapIterator {'name' => 'Tom', 'gender' => 'male'}

1.3 Map 的遍历

Map 的遍历方式与数组类似，可以使用 for...of 进行遍历。而且，Map 遍历时会按照键值对的添加顺序进行遍历。

// javascriptcn.com 代码示例
const map = new Map([
  ['name', 'Tom'],
  ['age', 18],
  ['gender', 'male']
])

for (const [key, value] of map) {
  console.log(`${key}: ${value}`)
}
// name: Tom
// age: 18
// gender: male

还可以使用 forEach 方法进行遍历：

// javascriptcn.com 代码示例
const map = new Map([
  ['name', 'Tom'],
  ['age', 18],
  ['gender', 'male']
])

map.forEach((value, key) => {
  console.log(`${key}: ${value}`)
})
// name: Tom
// age: 18
// gender: male

2. Set 数据结构

Set 是一种无序、不重复的元素集合。和数组不同，Set 中的元素是唯一的，不存在重复的元素。在实践中，Set 常用于数组去重。

2.1 创建 Set

Set 可以使用 Set 构造函数来创建：

const set = new Set()

Set 构造函数也可以接受一个数组作为参数，该数组的元素为 Set 对象中的元素：

const set = new Set([1, 2, 3, 4, 5])

2.2 Set 的方法

Set 提供了一系列的方法用于添加、删除和查询元素：

add(value)：向 Set 中添加一个元素。
has(value)：判断 Set 中是否包含指定元素。
delete(value)：从 Set 中删除指定元素。
clear()：删除 Set 中所有的元素。
keys()：返回 Set 中所有的元素。

示例代码：

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

// add
set.add(6)

// has
console.log(set.has(3)) // true

// delete
set.delete(4)

// clear
set.clear()

// keys
console.log(set.keys()) // SetIterator {1, 2, 3, 5, 6}

2.3 Set 的遍历

Set 的遍历方式与数组类似，可以使用 for...of 进行遍历。而且，Set 遍历时会按照添加顺序进行遍历。

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

for (const value of set) {
  console.log(value)
}
// 1
// 2
// 3
// 4
// 5

还可以使用 forEach 方法进行遍历：

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

set.forEach(value => {
  console.log(value)
})
// 1 
// 2 
// 3 
// 4 
// 5

3. 总结

Map 和 Set 是两种非常实用的数据结构。Map 可以用于存储键值对，而 Set 可以用于存储不重复的元素。它们的用法非常灵活，可以帮助我们更好地完成前端开发任务。在实践中，我们应该结合具体的业务场景选用合适的数据结构。

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