JavaScript Map

基本含义

Map 对象 保存键值对,与 objects 对象最大的区别是:能够记住原始插入顺序;并可以直接统计总数量;且任何值(对象/原始值)都能作为一个键或一个值。

键相等

NaN 是与 NaN 相等的(虽然 NaN !== NaN),剩下所有其它的值是根据 === 运算符的结果判断是否相等。
(可以理解为直接用 === 作为判断依据)

Objects 和 maps 的比较

objects maps
字符串/Symbol 任意值(函数、对象、基本类型)
遍历是否按插入顺序返回键值
获取键值对个数 手动运算 .size 返回
是否可迭代 必须先获取键 可直接迭代
频繁增删键值对 有优势

属性

size

size 属性的值是一个整数,表示 Map 对象有多少个键值对。size 是 只读 属性,用set 方法修改size返回 undefined,即不能改变它的值。

代码演示:

let myMap = new Map();
myMap.set("a", "aaa");
myMap.set("b", "bbb");

console.log(myMap.size); // 2

has

方法has() 返回一个bool值,用来表明map 中是否存在指定元素.

var myMap = new Map();
myMap.set("test", "value");

myMap.has("test");  // returns true
myMap.has("ceshi");  // returns false
myMap.has("value");  // returns false

get

get() 方法返回某个 Map 对象中的一个指定元素。
myMap.get(key); key: 必须参数,也是它唯一的参数
返回一个 Map 对象中与指定键相关联的值,如果找不到这个键则返回 undefined

let myMap = new Map();
myMap.set("test", "hhh");

myMap.get("test");  // 返回 "hhh"
myMap.get("ceshi");  // 返回 undefined

set

set() 方法为 Map 对象 添加. 或 更新 一个指定了键(key)和值(value)的(新)键值对。

let myMap = new Map();

// 将一个新元素添加到 Map 对象
myMap.set("test", "hhh");
myMap.set(1, "one");

// 在Map对象中更新某个元素的值
myMap.set("test", "test");

// 链式设置更新某个元素的值
myMap.set('test', 'hhh')
     .set(1, '111')
     .set(2, '222');

keys

keys() 返回一个新的 Iterator 对象。它包含按照顺序插入 Map 对象中每个元素的key值。

var myMap = new Map();
myMap.set("0", "000");
myMap.set(1, 111);
myMap.set({}, "222");

var mapIter = myMap.keys();

console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // Object

values

values() 方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。

var myMap = new Map();
myMap.set("0", "000");
myMap.set(1, 111);
myMap.set({}, "222");

var mapIter = myMap.keys();

console.log(mapIter.next().value); // "000"
console.log(mapIter.next().value); // 111
console.log(mapIter.next().value); // "222"

entries

entries() 方法返回一个新的包含 [key, value] 对的 Iterator 对象,返回的迭代器的迭代顺序与 Map 对象的插入顺序相同。

var myMap = new Map();
myMap.set("0", "test");
myMap.set(1, "ceshi");

var mapIter = myMap.entries();

console.log(mapIter.next().value); // ["0", "test"]
console.log(mapIter.next().key); // undefined

clear

  • clear() 方法会移除Map对象中的所有元素。
let myMap = new Map();
myMap.set("test", "1");
myMap.set(1, "2");

myMap.size;       // 2
myMap.has("test"); // true

myMap.clear();

myMap.size;       // 0
myMap.has("test")  // false

delete

  • delete() 方法用于移除 Map 对象中指定的元素。
  • 参数:从 Map 对象中移除的元素的键。
  • 返回值:如果 Map 对象中存在该元素,则移除它并返回 true;否则如果该元素不存在则返回 false。
let myMap = new Map();
myMap.set("test", "1");

myMap.delete("test"); // 返回 true。成功地移除元素
myMap.has("test");    // 返回 false。"test" 元素将不再存在于 Map 实例中

forEach

  • forEach() 方法将会以插入顺序对 Map 对象中的每一个键值对执行一次参数中提供的回调函数。
function logMapElements(value, key, map) {
    console.log("m[" + key + "] = " + value);
}
Map([["test", 3], ["shiyan", {}], ["ceshi", undefined]]).forEach(logMapElements);
// logs:
// "m[test] = 3"
// "m[shiyan] = [object Object]"
// "m[ceshi] = undefined"

代码

使用 for…of 方法迭代 Map

Map 与数组的关系

复制或合并 Maps

  1. 像数组一样合并

    let original = new Map([
      [1, 'one']
    ]);
    
    let clone = new Map(original);
    
    console.log(clone.get(1)); // one
    console.log(original === clone); // false. 浅比较 不为同一个对象的引用
    
  2. 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
    
  3. Map对象也能与数组合并

    let first = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    
    let second = new Map([
      [1, '1'],
      [2, '2']
    ]);
    
    // Map对象同数组进行合并时,如果有重复的键值,则后面的会覆盖前面的。
    let merged = new Map([...first, ...second, [1, '3']]);
    
    console.log(merged.get(1)); // 3
    console.log(merged.get(2)); // '2'
    console.log(merged.get(3)); // 'three'
    

参考链接

[1] MDN Map
[2] MDN Map.prototype.size

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章