ES6 Set和Map

348 阅读2分钟

Set

特性:

es6新增、数组去重、返回一个Set实例、入参是一个数组(new Set([1,2,3]))

属性:

  • size: 获取元素数量

方法:

  • add(value): 添加元素,返回Set实例本身
  • delete(value): 删除元素,返回删除结果(布尔值)
  • has(value): Set实例是否有此元素,返回查询结果
  • clear(): 清除所有元素,没有返回值
const setOb = new Set([1,2])

setOb.add(2).add(3)
console.log(setOb) // {1, 2, 3}

console.log(setOb.size) // 3
console.log(setOb.has(1)) // true
console.log(setOb.has(3)) // true
console.log(setOb.has(4)) // false

setOb.delete(2) 
console.log(setOb) // {1, 3}
console.log(setOb.has(2)) // false

setOb.clear()
console.log(setOb) // Set(0) {size: 0}

遍历Set实例

  • keys(): 返回键名的遍历器
  • values(): 返回键值的遍历器,Set中键值键名同值,因此keys()和values()返回结果一致
  • entries(): 返回键值对的遍历器
  • forEach(): 使用回调函数遍历每个元素
const setOb = new Set(['派大星','海绵宝宝', '章鱼哥'])
console.log(setOb.keys()) // SetIterator {'派大星', '海绵宝宝', '章鱼哥'}
for (let item of setOb.keys()) {
    console.log(item)
}
// 派大星
// 海绵宝宝
// 章鱼哥

console.log(setOb.values()) // SetIterator {'派大星', '海绵宝宝', '章鱼哥'}
for (let item of setOb.values()) {
    console.log(item)
}
// 派大星
// 海绵宝宝
// 章鱼哥

console.log(setOb.entries()) // SetIterator {'派大星' => '派大星', '海绵宝宝' => '海绵宝宝', '章鱼哥' => '章鱼哥'}
for (let item of setOb.entries()) {
    console.log(item)
}
// ['派大星', '派大星']
// ['海绵宝宝', '海绵宝宝']
// ['章鱼哥', '章鱼哥']

// 正常情况下forEach不能直接遍历对象
console.log(setOb) // Set(3) {'派大星', '海绵宝宝', '章鱼哥'}
setOb.forEach((value, key) => {
    console.log('key:' + key + ' value:' + value)
})
// key:派大星 value:派大星
// key:海绵宝宝 value:海绵宝宝
// key:章鱼哥 value:章鱼哥

Map

特性:

es6新增、返回一个初始化实例、参数可以是数组或其他可迭代对象(null会被当做undefine)

属性:

  • size: 获取元素数量

方法:

  • set(key, value): 设置元素key和value
  • get(key): 通过元素key获取元素value
  • has(key): 通过元素key判断元素是否存在
  • delete(key): 通过key删除对应元素
  • clear(): 清空所有元素
const map = new Map()
console.log(map) // Map(0) {size: 0}

map.set('pdx', '派大星')
console.log(map) // 
map.set('hmbb', '海绵宝宝')
console.log(map) // Map(1) {'pdx' => '派大星'}
console.log(map.size) // 2

console.log(map.get('pdx')) // 派大星
console.log(map.has('pdx')) // true
map.delete('pdx')
console.log(map.has('pdx')) // false

map.clear()
console.log(map) // Map(0) {size: 0}

遍历Map实例

  • keys(): 返回键名的遍历器
  • values(): 返回键值的遍历器
  • entries(): 返回所有元素的遍历器
  • forEach(): 使用回调函数遍历每个元素
const map = new Map([['pdx', '派大星'], ['hmbb', '海绵宝宝']])
console.log(map) // Map(2) {'pdx' => '派大星', 'hmbb' => '海绵宝宝'}

map.set('zyg', '章鱼哥')
console.log(map) // {'pdx' => '派大星', 'hmbb' => '海绵宝宝', 'zyg' => '章鱼哥'}
console.log(map.size) // 3

for (let key of map.keys()) {
    console.log(key)
}
// pdx
// hmbb
// zyg

for (let value of map.values()) {
    console.log(value)
}
// 派大星
// 海绵宝宝
// 章鱼哥

for (let item of map.entries()) {
    console.log(item[0], item[1])
}
// pdx 派大星
// hmbb 海绵宝宝
// zyg 章鱼哥

map.forEach((value, key) => {
    console.log(key, value)
})
// pdx 派大星
// hmbb 海绵宝宝
// zyg 章鱼哥