ES6 中的 Map 和 Set 数据结构的常用方法
在 ES6 (ECMAScript 2015)中,Map 和 Set 数据结构被正式加入到 JavaScript 语言标准中。Map 是一种可存储键值对的集合,其中的键和值可以是任何类型的数据,而且键是唯一的。Set 则是一种类似于数组的集合,其中的元素也是唯一的,不能有重复。这两种数据结构在前端开发中非常常见,因此掌握它们的常用方法,对于 JavaScript 开发者来说非常重要。
一、Map 数据结构的常用方法
- 赋值
使用 set() 方法可以将键值对添加到 Map 中,这个方法可以链式调用。
const map = new Map() map.set('a', 1).set('b', 2).set('c', 3) console.log(map) // Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }
- 取值
使用 get() 方法可以获取 Map 中指定键所对应的值,如果键不存在,则返回 undefined。
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) console.log(map.get('a')) // 1 console.log(map.get('d')) // undefined
- 删除
使用 delete() 方法可以删除 Map 中指定键所对应的键值对,如果删除成功,则返回 true,否则返回 false。
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) console.log(map.delete('a')) // true console.log(map.delete('d')) // false
- 判断键是否存在
使用 has() 方法可以判断 Map 中是否存在指定的键,如果存在,则返回 true,否则返回 false。
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) console.log(map.has('a')) // true console.log(map.has('d')) // false
- 遍历
Map 数据结构支持多种遍历方式,包括 for...of 循环、forEach() 方法、keys() 方法、values() 方法和 entries() 方法。
(1)使用 for...of 循环遍历
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) for (const [key, value] of map) { console.log(key, value) } // a 1 // b 2 // c 3
(2)使用 forEach() 方法遍历
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) map.forEach(function(value, key) { console.log(key, value) }) // a 1 // b 2 // c 3
(3)使用 keys() 方法遍历键
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) for (const key of map.keys()) { console.log(key) } // a // b // c
(4)使用 values() 方法遍历值
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) for (const value of map.values()) { console.log(value) } // 1 // 2 // 3
(5)使用 entries() 方法遍历键值对
const map = new Map([['a', 1], ['b', 2], ['c', 3]]) for (const [key, value] of map.entries()) { console.log(key, value) } // a 1 // b 2 // c 3
二、Set 数据结构的常用方法
- 赋值
使用 add() 方法可以将元素添加到 Set 中,这个方法可以链式调用。
const set = new Set() set.add('a').add('b').add('c') console.log(set) // Set(3) { 'a', 'b', 'c' }
- 删除
使用 delete() 方法可以删除 Set 中指定的元素,如果删除成功,则返回 true,否则返回 false。
const set = new Set(['a', 'b', 'c']) console.log(set.delete('a')) // true console.log(set.delete('d')) // false
- 判断元素是否存在
使用 has() 方法可以判断 Set 中是否存在指定的元素,如果存在,则返回 true,否则返回 false。
const set = new Set(['a', 'b', 'c']) console.log(set.has('a')) // true console.log(set.has('d')) // false
- 遍历
Set 数据结构也支持多种遍历方式,包括 for...of 循环、forEach() 方法、keys() 方法、values() 方法和 entries() 方法。
(1)使用 for...of 循环遍历
const set = new Set(['a', 'b', 'c']) for (const value of set) { console.log(value) } // a // b // c
(2)使用 forEach() 方法遍历
const set = new Set(['a', 'b', 'c']) set.forEach(function(value) { console.log(value) }) // a // b // c
(3)使用 keys() 方法遍历元素
const set = new Set(['a', 'b', 'c']) for (const value of set.keys()) { console.log(value) } // a // b // c
(4)使用 values() 方法遍历元素
const set = new Set(['a', 'b', 'c']) for (const value of set.values()) { console.log(value) } // a // b // c
(5)使用 entries() 方法遍历元素,等同于 values() 方法
const set = new Set(['a', 'b', 'c']) for (const value of set.entries()) { console.log(value) } // [ 'a', 'a' ] // [ 'b', 'b' ] // [ 'c', 'c' ]
总结
通过本文的介绍,我们了解了 ES6 中 Map 和 Set 数据结构的常用方法,并学习了如何利用这些方法来处理键值对集合和元素集合。作为前端开发者,掌握这些方法对于我们日常的开发工作来说是非常有帮助的,希望本文能为大家提供一些实用的技术指导。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/649d7fa848841e9894a3d4e8