JS-什么时候用Map?

·  阅读 3094

Map是什么?

在我看来,Map类似一个高配版的Object。

Map: image.png

Object: image.png

Map的特点?

  • Map默认情况下不包含任何键,所有键都是开发人员添加进去的。不像Object原型链上有一些默认的键。
  • Map的键可以是任意类型数据,就连函数都可以。Object的键只能是String或Symbol。
  • Map的键值对个数可以轻易通过size属性获取,Object需要手动计算。
  • Map在频繁增删键值对的场景下性能要比Object好。

什么时候用Map?

  1. 要添加的键值名和Object上的默认键值名冲突,又不想改名时,可以换用Map。
  2. 需要String和Symbol以外的数据类型做键值时,用Map。
  3. 键值对很多,有需要计算数量时,用Map。
  4. 需要频繁增删键值对时,用Map。

Map语法?

新建:

let map=new Map();

增:

逐个增:map.set('键名1','键值1');map.set('键名2','键值2');map.set('键名3','键值3');map.set('键名4','键值4');

批量增:二维键值数组转Map

let kvArray = [["key1", "value1"], ["key2", "value2"]];
let myMap = new Map(kvArray);

复制代码

删:

移除Map对象的所有键/值对 :myMap.clear() 删除某一个键值对:map.delete('键名4')

改:

map.set('键名1','更改后键值1')(同键名会自动替换)

查:

按键名查键值:map.get('键名1'); // '更改后键值1'

检查是否包含某键名对应的值:map.has('键名1') // true map.has('键名12') // false

查所有键名:map.keys();// MapIterator {"键名1", "键名2", "键名3"} 返回一个新的 Iterator对象, 它按插入顺序包含了Map对象中每个元素的键 。

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1.keys();

console.log(iterator1.next().value);
// expected output: "0"

console.log(iterator1.next().value);
// expected output: 1
复制代码

查所有键值:map.values();//MapIterator {"更改后键值1", "键值2", "键值3"}

使用 for..of 方法迭代 Map:

for (let [key, value] of map) {
  console.log(key + " = " + value);
}
/*输出:
键名1 = 更改后键值1
键名2 = 键值2
键名3 = 键值3*/

for (let key of map.keys()) {
  console.log(key);
}
/* 输出:
键名1
键名2
键名3
*/
复制代码

使用 forEach() 方法迭代 Map:

// 注意:这里不是写错了,参数就是 键值在前,键名在后
map.forEach(function(value, key) {
  console.log(key + " = " + value);
})
/*输出:
键名1 = 更改后键值1
键名2 = 键值2
键名3 = 键值3*/
复制代码

Map转为数组

// 方法1
Array.from(map);
/*
[ ["键名1", "更改后键值1"],
["键名2", "键值2"],
["键名3", "键值3"]]
*/

// 方法2
[...map]
/*
[ ["键名1", "更改后键值1"],
["键名2", "键值2"],
["键名3", "键值3"]]
*/

复制代码

Map合并

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

let second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);

// 合并两个Map对象时,如果有重复的键值,则后面的会覆盖前面的。
// 展开运算符本质上是将Map对象转换成数组。
let merged = new Map([...first, ...second]);

console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
复制代码

Map对象也能与数组合并:

// Map对象同数组进行合并时,如果有重复的键值,则后面的会覆盖前面的。
let merged = new Map([...first, ...second, [1, 'eins']]);
console.log(merged.get(1)); // eins
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改