es6 map与set

set

定义: Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用，Set对象是值的集合，你可以按照插入的顺序迭代它的元素。Set中的元素只会出现一次，即 Set 中的元素是唯一的

Set本身是一个构造函数，用来生成 Set 数据结构

语法：

let set = new Set([1, 1, 2, 2])
    console.log(...set)

属性：size     返回长度

console.log(new Set([1,2,1,2]).size) // 2 

操作方法：

1. add(value): 向集合中添加一个新的项
2.  delete(value): 从集合中删除一个值
3.  has(value): 如果值在集合中存在，返回ture, 否则返回false
4. clear(): 移除集合中的所有项 

 

let set = new Set()  
set.add(1)  
set.add(2)  
set.add(2)  
set.add(3)  
console.log(set) // {1,2,3}  
set.has(2) // true  
set.delete(2)    
set.has(2) // false  
set.clear()  

 

遍历方法

1.   keys(): 返回键名的遍历器
2.  values(): 返回键值的遍历器
3.  entries(): 返回键值对的遍历器
4.  forEach(): 使用回调函数遍历每个成员 

 

let set = new Set([1,2,3,4])  
// 由于set只有键值，没有键名，所以keys() values()行为完全一致  
console.log(Array.from(set.keys())) // [1,2,3,4]  
console.log(Array.from(set.values())) // [1,2,3,4]  
console.log(Array.from(set.entries())) //  [[1,1],[2,2],[3,3],[4,4]]  
set.forEach((item) => { console.log(item)}) // 1,2,3,4 

 

应用场景

 

// 数组去重  
let arr = [1, 1, 2, 3];  
let unique = [... new Set(arr)];  
let a = new Set([1, 2, 3]);  
let b = new Set([4, 3, 2]);    
// 并集  
let union = [...new Set([...a, ...b])]; // [1,2,3,4]  
// 交集  
let intersect = [...new Set([...a].filter(x => b.has(x)))]; [2,3]    
// 差集  
let difference = Array.from(new Set([...a].filter(x => !b.has(x)))); [1] 

 

 

map

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个  for...of 循环在每次迭代后会返回一个形式为[key，value]的数组

 

Map的使用场景

Map和Object很类似，但Map有一个比较特殊的应用场景。如果你在开发时不确定键值对里面的键的名称，那么你需要用Map。举例来说，你需要动态地从MongoDB里获取键值并显示给用户，但也许你并不关心这些键值的键名到底是什么，那么在这种情况下，你可以用Map，例如这样：

 

var myMap = new Map();var keyObj = {},
    keyFunc = function () { return 'hey'},
    keyString = "a string";

myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");console.log(myMap.get(keyFunc));

语法

let map = new Map()  
map.set('name', 'vuejs.cn');  
console.log(map.get('name')) 

属性  size: 返回 Map 结构的元素总数 

let map = new Map()  
map.set('name', 'vuejs.cn'); 
console.log(map.size) // 1  
console.log(new Map([['name','vue3js.cn'], ['age','18']]).size) // 2 

 

操作方法

• set(key, value): 向 Map 中加入或更新键值对
•  get(key): 读取 key 对用的值，如果没有，返回 undefined
•  has(key): 某个键是否在 Map 对象中，在返回 true 否则返回 false
•  delete(key): 删除某个键，返回 true, 如果删除失败返回 false
•  clear(): 删除所有元素 

 

let map = new Map()  
map.set('name','vue3js.cn')  
map.set('age','18') 
console.log(map) // Map {"name" => "vuejs.cn", "age" => "18"}  
map.get('name') // vue3js.cn   
map.has('name') // true  
map.delete('name')    
map.has(name) // false  
map.clear() // Map {}  

 

遍历方法

•  keys()：返回键名的遍历器
•  values()：返回键值的遍历器
•  entries()：返回所有成员的遍历器
•  forEach()：遍历 Map 的所有成员 

 

let map = new Map()  
map.set('name','vue3js.cn')  
map.set('age','18')   
console.log([...map.keys()])  // ["name", "age"]  
console.log([...map.values()])  // ["vue3js.cn", "18"]  
console.log([...map.entries()]) // [['name','vue3js.cn'], ['age','18']]  
// name vuejs.cn  
// age 18  
map.forEach((value, key) => { console.log(key, value)})  

 

类型的转换

•  Map 转为 Array

 

// 解构  
const map = new Map([[1, 1], [2, 2], [3, 3]])  
console.log([...map]) // [[1, 1], [2, 2], [3, 3]]  
// Array.from()  
const map = new Map([[1, 1], [2, 2], [3, 3]])  
console.log(Array.from(map)) // [[1, 1], [2, 2], [3, 3]] 

 

•  Array 转为 Map 

 

const map = new Map([[1, 1], [2, 2], [3, 3]])  
console.log(map) // Map {1 => 1, 2 => 2, 3 => 3} 

• Map 转为 Object 

 

// 非字符串键名会被转换为字符串  
function mapToObj(map) {  
    let obj = Object.create(null)  
    for (let [key, value] of map) {  
        obj[key] = value  
    }  
    return obj  
}  
const map = new Map().set('name', 'vue3js.cn').set('age', '18')  
mapToObj(map)  // {name: "vue3js.cn", age: "18"} 

 

• Object 转为 Map

let obj = {"a":1, "b":2};  
let map = new Map(Object.entries(obj))