Map对象

系统管理员 2023-02-24 05:00 10阅读 0赞

### Map对象    兼容性ES6  Edge12 ###

**`Map` 对象保存键值对，并且能够记住键的原始插入顺序。**

任何值(对象或者[原始值][Link 1]) 都可以作为一个键或一个值。

一个Map对象在迭代时会**根据对象中元素的插入顺序**来进行 — 一个 ** [`for...of`][for...of]** 循环在每次迭代后会返回一个形式为\[key，value\]的数组。**所以说一定要知道顺序，这样在进行for...of迭代时，得到数组值的顺序就可以确定了。Set对象同理。**

[[key,value], [key,value], [key,value]]

**[`Objects`][Objects] 和 `Maps` 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值**

### ** `Maps` 和 `Objects` 有一些重要的区别，在下列情况里使用 `Map` 会是更好的选择：** ###

<table> 
 <tbody> 
  <tr> 
   <th style="width:78px;">&nbsp; &nbsp; &nbsp; &nbsp;</th> 
   <td style="width:416px;"> <p>Map</p> </td> 
   <td> <p>Object</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th style="width:81px;">意外的键</th> 
   <td style="width:413px;"><code>Map</code>&nbsp;默认情况不包含任何键。只包含显式插入的键。</td> 
   <td> <p>一个&nbsp;<code>Object</code>&nbsp;有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。</p> <p><strong>注意:</strong>&nbsp;虽然 ES5 开始可以用&nbsp;<code>Object.create(null)</code>&nbsp;来创建一个没有原型的对象，但是这种用法不太常见。</p> </td> 
  </tr> 
  <tr> 
   <th style="width:81px;">键的类型</th> 
   <td style="width:413px;">一个&nbsp;<code>Map</code>的键可以是<strong>任意值</strong>，包括函数、对象或任意基本类型。</td> 
   <td>一个<code>Object</code>&nbsp;的键必须是一个&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/String" rel="nofollow"><code>String</code></a>&nbsp;或是<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol" rel="nofollow"><code>Symbol</code></a>。</td> 
  </tr> 
  <tr> 
   <th style="width:81px;">键的顺序</th> 
   <td style="width:413px;"> <p><code>Map</code>&nbsp;中的 key 是有序的。因此，当迭代的时候，一个&nbsp;<code>Map</code>&nbsp;对象以插入的顺序返回键值。</p> </td> 
   <td> <p>一个&nbsp;<code>Object</code>&nbsp;的键是无序的</p> <p>注意：自ECMAScript 2015规范以来，对象<em>确实</em>保留了字符串和Symbol键的创建顺序； 因此，在只有字符串键的对象上进行迭代将按插入顺序产生键。</p> </td> 
  </tr> 
  <tr> 
   <th style="width:81px;">Size</th> 
   <td style="width:413px;">&nbsp;<code>Map</code>&nbsp;的键值对个数可以轻易地通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/size" rel="nofollow"><code>size</code></a>&nbsp;属性获取</td> 
   <td><code>Object</code>&nbsp;的键值对个数只能手动计算</td> 
  </tr> 
  <tr> 
   <th style="width:81px;">迭代</th> 
   <td style="width:413px;"><code>Map</code>&nbsp;是&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable" rel="nofollow">iterable</a>&nbsp;的，所以可以直接被迭代。</td> 
   <td>迭代一个<code>Object</code>需要以某种方式获取它的键然后才能迭代。</td> 
  </tr> 
  <tr> 
   <th style="width:81px;">性能</th> 
   <td style="width:413px;"> <p>在频繁增删键值对的场景下表现更好。</p> </td> 
   <td> <p>在频繁添加和删除键值对的场景下未作出优化。</p> </td> 
  </tr> 
 </tbody> 
</table>

### 键的相等 ###

[`NaN`][NaN] 是与 `NaN` 相等的（虽然 `NaN !== NaN`），剩下所有其它的值是根据 `===` 运算符的结果判断是否相等。

ECMAScript规范中，`-0`和`+0`被认为是相等的，尽管这在早期的草案中并不是这样

引用值判断索引是否相等，原始值判断值是否相等

### new Map（）设置属性及值 ###

（1）接受一个数组，数组中的每项都是由key值和value值组成的数组——（二维数组）

let key1 = "a", key2 = "b", key3 = "c";
    let value1 = 1, value2 = 2, value3 = 3;
    let map = new Map([
      [key1,value1],
      [key2,value2],
      [key3,value3]
    ])
    Map(3) {"a" => 1, "b" => 2, "c" => 3}

