ES6的Map常用用法

雨点打透心脏的1/2处 2023-06-20 06:52 21阅读 0赞

**`Map` 与数组的关系**

var kvArray = [["key1", "value1"], ["key2", "value2"]];
    
    // 使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象
    var myMap = new Map(kvArray);
    
    myMap.get("key1"); // 返回值为 "value1"
    
    // 使用Array.from函数可以将一个Map对象转换成一个二维键值对数组
    console.log(Array.from(myMap)); // 输出和kvArray相同的数组
    
    // 或者在键或者值的迭代器上使用Array.from，进而得到只含有键或者值的数组
    console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

**Map 转为数组**

const myMap = new Map()
      .set(true, 7)
      .set({foo: 3}, ['abc']);
    [...myMap]
    // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

**Map 转为对象**

如果所有 Map 的键都是字符串，它可以无损地转为对象。如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。

**复制或合并 `Maps`**

var original = new Map([
      [1, 'one']
    ]);
    
    var clone = new Map(original);
    
    console.log(clone.get(1)); // one
    console.log(original === clone); // false. Useful for shallow comparison

**对象转为 Map**

**Map 转为 JSON**

Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
      return JSON.stringify(strMapToObj(strMap));
    }
    
    let myMap = new Map().set('yes', true).set('no', false);
    strMapToJson(myMap)
    // '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

function mapToArrayJson(map) {
      return JSON.stringify([...map]);
    }
    
    let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
    mapToArrayJson(myMap)
    // '[[true,7],[{"foo":3},["abc"]]]'

**JSON 转为 Map**

JSON 转为 Map，正常情况下，所有键名都是字符串。

function jsonToStrMap(jsonStr) {
      return objToStrMap(JSON.parse(jsonStr));
    }
    
    jsonToStrMap('{"yes": true, "no": false}')
    // Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

function jsonToMap(jsonStr) {
      return new Map(JSON.parse(jsonStr));
    }
    
    jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
    // Map {true => 7, Object {foo: 3} => ['abc']}

**Map对象间可以进行合并，但是会保持键的唯一性。**

var first = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    
    var second = new Map([
      [1, 'uno'],
      [2, 'dos']
    ]);
    
    // 合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。
    // 展开运算符本质上是将Map对象转换成数组。
    var merged = new Map([...first, ...second]);
    
    console.log(merged.get(1)); // uno
    console.log(merged.get(2)); // dos
    console.log(merged.get(3)); // three

**Map对象也能与数组合并**

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