ES6（4）— Map与Set

扫码关注公众号，获取更多内容

目录

一、Map

1、Map创建、赋值、获取

2、Map的迭代

3、Map的对象操作

二、Set

1、唯一性、多样性

2、类型转换

3、Set对象的作用

---

一、Map

1、Map创建、赋值、获取

 let map = new Map();

 // key是字符串
 map.set('stringKey', '这是和stringKey关联的值');
 console.log(map.get('stringKey')) // 输出 这是和stringKey关联的值


 // key是对象
 let keyObj = {}
 map.set(keyObj, '这是和keyObj关联的值')
 console.log(map.get(keyObj)) // 输出 这是和keyObj关联的值
 console.log(map.get({}))     // 输出undefined，因为keyObj !== {}


 // key是函数
 let fun = function () {}
 map.set(fun, '这是和fun(函数)关联的值')
 console.log(map.get(fun))    // 输出 这是和fun(函数)关联的值
 console.log(function () {})  // 输出undefined，因为fnu !== function () {}


 // key是NaN
 map.set(NaN, '这是和NaN关联的值')
 console.log(map.get(NaN))
 // 输出 这是和NaN关联的值,即使NaN!==NaN，但是NaN作为Map的key没区别

2、Map的迭代

（1）for...of

let map2 = new Map();
map2.set(1, 'one')
map2.set(2, 'two')

// 输出  1:one  2:two
for (let [key, value] of map2) {
    console.log(`${key}:${value}`)
}

// entries方法返回一个新的Iterator对象。
// 它按插入顺序包含了Map对象中每个元素的[key,value]数组。
for (let [key, value] of map2.entries()) {
    console.log(`${key}:${value}`)
}

// 将会显示两个log，一个是1，一个是2
// keys方法返回一个新的Iterator对象，它按顺序包含了Map对象中每个元素的key
for (let key of map2.keys()) {
    console.log(key)
}

// 将会显示两个log，一个是 one，一个是two
// values方法返回一个新的Iterator对象，它按插入顺序包含了Map对象中的每个元素的值
for (let value of map2.values()) {
    console.log(value)
}

// 显示两个log，一个是1:one，另一个是2:two
map2.forEach((value,key)=>{
     console.log(`${key}:${value}`)
})

3、Map的对象操作

（1）Map与Array的转换

 let array = [[1, 'one'], [2, 'two']]
 // Map的构造函数可以将一个二维键值对数组转换成一个Map对象
 let map3 = new Map(array)
 // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
 let array2 = Array.from(map3)

（2）Map的克隆

 let map5 = new Map([[1, 'one'], [2, 'two']])
 let map6 = new Map(map5)

 console.log(map5 === map6)
 // 输出 false，map6与map5“内容相同”，
 // 但Map对象构造函数生成实例，迭代出新对象，所以输出false

（3）Map的合并

let first = new Map([[1, 'one'], [2, 'two'], [3, 'three']])
let second = new Map([[1, 'ONE'], [2, 'TWO']])

let merged = new Map([...first, ...second])
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的。
console.log(merged) // 输出 ONE，TWO， three

 

二、Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

• +0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
• undefined 与 undefined 是恒等的，所以不重复；
• NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

1、唯一性、多样性

let set = new Set()
set.add(1)
set.add(2)
set.add(3)
set.add(3)

console.log(set) // 输出Set(3){1,2,3}
// 因为set中的值具有唯一性，所以只会出现一个3

set.add(true)
set.add('Tom')
console.log(set) //输出Set(5){1,2,3，true,"Tom"}
// 体现了set的多样性

let obj = {a: 1, b: 1}
set.add(obj)
set.add({a: 1, b: 1})
console.log(set) // 输出Set(7){1,2,3，true,"Tom"，{a: 1, b: 1}，{a: 1, b: 1}}
// 这里体现了对象之间引用不同不恒等，即使值相同，Set 也能存储

2、类型转换

// Array转Set
let set1 = new Set([1, 2, 3])
//set 转 Array
let array1 = [...set1]

// String转Set
let set2 = new Set('eueh') // 输出 Set(4){"e","u","e","h"}

3、Set对象的作用

// 数组去重
let array3 = [1, 2, 3, 4, 5, 4]
let set3 = new Set(array3)
let arrOut = [...set3]
console.log(arrOut) // 输出[1,2,3,4,5]

// 并集
let a = new Set([1, 2, 3])
let b = new Set([3, 4, 5])
console.log(new Set([...a, ...b])) //输出{1,2,3,4}

// 交集
let c = new Set([1, 2, 3])
let d = new Set([2, 3, 4])
// [...c]是将Set c 装换为数组，filter是数组的过滤方法
// filter中的意思是：返回c与d的交集（c中的元素在d中也存在）
let intersect = new Set([...c].filter(item => d.has(item)))
console.log(intersect) // 输出 {2,3}

// 差集
let e = new Set([1, 2, 3])
let f = new Set([3, 4, 5])
let difference = new Set([...e].filter(item => !f.has(item))
            .concat([...f].filter(item => !e.has(item))))
console.log(difference) // 输出{1,2,4,5}