ES6 map的基本使用方法

ES6 map的基本使用方法

	//Map

  const map=new Map();
  //存储值
  map.set("xx","ss");
  
  //只有对同一个对象 引用时  才会返回该键的值
  map.set(['1'],"this is a objcet");
  console.error(map.get(['1']));
  
  //在map 两个值严格相同才会返回同个键值
  
  //-0 和 0 相同
  map.set(-0,'xxx');
  console.log(map.get(0));  //xxx
  
  //undefind 和  null   不同
  map.set(undefined,"this is undefined");
  map.set(null,'null');
  console.log(map.get(undefined));
  
  //NaN  相同
  map.set(NaN,'this is NaN');
  console.log(map.get(NaN)); //this is NaN
  
  //方法
  //size
  console.log(map.size); //6
  
  //map.prototype.set(key,value)
  console.log(map.set("key","this is value"));
  // Map {
  //   'xx' => 'ss',
  //   [ '1' ] => 'this is a objcet',
  //   0 => 'xxx',
  //   undefined => 'this is undefined',
  //   null => 'null',
  //   NaN => 'this is NaN',
  //   'key' => 'this is value' }
  
  //可以看出 返回的是map对象
  //所以还可以
  console.log(map.set('key1',"key1").set("key2","key2"));
  // Map {
  //   'xx' => 'ss',
  //   [ '1' ] => 'this is a objcet',
  //   0 => 'xxx',
  //   undefined => 'this is undefined',
  //   null => 'null',
  //   NaN => 'this is NaN',
  //   'key' => 'this is value',
  //   'key1' => 'key1',
  //   'key2' => 'key2' }
  
  //Map.prototype.get
  console.log(map.get("key1")); //key1
  
  //当键是函数时
  function fun(){
    console.log("fun")
  }
  map.set(fun,"funny");
  console.log(map.get(fun)); //funny
  
  //当值不存在时
  console.log(map.get("key3"));  //undefiend;
  
  
  //Map.prototype.has(); 
  console.log(map.has("key1")); //true
  
  console.log(map.has("key3")); //false
  
  // Map.prototype.clear 清除所有键 没有返回值
  console.log(map)
  // Map {
  //   'xx' => 'ss',
  //   [ '1' ] => 'this is a objcet',
  //   0 => 'xxx',
  //   undefined => 'this is undefined',
  //   null => 'null',
  //   NaN => 'this is NaN',
  //   'key' => 'this is value',
  //   'key1' => 'key1',
  //   'key2' => 'key2',
  //   [Function: fun] => 'funny' }
  map.clear()
  console.log(map)  //Map {}
  
  //遍历
  map.set("key1","value1");
  map.set("key2","value2");
  //先输出map.keys() 和 values() 
  console.log(map.keys()); //MapIterator { 'key1', 'key2' }  //查看键
  console.log(map.values()); //MapIterator { 'value1', 'value2' } //查看值
  for (let k of map.keys()) {
    console.log(k);
    //key1
    //key2
  }
  //遍历值
  for (let v of  map.values()) {
    console.log(v);
    //value1
    //value2
  }
  //遍历键值
  for(let item of map.entries()){
    console.log(item);
    // [ 'key1', 'value1' ]
    // [ 'key2', 'value2' ]
    console.log(item[0]);  
    //key1
    //key2
  }
  
  for(let [key,value] of map.entries()){
    console.log("键是"+key+"值是"+value);
  //	键是key1值是value1
  // 键是key2值是value2
  }
  
  //forEach方法
  
  map.forEach((key,value)=>{
    console.log("键1是"+key+"值2是"+value);
    // 键1是value1值2是key1
    // 键1是value2值2是key2
  })
  
  
  for (let [key, value] of map) {
  console.log("键是"+key+"值是"+value);
  //	键是key1值是value1
  // 键是key2值是value2
  }
  
  
  
  //上面那个例子说明 Map 结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。
  console.log(map[Symbol.iterator] === map.entries) //true
  
  
  //Map转化为数组对象
  
  console.log([...map.keys()])  //[ 'key1', 'key2' ]
  
  console.log([...map.values()])  //[ 'value1', 'value2' ]
  
  console.log([...map])  //[ [ 'key1', 'value1' ], [ 'key2', 'value2' ] ]
  
  //过滤 map没有过滤方法 只能通过数组过滤
  map.clear();
  map.set(1,"x").set(2,"xx")
  
  const map2=new Map([...map].filter(([k,v])=> k>1 ));
  
  console.log(map2)  //Map { 2 => 'xx' }
  
  map2.clear();
  
  const map3 = new Map(
    [...map].map(([k, v]) => [k * 2, 'value=' + v])
   );
  
  console.log(map3)
  //Map { 2 => 'value=x', 4 => 'value=xx' }
  
  
  
  //相互转换
  
  //Map转化为数组
  
  console.log([...map])  //[ [ 1, 'x' ], [ 2, 'xx' ] ]
  
  
  //数组转化为map
  
  var arr=[ [ 1, 'x' ], [ 2, 'xx' ] ];
  console.log(new Map(arr));  //Map { 1 => 'x', 2 => 'xx' }
  
  //Map转化为字符串
  
  function maptoObject(map){
    let obj=new Object();
    for(let [k,v] of map){
      obj[k]=v;
    }
    return obj;
  }
  
  console.log(maptoObject(map))  //{ '1': 'x', '2': 'xx' }
  
  //如果键不是对象的话 会转化为对象
  
  
  //对象转化为数组
  function ObjcettoMap(obj){
    let strMap = new Map();
      for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
      }
      return strMap;
  }
  
  var obj={"x":"k","y":"k1"};
  
  console.log(ObjcettoMap(obj));  //Map { 'x' => 'k', 'y' => 'k1' }
  
  //Map转化为Json
  
  //1.可以吧map转化为object  再次转为JSON
  
  console.log(maptoObject(map));  //{ '1': 'x', '2': 'xx' }
  
  console.log(JSON.stringify(maptoObject(map)));  //{"1":"x","2":"xx"}
  
  //2 如果键里有不是字符串的值 比如true  可以吧map转化为数组在转化为JSON
  
  map.set(true,"true")
  
  
  console.log(JSON.stringify(maptoObject(map)));  //{"1":"x","2":"xx","true":"true"}  true 变成字符串
  
  
  console.log(JSON.stringify([...map])) //[[1,"x"],[2,"xx"],[true,"true"]]
  
  //JSON转化为map
  
  //1直接转化 用JSON.parse
  
  var obj1='{"x":"xx","x1":"xxx"}';
  
  
  console.log(ObjcettoMap(JSON.parse(obj1)));  //Map { 'x' => 'xx', 'x1' => 'xxx' }
  
  
  //2 整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。
  //这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。
  
  console.log(new Map(JSON.parse('[[true,7],[{"foo":3},["abc"]]]'))); 
  //Map { true => 7, { foo: 3 } => [ 'abc' ] }