前端面试系列JavaScript数据结构map和set

Javascript的Object本身就是键值对的数据结构&＃xff0c;但实际上属性和值构成的是”字符串-值“对&＃xff0c;属性只能是字符串&＃xff0c;如果传个对象字面量作为属性名&＃xff0c;那么会默认把对象转换成字符串&＃xff0c;结果这个属性名就变成”[object Object]“。

ES6提供了”值-值“对的数据结构&＃xff0c;键名不仅可以是字符串&＃xff0c;也可以是对象。它是一个更完善的Hash结构。

1.特性

1.1键值对&＃xff0c;键可以是对象。

const map1 &＃61; new Map()
const objkey &＃61; {p1: &＃39;v1&＃39;}map1.set(objkey, &＃39;hello&＃39;)
console.log(map1.get(objkey))
//hello


1.2.Map可以接受数组作为参数(批量插入)

数组成员还是一个数组&＃xff0c;其中有两个元素&＃xff0c;一个表示键一个表示值。
[key, value]

const map2 &＃61; new Map([[&＃39;name&＃39;, &＃39;Aissen&＃39;],[&＃39;age&＃39;, 12]
])
console.log(map2.get(&＃39;name&＃39;))
console.log(map2.get(&＃39;age&＃39;))
//Aissen
// 12


2.属性和方法

• size: 属性返回 Map 结构的成员总数

实例方法&＃xff08;基本上同Set&＃xff09;&＃xff1a;

• set(key, value): 返回的是当前的Map对象&＃xff0c;因此可以采用链式写法。
• get(key)&＃xff1a;读取key对应的键值&＃xff0c;如果找不到key&＃xff0c;返回undefined。
• has(key)
• delete(key)
• clear()

遍历方法
Map 结构原生提供三个遍历器生成函数和一个遍历方法。

• keys()&＃xff1a;返回键名的遍历器。
• values()&＃xff1a;返回键值的遍历器。
• entries()&＃xff1a;返回所有成员的遍历器。
• forEach()&＃xff1a;遍历 Map 的所有成员。

设置键值对&＃xff0c;键可以是各种类型&＃xff0c;包括undefined&＃xff0c;function。

const map4 &＃61; new Map();
map4.set(&＃39;k1&＃39;, 6) // 键是字符串
map4.set(222, &＃39;哈哈哈&＃39;) // 键是数值
map4.set(undefined, &＃39;gagaga&＃39;) // 键是 undefinedconst fun &＃61; function() {console.log(&＃39;hello&＃39;);}
map4.set(fun, &＃39;fun&＃39;) // 键是 functionconsole.log(&＃39;map4 size: %s&＃39;, map4.size)
//map4 size: 4
console.log(&＃39;undefined value: %s&＃39;, map4.get(undefined))
//undefined value: gagaga
console.log(&＃39;fun value: %s&＃39;, map4.get(fun))
//fun value: fun


链式调用

map4.set(&＃39;k2&＃39;, 2).set(&＃39;k3&＃39;, 4).set(&＃39;k4&＃39;, 5)
console.log(&＃39;map4 size: %s&＃39;, map4.size)//7


3.遍历

• map.keys() 遍历所有key

const map9 &＃61; new Map();map9.set(&＃39;k1&＃39;, 1);map9.set(&＃39;k2&＃39;, 2);map9.set(&＃39;k3&＃39;, 3);for (let key of map9.keys()) {console.log(key);}//k1 //k2 //k3


• map.values() 遍历所有值

• map.entries() 遍历所有键值对

for (let item of map9.entries()) {console.log(item[0], item[1]);}或者for (let [key, value] of map9.entries()) {console.log(key, value);}


• map.forEach() 遍历所有键值对

map9.forEach(function(value, key, map) {console.log("Key: %s, Value: %s", key, value);});


forEach有第二个参数&＃xff0c;可以用来绑定this。

这样有个好处&＃xff0c;map的存储的数据和业务处理对象可以分离&＃xff0c;业务处理对象可以尽可能的按职责分割的明确符合SRP原则。

const output &＃61; {log: function(key, value) {console.log("Key: %s, Value: %s", key, value);}};map9.forEach(function(value, key, map) {this.log(key, value);}, output);


4. 和其它结构的互转

• Map To Array (…map)

使用扩展运算符三个点&＃xff08;…&＃xff09;可将map内的元素都展开的数组。

const map10 &＃61; new Map();map10.set(&＃39;k1&＃39;, 1);map10.set(&＃39;k2&＃39;, 2);map10.set(&＃39;k3&＃39;, 3);console.log([...map10]);// [ [ &＃39;k1&＃39;, 1 ], [ &＃39;k2&＃39;, 2 ], [ &＃39;k3&＃39;, 3 ] ]


• Array To Map &＃xff08;new Map(arr)&＃xff09;

const map11 &＃61; new Map([[&＃39;name&＃39;, &＃39;Aissen&＃39;],[&＃39;age&＃39;, 12]])console.log(map11)//Map { &＃39;name&＃39; &＃61;> &＃39;Aissen&＃39;, &＃39;age&＃39; &＃61;> 12 }


• Map To Object &＃xff08;遍历map&＃xff09;
  写一个转换函数&＃xff0c;遍历map的所有元素&＃xff0c;将元素的键和值作为对象属性名和值写入Object中。

