ES6的Set与Map

本文介绍了ES6中新增的Set和Map数据结构,包括它们的特点、使用方法(如创建、操作、遍历和转换),以及在实际编程中的应用场景,如数组去重和集合操作。
摘要由CSDN通过智能技术生成

在ES6之前,我们存储数据的结构主要有两种:数组、对象,而在ES6中新增了另外两种数据结构:Set、Map。

一、什么是Set?

Set是ES6新增的数据结构,类似数组,但是它的元素成员是唯一的。

Set的使用,属性和方法
1. 创建Set

① new Set()方式创建

let a = new Set()

 ② 通过传入数组方式创建

let a = new Set([1, 2, 'akun'])
 2. Set.size:返回Set中元素的数量
let a = new Set([1, 2, 'akun'])

a.size // 3
3. Set.has(key):查找Set对象中是否存在key,返回一个布尔值
let a = new Set([1, 2, 'akun'])

a.has('akun') // true
 4. Set.add(key):往Set对象中添加一个元素
let a = new Set()

a.add(1)
5. Set.delete(key):删除元素key 
let a = new Set([1, 2, 'akun'])

a.delete("akun")
6. Set.clear(): 清空Set的全部元素 
let a = new Set([1, 2, 'akun'])

a.clear()
 7. 遍历 Set

① forEach 遍历 

let a = new Set([1, 2, 'akun'])

a.forEach(item => {
  console.log(item)
})

 ② for of 遍历

let a = new Set([1, 2, 'akun'])

for(let item of a) {
 console.log(item)
}
8. Set 转 数组 

① 使用 Array.from 方法 

let a = new Set([1, 2, 'akun'])

let arr = Array.from(a)

② 使用扩展运算符

let a = new Set([1, 2, 'akun'])

let arr = [...a]

Set的使用场景:如可以利用元素成员唯一性实现数组去重,方法has()判断是否有某个元素等等。 

代码的实现:

 // 数组去重
 let arr = [1, 1, 2, 3]
 let unique = [...new Set(arr)] // [1, 2, 3]
 

 let a = new Set([1, 2, 'akun'])
 let b = new Set([2, 3, 4])

 // 并集
 let union = [...new Set([...a, ...b])] // [1, 2, 'akun', 3, 4]

 // 交集
 let intersect = [...new Set([...a].filter(item => b.has(item)))] // [2]

 // 差集
 let difference = [
   ...new Set([...a].filter(item => !b.has(item))),
   ...new Set([...b].filter(item => !a.has(item))),
 ] //  [1, 'akun', 3, 4]

二、什么是Map?

Map是ES6新增的数据结构,类似于对象,本质上就是键值对的集合,对象的键只能是字符串或者Symbols,但Map的键可以为任意类型。

Map的使用,属性和方法 
1. 创建Map 

① new Map()方式创建 

let a = new Map()

② 通过传入二维数组方式创建 

let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
2. Map.size:返回Map对象中键值对数量 
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
a.size // 2
3. Map.has(key):查找Map对象中是否存在key,返回一个布尔值 
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
a.has('key1') // true
4. Map.set(key, value):设置Map对象的键值对(键名,键值),返回当前对象 
let a = new Map()
a.set(0, 'zero')
a.set('key1', 'value1')
 5. Map.get(key):返回key值对应的value,如果key不存在则返回undefined
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
a.get('key1') // value1
6. Map.delete(key):删除Map对象中键名为key的键值对 
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
a.delete("key1")
7. Map.clear():移除Map对象中保存的所有键名/键值对
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
a.clear()
 8. 遍历 Map

① forEach 遍历 

let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)

a.forEach((value, key) => {
  console.log(key, value)
})

 ② for of 遍历

let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)

for (let [key, value] of a) {
  console.log(key, value)
}
 9. Map.keys():返回一个新的Iterator对象,它包含按照顺序插入Map对象中每个元素的key值
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)

for (let key of a.keys()) {
  console.log(key)
}
 10. Map.values():返回一个新的Iterator对象,它包含按照顺序插入Map对象中每个元素的value值
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)

for (let value of a.values()) {
  console.log(value)
}
 11. Map.entries():该方法返回一个新的Iterator对象,它包含按顺序插入Map对象中每个[key, value]数组
let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)

for (let [key, value] of a.entries()) {
  console.log(key, value)
}
 12. Map 转 数组

① 使用 Array.from 方法

let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
let arr = Array.from(a)

② 使用扩展运算符

let kvArray = [
  ['key1', 'value1'],
  ['key2', 'value2'],
]

let a = new Map(kvArray)
let arr = [...a]

 Map的使用场景:不关心键值对的键名到底是什么,那么在这种情况下,可以用Map。

 三、总结

 1、Set:是一组Key的集合,但不存储Value,由于Key不能重复,因此他最大的特点是所有的元素都是唯一的;

2、Map:是键值对的集合,为JS带来了真正的键值存储机制;允许任何类型的键,具有极快的查找速度(存储键值较少的情况下)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值