js的Map函数怎么使用

本文小编为大家详细介绍“js的Map函数怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“js的Map函数怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

Map是ES2015引入的Global Object，
Map对象中保存了键值对，且任何对象（包括原始值）都可以作为键或者值。

1. 构造函数

Map必须作为构造函数来使用，

new Map([iterable])

它的参数是可选的，如果提供的话，必须是一个iterable对象。
iterable对象的迭代结果为，[key1, value1], [key2, value2], ...。

例如

// 1. 数组是一个iterable对象
m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}

// 2. generator会返回一个iterable对象
gen = function*(){
  yield [1, 'a'];
  yield [2, 'b'];
}
iter = gen();
m = new Map(iter);    // Map(2) {1 => "a", 2 => "b"}

2. 实例属性

m.size用来获取key的个数，

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
m.size    // 2

3. 实例方法

（1）m.has(key)，判断key是否存在
（2）m.get(key)，取值，如果没有这个key就返回undefined（3）m.set(key, value)，设值，返回m（4）m.delete(key)，如果key存在且已经被删除了就返回true，如果key不存在就返回false。
（5）m.clear()，删除所有键值对

（6）m.keys()，返回一个iterable对象，其中包含了按插入顺序迭代的所有key

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.keys()]    // [1, 2]

（7）m.values()，返回一个iterable对象，其中包含了按插入顺序迭代的所有value

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.values()]    // ["a", "b"]

（8）m.entries()，返回一个iterable对象，每一个元素是[key, value]，遍历顺序按key的插入顺序

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
[...m.entries()]    // [[1, "a"], [2, "b"]]

注：更便捷的得到二维数组的方法是使用Array.from，它可以直接接受Map作为参数，

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
Array.from(m)    // [[1, "a"], [2, "b"]]

Array.from也可以接受iterable对象，

Array.from(m.keys())    // [1, 2]
Array.from(m.values())    // ["a", "b"]
Array.from(m.entries())    // [[1, "a"], [2, "b"]]

（9）m.forEach(fn[, thisArg])，用于对Map以key的插入顺序进行遍历

m = new Map([[1, 'a'], [2, 'b']]);    // Map(2) {1 => "a", 2 => "b"}
m.forEach((value, key)=>{
    value    // "a", "b"
    key      // 1, 2
});

注：第一个参数是value，第二个参数才是key。

除了使用m.forEach，Map还可以使用for ... of进行遍历，

m = new Map([[1, 'a'], [2, 'b']]);
for(i of m){
  i    // [1, 'a'], [2, 'b']
}

4. key的相等性判断

Map key的相等性判断，使用了所谓的“SameValueZero”算法：
（1）在做key的相等性判断时，NaN被认为与NaN相等。（即使NaN !== NaN）
（2）其他种类的key，依据===运算符进行判断。
（3）目前+0和-0被认为相等是符合ES2015规范的，但是会有浏览器兼容性问题。

5. Map与Object对比

（1）Object的key只能是字符串（String）或符号（Symbol），
而Map的key可以是任意值，包括函数，对象（object）或者任何原始值（primitive value）。

（2）对于Map来说，可以通过size属性直接获取key的个数，
而Object则需要Object.keys(xxx).length来间接获取自身属性的个数。

（3）Map实例是一个iterable对象，可以直接用来遍历，
而Object需要先获取它的key，再使用key进行遍历。

（4）Object可以有原型对象，自身属性可能会无意间与原型属性相冲突。
（虽然ES2015中可以通过Object.create(null)来创建一个无原型的对象。）

（5）Map key的添加删除操作更加高效。

读到这里，这篇“js的Map函数怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。