function mapToObj(map) {let obj &＃61; Object.create(null);for (let [k,v] of map) {obj[k] &＃61; v;}return obj;}const map12 &＃61; new Map().set(&＃39;k1&＃39;, 1).set({pa:1}, 2);console.log(mapToObj(map12))//{ k1: 1, &＃39;[object Object]&＃39;: 2 }


• Object To Map (遍历对象的属性)
  同理&＃xff0c;再写一个转换函数便利Object&＃xff0c;将属性名和值作为键值对写入Map。

function objToMap(obj) {let map &＃61; new Map();for (let k of Object.keys(obj)) {map.set(k, obj[k]);}return map;}console.log(objToMap({yes: true, no: false}))//Map { &＃39;yes&＃39; &＃61;> true, &＃39;no&＃39; &＃61;> false }


• Set To Map &＃xff08;new Map(set)&＃xff09;

const set &＃61; new Set([[&＃39;foo&＃39;, 1],[&＃39;bar&＃39;, 2]]);const map13 &＃61; new Map(set)console.log(map13)//Map { &＃39;foo&＃39; &＃61;> 1, &＃39;bar&＃39; &＃61;> 2 }


• Map To Set (遍历map)

function mapToSet(map) {let set &＃61; new Set()for (let [k,v] of map) {set.add([k, v])}return set;}const map14 &＃61; new Map().set(&＃39;k1&＃39;, 1).set({pa:1}, 2);console.log(mapToSet(map14))//Set { [ &＃39;k1&＃39;, 1 ], [ { pa: 1 }, 2 ] }

二、set

ES6 提供了新的数据结构 Set。

1.特性

似于数组&＃xff0c;但它的一大特性就是所有元素都是唯一的&＃xff0c;没有重复。

我们可以利用这一唯一特性进行数组的去重工作。

在向Set加入值时&＃xff0c;Set不会转换数据类型&＃xff0c;内部在判断元素是否存在时用的类似于精确等于(&＃61;&＃61;&＃61;)的方法&＃xff0c;“2”和2是不同的&＃xff0c;

NaN等于其自身。正常情况下不成立

let set8 &＃61; new Set()
set8.add(NaN)
set8.add(NaN)
set8.add(2)
set8.add("2")
console.log( set8)//{NaN, 2, "2"}


2.属性和方法

• Set 实例属性:

  • Set.prototype.constructor&＃xff1a;构造函数&＃xff0c;默认就是Set函数。
  • Set.prototype.size&＃xff1a;返回Set实例的成员总数。

• Set 实例方法:
  分为两大类&＃xff1a;操作方法&＃xff08;用于操作数据&＃xff09;&＃xff1a;

  • add(value)&＃xff1a;添加某个值&＃xff0c;返回 Set 结构本身。
  • delete(value)&＃xff1a;删除某个值&＃xff0c;返回一个布尔值&＃xff0c;表示删除是否成功。
  • has(value)&＃xff1a;返回一个布尔值&＃xff0c;表示该值是否为Set的成员。
  • clear()&＃xff1a;清除所有成员&＃xff0c;没有返回值。

遍历方法&＃xff08;用于遍历成员&＃xff09;
遍历操作&＃xff0c;Set 结构的实例有四个遍历方法&＃xff0c;可以用于遍历成员:

• • keys()&＃xff1a;返回键名的遍历器
  • values()&＃xff1a;返回键值的遍历器
  • entries()&＃xff1a;返回键值对的遍历器
  • forEach()&＃xff1a;使用回调函数遍历每个成员

3.遍历

用Set实例对象的keys()&＃xff0c;values()&＃xff0c;entries()方法进行遍历。

let set5 &＃61; new Set([4, 5, &＃39;hello&＃39;])
console.log(&＃39;iterate useing Set.keys()&＃39;)
for(let item of set5.keys()) {console.log(item)
}console.log(&＃39;iterate useing Set.values()&＃39;)
for(let item of set5.values()) {console.log(item)
}console.log(&＃39;iterate useing Set.entries()&＃39;)
for(let item of set5.entries()) {console.log(item[0],item[1])
}


用forEach()遍历

let set &＃61; new Set([1,2,3])
set.forEach(function(value) {console.log(value);
});


4.和其他结构互转

• Array转Set-new Set(arr)

let set2 &＃61; new Set([4,5,6])console.log(&＃39;array to set 1:&＃39;, set2)let set3 &＃61; new Set(new Array(7, 8, 9))//{ 4, 5, 6 }console.log(&＃39;array to set 2:&＃39;, set3)//{ 7, 8, 9 }


• Set 转Array

[...set] || Array.from(set)


5.应用

• 单一数组去重

let set6 &＃61; new Set([1, 2, 2, 3, 4, 3, 5])console.log([...set6]); //[1, 2, 3, 4, 5]console.log(Array.from(set6));//[1, 2, 3, 4, 5]


• 多数组的合并去重

let arr1 &＃61; [1, 2, 3, 4]let arr2 &＃61; [2, 3, 4, 5, 6]let set7 &＃61; new Set([...arr1, ...arr2])console.log(Array.from(set7));//[1, 2, 3, 4, 5, 6 ]


本文链接&＃xff1a;https://blog.csdn.net/qq_39903567/article/details/115210548