（2）接受一个迭代对象（iterable对象）组成，其元素为键值对(两个元素的数组） 每个键值对都会添加到新的 Map。`null` 会被当做 `undefined。`

###  克隆Map对象 ###

**以下克隆Map对象的方式，可以深度克隆。注意看以下代码中的注释**

**引用值的=赋值，是将地址直接赋值，所以操作其中一个，会影响另一个引用值。但是其他对引用值的操作，是开辟新的空间地址，两者一般不受影响。**

let arr = [1,2,3];
    let arr1 = [4,5,6];
    let keyObj = {};
    let original = new Map([
      [1, arr1],
      [keyObj,"abc"],
      [arr,arr1]
    ]);
     
    let clone = new Map(original);
    // new Map的方式进行克隆，实际上就是在代码中再写一个Map对象
    clone = new Map([
      [1, arr1],
      [keyObj,"abc"],
      [arr,arr1]
    ]);
    // 不管是新设置还是修改或者删除，都是对Map对象的操作
    // 对original Map对象的操作，不影响clone Map对象
    original.set(2,'two');
    original.set(1,"1");  
    original.set(keyObj,"xyz"); 
    // 修改后的original Map对象
    original = new Map([
      [1, "1"],
      [keyObj,"xyz"],
      [arr,arr1],
      [2,'two']
    ]);
    // 但是对变量的修改，会影响到该变量所在的Map对象
    arr1.push(7);
     
    console.log(original.get(keyObj),clone.get(keyObj));  //xyz abc
    console.log(original.get(arr),clone.get(arr));  //[4, 5, 6, 7]  [4, 5, 6, 7]
    console.log(original === clone);  //false.  不为同一个对象的引用

### 相关属性 ###

1、Map.prototype  Map对象原型

[`Map`][Map] 实例继承自[`Map.prototype`][Map.prototype]。你可以使用这个构造函数的原型对象来给所有的Map实例添加属性或者方法。

2、size属性 Map.prototype.size

与Set方法的size属性一样：size 属性的值是一个整数，表示 Map 对象有多少个键值对。size 是只读属性，用set 方法修改size返回 undefined，即不能改变它的值。  
3、Map.prototype.constructor  Map的构造函数

返回一个函数，它创建了实例的原型。默认是[`Map`][Map]函数。

### 相关方法 ###

**1、set方法**

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

**（2）因为 Set() 方法返回 Map 对象本身，所以你可以像下面这样链式调用它。**

**（3）键可以是一个值，也可以是一个变量**

let myMap = new Map();
    myMap.set("a", 1).set("b", 2).set("c",3);
    console.log(myMap); //Map(3) {"a" => 1, "b" => 2, "c" => 3}

**2、get方法**

返回一个 `Map` 对象中与指定键相关联的值，如果找不到这个键则返回 `undefined`。

let myMap = new Map();
    myMap.set("a", 1).set("b", 2).set("c",3);
    console.log(myMap.get("a")); //1

**3、forEach方法**

`forEach `仅仅是对 `Map` 对象中的每一个元素执行一遍 `callback` 函数，它不会返回任何值。

回调函数接收三个参数：value key map 即每次回调执行的value值、key值、Map副本对象。

我需要熟悉一个词：数组中的item index 与 此处的value key。item index 与value key其实是对应的。

let myMap = new Map();
    myMap.set("a", 1).set("b", 2).set("c",3);
    myMap.forEach((value, key, thisArg) => {
      console.log(thisArg); //Map(3) {"a" => 1, "b" => 2, "c" => 3}
    })

**4、keys方法**

`keys()` 返回一个存在引用关系的 **MapIterator对象**，该对象的\[\[Entries\]\]属性是**由key键值组成的Iterator对象**。

let myMap = new Map();
            myMap.set("name", "zhuzhu")
                 .set(23, 24)
                 .set(false, true)
                 .set(["1",2], ["js","html","css"])
                 .set({}, {a:1,b:2});
    
            console.log(myMap.keys())

![20200708151736584.png][]

**5、values方法**

返回一个**MapIterator对象**，该对象的\[\[Entries\]\]属性是一个**由value值组成的Iterator对象**。

let myMap = new Map();
            myMap.set("name", "zhuzhu")
                 .set(23, 24)
                 .set(false, true)
                 .set(["1",2], ["js","html","css"])
                 .set({}, {a:1,b:2});
            let valuesMap = myMap.values()
            console.log(valuesMap)
            valuesMap.next()
            console.log(valuesMap.next())

![20200708152352784.png][]

**6、entries方法（Map对象的\[Symbol.iterator\]属性也指向该方法）**

返回一个**MapIterator对象**，该对象的中的\[\[Entries\]\]属性，是**由每项\{key：key值，value：value值\}的对象，组成的Iterator对象。**

**MapIterator对象可以调用next方法**

let myMap = new Map();
            myMap.set("name", "zhuzhu")
                 .set(23, 24)
                 .set(false, true)
                 .set(["1",2], ["js","html","css"])
                 .set({}, {a:1,b:2});
            let entriesMap = myMap.entries();
            console.log(entriesMap)
            console.log(entriesMap.next())

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

调用next方法的结果：value属性是一个数组，0项是对应的key，1项是对应的value值  
![2020070816040858.png][]

**7、has方法**

方法`has()` 返回一个Boolean 值，用来表明map 中是否存在指定元素。

**key 必填. 用来检测是否存在指定元素的键值.**

let myMap = new Map();
            myMap.set("name", "zhuzhu")
                 .set(23, 24)
                 .set(false, true)
                 .set(["1",2], ["js","html","css"])
                 .set({}, {a:1,b:2});
            console.log(myMap.has(["1",2]));  false
            console.log(myMap.has(23));    true

**上面代码中 引用属性是要找同一个地址的，原始值可以找到该属性。**

**8、delete方法**

`delete()`** **方法用于移除 `Map` 对象中指定的元素。

**key 必填。从 `Map` 对象中移除的元素的键。**

如果 `Map` 对象中存在该元素，则移除它并返回* `true`*；否则如果该元素不存在则返回 `false`。

**9、clear方法**

`clear()`方法会移除Map对象中的所有元素。**清空Map对象。**

var myMap = new Map();
    myMap.set("bar", "baz");
    myMap.set(1, "foo");
    
    myMap.size;       // 2
    myMap.has("bar"); // true
    
    myMap.clear();
    
    myMap.size;       // 0
    myMap.has("bar")  // false

### **注意的事项** ###

**1、关于键值**

[`NaN`][NaN] 是与 `NaN` 相等的（虽然 `NaN !== NaN 且 NaN != NaN`），剩下所有其它的值是根据 **`===` 运算符**的结果判断是否相等。

（1）NaN作为键值

myMap.set(NaN, "aaa");
            console.log(myMap.get(NaN));   aaa
            console.log(myMap.get(Number("abc")));  aaa

上面代码中值为NaN的键，其对应的value都是aaa。

（2）undefined作为键值

let key;
            myMap.set(undefined, "aaa");
            console.log(myMap.get(undefined)); aaa
            console.log(myMap.get(key));   aaa

上面代码中值为undefined的键，其对应的value都是aaa。

（3） null作为键值

let key = null;
            myMap.set(null, "aaa");
            console.log(myMap.get(null)); aaa
            console.log(myMap.get(key));  aaa

（4）字符串、数字、布尔值作为键值

同样只要键值=== 其value值都是相同的，即获取的是同一个键。

（5）对象、数组、函数

引用值，如果指向的地址是同一个地址，获取的也是同一个键；如果不是同一个地址，获取的就不是同一个键。

let key = {};
            let key1 = key;
            myMap.set(key, "aaa");
            console.log(myMap.get({}));  undefined
            console.log(myMap.get(key)); aaa
            console.log(myMap.get(key1)) aaa

**2、for...of迭代Map对象**

**for...of可以迭代Map对象和Set对象，已经调用他们的方法得到的MapIterator和SetIterator对象，所以Map和Set是有序的。此处区别于Object对象**

[`for...of`][for...of] 循环在每次迭代后会返回一个形式为\[key，value\]的数组。

let myMap = new Map();
            myMap.set("name", "zhuzhu")
                 .set(23, 24)
                 .set(false, true)
                 .set(["1",2], ["js","html","css"])
                 .set({}, {a:1,b:2});
    
            for(keyValue of myMap){
                console.log(keyValue)  
            }

![20200708151349237.png][]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Glossary/Primitive
[for...of]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of
[Objects]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
[NaN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/NaN
[Map]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Map
[Map.prototype]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype
[20200708151736584.png]: /images/20230209/0eb0909f61754bf58c91a62fb9138e9b.png
[20200708152352784.png]: /images/20230209/ad790d8b995441bc9c8269ca94665d78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20230209/e84dfe8e3efd483599c23ab920d89613.png
[2020070816040858.png]: /images/20230209/fa4ef749f14a449fa4f8d082a0107b3e.png
[20200708151349237.png]: /images/20230209/ddc414ea262b42fc982d664e659fc701.png