Vue--set和map

1.set
2.map
含义：Javascript的对象 (Object)，本质上是键值对的集合(Hash结构)，但是传统上只能用字符串当作键。
ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。

const m = new Map();
const o = {p : 'Hello World'};
m.set(o,'content');
document.writeln(m.get(o));
document.writeln(m.has(o));
document.writeln(m.delete(o));
document.writeln(m.has(o));

const map = new Map([
    ['name','张三'],
    ['title','Author']
]);
console.log('map = ',map);
console.log(`map.size = ${map.size}`);
console.log(`map.has('name') = ${map.has('name')}`);
console.log(`map.get('name') = ${map.get('name')}`);
console.log(`map.has('title') = ${map.has('title')}`);
console.log(`map.get('title') = ${map.get('title')}`);

实例的属性和操作方法
(1)size属性
size属性返回Map结构的成员总数。

const map = new Map();
map.set('foo',true);
map.set('bar',false);
document.writeln(map.size);         //  2

(2)set(key,value)
set方法设置键名key对应的键值为value，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成改建。

const m = new Map();
m.set('edition',6);             //..键是字符串
m.set(262,'standard');          //..键是数值
m.set(undefined,'nah');         //..键是undefined
console.log(m);

set方法返回的是当前的Map对象，因此可以采用链式写法。

let map = new Map()
    .set(1,'a')
    .set(2,'b')
    .set(3,'c');
    console.log(map);

(3)get(key)
get方法读取key对象的键值，如果找不到key，返回undefined。

const m = new Map();
const hello = function(){console.log('hello');};
m.set(hello,'Hello ES6!');                      //..键是函数
console.log(m);
console.log(m.get(hello));

(4)has(key)
has方法返回一个布尔值，表示某个键是否在当前Map对象之中。


const m = new Map();
m.set('edition',6);
m.set(262,'standard');
m.set(undefined,'nah');

console.log(m.has('edition'));                       //..true
console.log(m.has('years'));                      //..false
console.log(m.has(262));                       //..true
console.log(m.has(undefined));                       //..

(5)delete(key)
delete方法删除某

const m = new Map();
m.set(undefined,'nah');
console.log(m.has(undefined));                                   //  true

m.delete(undefined);
console.log(m.has(undefined));                                  //  false */

(6)cleart()
clear方法清除所有成员，没有返回值

let map = new Map();
map.set('foo',true);
map.set('bar',false);
document.writeln(map.size);                         //  2
map.clear();
document.writeln(map.size);                         //  0 */

遍历方法
Map结构原生提供三个遍历器生成函数和一个遍历方法。
keys():返回键名的遍历器。
values():返回键值的遍历器
entries:返回所有成员的遍历器
forEach():遍历的Map的所欲成员

const map = new Map([
    ['F','no'],
    ['T','yes']
]);

for(let key of map.keys()){
    console.log(key);
}

for(let value of map.values()){
    console.log(value);
}

for(let item of map.entries()){
    console.log(item[0],item[1]);
}

// 或者
for(let [key,value] of map.entries()){
    console.log(key,value);
}

// 等同于使用map.entries()
for(let [key,value] of map){
    console.log(key,value);
}

map结构转为数组结构，比较快速的方法是使用扩展运算符(…)。

这里写代码片const map = new Map([
    [1,'one'],
    [2,'two'],
    [3,'three'],
]);

console.log([...map.keys()]);
console.log([...map.values()]);
console.log([...map.entries()]);
console.log(...map);

结合数组的map方法，filter方法，可以实现Map的遍历和过滤

const map0 = new Map().set(1,'a').set(2,'b').set(3,'c');
const map1 = new Map(
    [...map0].filter(([k,v]) => k < 3)
);
console.log(map1);

const map2 = new Map(
    [...map0].map(([k,v]) => [k * 2,'_' + v])
);

console.log(map2);

此外，Map还有一个forEach方法，与数组的forEach方法类似，也可以实现遍历

const map = new Map().set(1,'a').set(2,'b').set(3,'c');
map.forEach(function(value,key,map){
    console.log("Key:%s,Value:%s",key,value);
});

forEach方法还可以接收第二个参数，用来绑定this。

const map = new Map().set(1,'a').set(2,'b').set(3,'c');
const reporter = {
    report : function(key,value){
        console.log("Key:%s,Value:%s",key,value);
    }
};

map.forEach(function(value,key,map){
    this.report(key,value);
},reporter);

与其他数据结构的互相转换
(1)Map转为数组
使用扩展运算符(…)。

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

(2)数组转为Map
将数组传入Map构造函数，就可以转为Map。

console.log(new Map([
    [true,7],
    [{foo:3},['abc']]
]));

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

function strMapToObj(strMap){
    // Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的_proto_
    let obj = Object.create(null);
    for(let [k,v] of strMap){
        obj[k] = v;
    }
    return obj;
}

const myMap = new Map()
        .set('yes',true)
        .set('no',false);
let obj = strMapToObj(myMap);
console.log(obj);

(3)对象转为Map

function objToMap(obj){
    let strMap = new Map();
    for(let k of Object.keys(obj)){
        strMap.set(k,obj[k]);
    }
    return strMap;
}
console.log(objToMap({yes:true,no:false}));

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

function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k,v] of strMap) {
      obj[k] = v;
    }
    return obj;
  }

  function strMapToJson(strMap){
      return JSON.stringify(strMapToObj(strMap));
  }

  let myMap = new Map().set('yes',true).set('no',false);
  console.log(strMapToJson(myMap));

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

function mapToArrayJson(map){
    console.log([...map]);
    return JSON.stringify([...map]);
}

let myMap = new Map().set(true,7).set({foo:3},['abc']);
console.log(mapToArrayJson(myMap));

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

function objToStrMap(obj) {
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
      strMap.set(k, obj[k]);
    }
    return strMap;
  }

  function jsonToStrMap(jsonStr){
    return objToStrMap(JSON.parse(jsonStr));
  }

console.log( jsonToStrMap('{"yes":true,"no":false}'));

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

function jsonToMap(jsonStr){
    let obj = JSON.parse(jsonStr);
    console.log('obj = ',obj);
    return new Map(obj);
}
console.log(jsonToMap('[[true,7],[{"foo":3},["abc"]]]'));