关于new Map( )还有哪些是你不知道的

1、Map 的特点

• Map 对象保存键值对,并且能够记住键的原始插入顺序, 任何值都可以作为一个键或一个值
• Map 对象在迭代时会根据对象中的元素插入顺序来进行
• Map 对象使用 for ... of  循环在每次迭代后会返回一个形式为 [key, value] 的数组
• Map 对象键的比较基于零值相等的算法,在目前的 ECMAScript 规范中，-0 和 +0 被认为是相等的,使用 Object.is(-0,+0)返回 false
•  Map 对象设置属性时,以下代码可以正常运行,但是不推荐,因为这种设置属性的方式不会改变 Map 的数据结构,无法被查询到

        const map = new Map();
        map['bla'] = 'blaa';
        console.log(map); // {bla: 'blaa', size: 0}
        console.log(map.has('bla')); //false
        console.log(map.get('bla')); //undefined
        console.log(map.delete('bla')); //false
  

• NaN 也可以作为 Map 对象的键

        const map = new Map();
        map.set(NaN, 'not a number');
        console.log(map); //{NaN => 'not a number'}
  

• 正确的存储数据到 Map 中的方式是使用 set(key, value) 方法

        const map = new Map();
        map.set('bla', 'blaa');
        console.log(map); //{'bla' => 'blaa'}
        console.log(map.has('bla')); //true
        console.log(map.get('bla')); //blaa
        console.log(map.delete('bla')); //true
  

2、Map 的实例属性 

size: 返回 Map 对象中的键值对的个数

      const map = new Map();
      map.set('bla', 'blaa');
      console.log(map.size); //1

3、Map 的实例方法:

1. set ( key, value ) : 在 Map 对象中设置与指定的键 key 关联的值 value，并返回 Map 对象
2. has( key ) : 返回一个布尔值，用来表明 Map 对象中是否存在与 key 关联的值
3. get ( key ) : 返回与 key 关联的值，若不存在关联的值，则返回 undefined
4. delete(key) : 移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false。调用 delete 后再调用 Map.prototype.has(key) 将返回 false
5. clear(): 移除 Map 对象中所有的键值对

      const map = new Map();
      map.set('name', 'Andy'); // {'name' => 'Andy'}
      map.set('age', 18); // {'name' => 'Andy'}
      map.has('name'); //true
      map.get('name'); //Andy
      map.delete('name'); //true
      map.set('name', 'Andy'); // {'name' => 'Andy'}
      map.clear();

 4、迭代方法

1. keys( ) : 返回一个新的迭代对象，其中包含 Map 对象中所有的键，并以插入 Map 对象的顺序排列
2. values( ) : 返回一个新的迭代对象，其中包含 Map 对象中所有的值，并以插入 Map 对象的顺序排列
3. entries( ) : 返回一个新的迭代对象，其为一个包含 Map 对象中所有键值对的 [key, value] 数组，并以插入 Map 对象的顺序排列
4. forEach( callback ) : 

      const map = new Map();
      map.set('name', 'Andy'); // {'name' => 'Andy'}
      map.set('age', 18); // {'name' => 'Andy'}
      map.keys(); // {'name', 'age'}
      map.values(); // {'Andy', 18}
      map.entries(); // {'name' => 'Andy', 'age' => 18}
      map.forEach((item) => {
        console.log(item); //Andy 18
      });

5、使用 for ... of 迭代

      const map = new Map();
      map.set('name', 'Andy');
      map.set('age', 14);
      for (const [key, value] of map) {
        console.log(`key: ${key},value: ${value}`);
        // key: name,value: Andy
        // key: age,value: 14
      }
      for (const [key, value] of map.entries()) {
        console.log(`key: ${key},value: ${value}`);
        // key: name,value: Andy
        // key: age,value: 14
      }
      for (const key of map.keys()) {
        console.log(`key: ${key}`);
        // key: name
        // key: age
      }
      for (const value of map.values()) {
        console.log(`value: ${value}`);
        // value: Andy
        // value: 14
      }

6、Map 与数组的关系

1. 使用常规的 Map 构造函数可以将一个二维键值对数组转成一个 Map 对象

         const arr = [['name', 'Andy'], ['age', 14]];
         const map = new Map(arr);
         console.log(map); // {'name' => 'Andy', 'age' => 14}
   

2. 使用 Array.from 或展开运算符可以将一个Map对象转成一个二维数组

         const map = new Map();
         map.set('name', 'Andy');
         map.set('age', 14);
         console.log([...map]);//[['name','Andy'],['age',14]]
   

7、复制或合并Map 

1. 复制

         const map1 = new Map([['name', 'zs']]);
         const map2 = new Map(map1);
         console.log(map2 === map1);//false 浅比较 不为同一个对象的引用
    
    
    
    
    
    
         const map1 = new Map([
           ['name', 'zs'],
           ['hobby', { sing: 'xxxx' }],
         ]);
         const map2 = new Map(map1);
         for (const [key, value] of map1) {
           if (key === 'hobby') {
             value.sing = 'sub';
           }
         }
         console.log(map1, map2);// hobby 引用同一地址
   

2. Map 对象间合并,但是会保持键的唯一性,相同的键,后面的会把前面的值覆盖掉

         const map1 = new Map([
           ['name', 'zs'],
           ['age', 18],
         ]);
         const map2 = new Map([
           ['name', 'ls'],
           ['age', 20],
         ]);
         const map3 = new Map([...map1, ...map2]);
         console.log(map3); // {'name' => 'ls', 'age' => 20}
   

3. Map 对象与数组的合并,但是会保持键的唯一性,相同的键,后面的会把前面的值覆盖掉

         const map1 = new Map([
           ['name', 'zs'],
           ['age', 18],
         ]);
         const arr = ['name', 'ls'];
         const newMap = new Map([...map1, arr]); //{'name' => 'ls', 'age' => 18}