js 一些常用的方法

╰+攻爆jí腚メ 2022-02-19 05:11 236阅读 0赞

map()

在 JavaScript 1.6 里，javascript 数组增加了几个非常有用的方法：indexOf、lastIndexOf、every、 filter、 forEach、 map、 some，其中前两个可以归为元素定位方法，而后面的几个则可以归为迭代（iterative）方法。

遗憾的是：这些新方法并非所有浏览器都支持，在这种情况下，我们就需要自己动手了，在这些介绍的文章中，我们同时提供了在不支持这些新特性的浏览器中的实现方法。

原生方法如下：

var mappedArray = array.map(callback[, thisObject]);

*  callback： 要对每个数组元素执行的回调函数。
 *  thisObject ： 在执行回调函数时定义的this对象。

对数组中的每个元素都执行一次指定的函数（callback），并且以每次返回的结果为元素创建一个新数组。它只对数组中的非空元素执行指定的函数，没有赋值或者已经删除的元素将被忽略。

回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。如参数 thisObject 被传递进来，它将被当做回调函数（callback）内部的 this 对象，如果没有传递或者为null，那么将会使用全局对象。

map 不会改变原有数组，记住：只有在回调函数执行前传入的数组元素才有效，在回调函数开始执行后才添加的元素将被忽略，而在回调函数开始执行到最后一个元素这一期间，数组元素被删除或者被更改的，将以回调函数访问到该元素的时间为准，被删除的元素将被忽略。

如果浏览器不支持map方法，也可以按照下面的方式用prototype去扩展：

在Firefox firebug控制台输出：

[
    Object { index=0, name="gonn", age=50, 更多...}, 
    Object { index=1, name="nowamagic", age=61, 更多...}, 
    Object { index=2, name="frie", age=72, 更多...}
    ]

或者以下方式扩展也可以：

if (!Array.prototype.map)
    {
        Array.prototype.map = function(fun /*, thisp*/)
        {
            var len = this.length;
            if (typeof fun != "function")
                throw new TypeError();
     
            var res = new Array(len);
            var thisp = arguments[1];
            for (var i = 0; i < len; i++)
            {
                if (i in this)
                    res[i] = fun.call(thisp, this[i], i, this);
            }
     
            return res;
        };
    }

**map()**  
`[].map();` 基本用法跟`forEach`方法类似：

array.map(callback,[ thisObject]);

`callback`的参数也类似：

[].map(function(value, index, array) {
        // ...
    });

`map`方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。下面这个例子是数值项求平方：

var data = [1, 2, 3, 4];
    
    var arrayOfSquares = data.map(function (item) {
      return item * item;
    });
    
    alert(arrayOfSquares); // 1, 4, 9, 16

`callback`需要有`return`值，如果没有，就像下面这样：

var data = [1, 2, 3, 4];
    var arrayOfSquares = data.map(function() {});
    
    arrayOfSquares.forEach(console.log);

结果如下图，可以看到，数组所有项都被映射成了`undefined`：  
![全部项都成了undefined][undefined]

在实际使用的时候，我们可以利用`map`方法方便获得对象数组中的特定属性值们。例如下面这个例子（之后的兼容demo也是该例子）：

`Array.prototype`扩展可以让IE6-IE8浏览器也支持`map`方法：

if (typeof Array.prototype.map != "function") {
      Array.prototype.map = function (fn, context) {
        var arr = [];
        if (typeof fn === "function") {
          for (var k = 0, length = this.length; k < length; k++) {      
             arr.push(fn.call(context, this[k], k, this));
          }
        }
        return arr;
      };
    }

## [解惑 \["1", "2", "3"\].map(parseInt) 为何返回\[1,NaN,NaN\]][_1_ _2_ _3_.map_parseInt_ _1_NaN_NaN] ##

javascript中的parseInt与map函数都是常用的函数，可是 \["1", "2", "3"\].map(parseInt) 为何返回不是\[1,2,3\]却是\[1,NaN,NaN\]？

这涉及到是否深入理解两个函数的格式与参数含义。

首先根据我对两个函数用法的了解，猜测是由于parseInt(*string*, *radix*) 的参数radix必须介于2~36之间，而且字符串string中的数字不能大于radix才能正确返回数字结果值。

我们通过以下javascript代码测试一下：

1.  var a=\["1", "2", "3", "4","5",6,7,8,9,10,11,12,13,14,15\];  
2.  a.map(parseInt);

返回结果为：\[1,NaN,NaN,NaN,NaN,NaN,NaN,NaN,NaN,9,11,13,15,17,19\]

正好印证了以上的猜测是正确的，因为：

parseInt('1',0) = 1,  
parseInt('2',1) = NaN,  
parseInt('3',2) = NaN,  
……

正是由于map的回调函数的参数index索引值作了parseInt的基数radix，导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN。

也许你还会怀疑索引值和基数radix对应关系的准确性，这时你可以重新定义parseInt函数，再来测试一下：

1.  function parseInt(str, radix) \{   
2.      return str+'-'+radix;   
3.  \};  
4.  var a=\["1", "2", "3", "4","5",6,7,8,9,10,11,12,13,14,15\];  
5.  a.map(parseInt);

输出结果为：\["1-0","2-1","3-2","4-3","5-4","6-5","7-6","8-7","9-8","10-9","11-10","12-11","13-12","14-13","15-14"\]。

通过此例，再次证明，索引index的起始值从0开始，与radix的对应如前陈述一致，所以才会出现返回NaN的类型值。

这个实例提醒我们在使用两个函数parseInt和map时候要格外小心。同时对于IE6-7不支持map函数的情况也要谨慎或者通过prototype扩展处理。

最后再仔细回顾温习一下：

# parseInt() 函数 #

## 定义和用法 ##

parseInt() 函数可解析一个字符串，并返回一个整数。

### 语法 ###

parseInt(string, radix)

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>必需。要被解析的字符串。</td> 
  </tr> 
  <tr> 
   <td>radix</td> 
   <td> <p>可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。</p> <p>如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。</p> <p>如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。</p> </td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

返回解析后的数字。

### 说明 ###

当参数 *radix* 的值为 0，或没有设置该参数时，parseInt() 会根据 *string* 来判断数字的基数。

举例，如果 *string* 以 "0x" 开头，parseInt() 会把 *string* 的其余部分解析为十六进制的整数。如果*string* 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果*string* 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

## 提示和注释 ##

注释：只有字符串中的第一个数字会被返回。

注释：开头和结尾的空格是允许的。

提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

## 实例 ##

在本例中，我们将使用 parseInt() 来解析不同的字符串：

parseInt("10");			//返回 10
    parseInt("19",10);		//返回 19 (10+9)
    parseInt("11",2);		//返回 3 (2+1)
    parseInt("17",8);		//返回 15 (8+7)
    parseInt("1f",16);		//返回 31 (16+15)
    parseInt("010");		//未定：返回 10 或 8

map 方法 (Array) (JavaScript)

对数组的每个元素调用定义的回调函数并返回包含结果的数组。

array1.map(callbackfn[, thisArg])

[参数][Link 1]

<table> 
 <tbody> 
  <tr> 
   <th> <p>参数</p> </th> 
   <th> <p>定义</p> </th> 
  </tr> 
  <tr> 
   <td> <p>array1</p> </td> 
   <td> <p>必需。&nbsp;一个数组对象。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>callbackfn</p> </td> 
   <td> <p>必需。&nbsp;一个接受最多三个参数的函数。&nbsp;对于数组中的每个元素，<strong>map</strong>&nbsp;方法都会调用&nbsp;callbackfn函数一次。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>thisArg</p> </td> 
   <td> <p>可选。&nbsp;可在&nbsp;callbackfn&nbsp;函数中为其引用this&nbsp;关键字的对象。&nbsp;如果省略thisArg，则&nbsp;undefined&nbsp;将用作this&nbsp;值。</p> </td> 
  </tr> 
 </tbody> 
</table>

[返回值][Link 1]

其中的每个元素均为关联的原始数组元素的回调函数返回值的新数组。

[异常][Link 1]

如果 callbackfn 参数不是函数对象，则将引发 **TypeError** 异常。

[备注][Link 1]

对于数组中的每个元素，**map** 方法都会调用 callbackfn 函数一次（采用升序索引顺序）。 不为数组中缺少的元素调用该回调函数。

除了数组对象之外，**map** 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

### 回调函数语法 ###

回调函数的语法如下所示：

function callbackfn(value, index, array1)

可使用最多三个参数来声明回调函数。

下表列出了回调函数参数。

<table> 
 <tbody> 
  <tr> 
   <th> <p>回调参数</p> </th> 
   <th> <p>定义</p> </th> 
  </tr> 
  <tr> 
   <td> <p>value</p> </td> 
   <td> <p>数组元素的值。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>index</p> </td> 
   <td> <p>数组元素的数字索引。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>array1</p> </td> 
   <td> <p>包含该元素的数组对象。</p> </td> 
  </tr> 
 </tbody> 
</table>

### 修改数组对象 ###

数组对象可由回调函数修改。

下表描述了在 **map** 方法启动后修改数组对象所获得的结果。

<table> 
 <tbody> 
  <tr> 
   <th> <p><strong>map</strong>&nbsp;方法启动后的条件</p> </th> 
   <th> <p>元素是否传递给回调函数</p> </th> 
  </tr> 
  <tr> 
   <td> <p>在数组的原始长度之外添加元素。</p> </td> 
   <td> <p>否。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>添加元素以填充数组中缺少的元素。</p> </td> 
   <td> <p>是，如果该索引尚未传递给回调函数。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>元素被更改。</p> </td> 
   <td> <p>是，如果该元素尚未传递给回调函数。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>从数组中删除元素。</p> </td> 
   <td> <p>否，除非该元素已传递给回调函数。</p> </td> 
  </tr> 
 </tbody> 
</table>

[示例][Link 1]

下面的示例阐释了 **map** 方法的用法。

// Define the callback function. 
    function AreaOfCircle(radius) { 
        var area = Math.PI * (radius * radius); 
        return area.toFixed(0); 
    } 
     
    // Create an array. 
    var radii = [10, 20, 30]; 
     
    // Get the areas from the radii. 
    var areas = radii.map(AreaOfCircle); 
     
    document.write(areas); 
     
    // Output: 
    // 314,1257,2827

下面的示例阐释 thisArg 参数的用法，该参数指定对其引用this 关键字的对象。

// Define an object that contains a divisor property and 
    // a remainder function. 
    var obj = { 
        divisor: 10, 
        remainder: function (value) { 
            return value % this.divisor; 
        } 
    } 
     
    // Create an array. 
    var numbers = [6, 12, 25, 30]; 
     
    // Get the remainders. 
    // The obj argument specifies the this value in the callback function. 
    var result = numbers.map(obj.remainder, obj); 
    document.write(result); 
     
    // Output: 
    // 6,2,5,0

在下面的示例中，内置 JavaScript 方法用作回调函数。

// Apply Math.sqrt(value) to each element in an array. 
    var numbers = [9, 16]; 
    var result = numbers.map(Math.sqrt); 
     
    document.write(result); 
    // Output: 3,4

**map** 方法可应用于字符串。 下面的示例阐释了这一点。

// Define the callback function. 
    function threeChars(value, index, str) { 
        // Create a string that contains the previous, current, 
        // and next character. 
        return str.substring(index - 1, index + 2); 
    } 
     
    // Create a string. 
    var word = "Thursday"; 
     
    // Apply the map method to the string. 
    // Each array element in the result contains a string that 
    // has the previous, current, and next character. 
    // The commented out statement shows an alternative syntax. 
    var result = [].map.call(word, threeChars); 
    // var result = Array.prototype.map.call(word, threeChars); 
     
    document.write(result); 
     
    // Output: 
    // Th,Thu,hur,urs,rsd,sda,day,ay

[要求][Link 1]

在以下文档模式中受支持：Internet Explorer 9 标准模式、Internet Explorer 10 标准模式和 Internet Explorer 11 标准模式。Windows 应用商店 应用程序中也支持此项。请参阅[版本信息][Link 2]。

在以下文档模式中不受支持：Quirks、Internet Explorer 6 标准模式、Internet Explorer 7 标准模式、Internet Explorer 8 标准模式。

**在 JavaScript 1.6 里，javascript 数组增加了几个非常有用的方法：indexOf、lastIndexOf、every、 filter、 forEach、 map、 some，其中前两个可以归为元素定位方法，而后面的几个则可以归为迭代（iterative）方法。**

原生方法如下：

<table> 
 <tbody> 
  <tr> 
   <td><code>1</code></td> 
   <td><code>var</code>&nbsp;<code>mappedArray = array.map(callback[, thisObject]);</code></td> 
  </tr> 
 </tbody> 
</table>

*  callback： 要对每个数组元素执行的回调函数。
 *  thisObject ： 在执行回调函数时定义的this对象。

如果浏览器不支持map方法，也可以按照下面的方式用prototype去扩展：

<table> 
 <tbody> 
  <tr> 
   <td><code>01</code></td> 
   <td><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>02</code></td> 
   <td><code>//扩展原型对象</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>03</code></td> 
   <td><code>Array.prototype.map =&nbsp;</code><code>function</code><code>(fn){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>05</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>var</code><code>i = 0; i &lt;&nbsp;</code><code>this</code><code>.length; i++){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>06</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code><code>value = fn(</code><code>this</code><code>[i], i);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>07</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(value ==</code><code>null</code><code>){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>08</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>continue</code><code>;</code><code>//如果函数fn返回null，则从数组中删除该项</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>10</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a.push(value);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>12</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>a;</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>15</code></td> 
   <td><code>//例子，arr为原始数组</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>18</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{name:&nbsp;</code><code>'nowamagic'</code><code>, age: 30, sex:&nbsp;</code><code>'0'</code><code>, No:&nbsp;</code><code>'274011'</code><code>},</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>22</code></td> 
   <td><code>//使用map更改数组每项的值，可对数组每一项元素内部进行增删改，也可以通过return null来删除数组的某项</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>23</code></td> 
   <td><code>var</code>&nbsp;<code>arr2 = arr.map(</code><code>function</code><code>(item, i){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>26</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>null</code><code>;&nbsp;</code><code>//删除name为tom的项</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>28</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>{ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>29</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>index: i,</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>36</code></td> 
   <td><code>console.log(arr2);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>37</code></td> 
   <td><code>&lt;/script&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

在Firefox firebug控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td><code>2</code></td> 
   <td><code>Object { index=0, name=</code><code>"gonn"</code><code>, age=50, 更多...},</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>3</code></td> 
   <td><code>Object { index=1, name=</code><code>"nowamagic"</code><code>, age=61, 更多...},</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>4</code></td> 
   <td><code>Object { index=2, name=</code><code>"frie"</code><code>, age=72, 更多...}</code></td> 
  </tr> 
 </tbody> 
</table>

或者以下方式扩展也可以：

<table> 
 <tbody> 
  <tr> 
   <td><code>01</code></td> 
   <td><code>if</code>&nbsp;<code>(!Array.prototype.map)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>03</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Array.prototype.map =</code><code>function</code><code>(fun&nbsp;</code><code>/*, thisp*/</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>05</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code><code>len =&nbsp;</code><code>this</code><code>.length;</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>06</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(</code><code>typeof</code>&nbsp;<code>fun !=&nbsp;</code><code>"function"</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>07</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>throw</code><code>new</code>&nbsp;<code>TypeError();</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>09</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code><code>res =&nbsp;</code><code>new</code>&nbsp;<code>Array(len);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>10</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code><code>thisp = arguments[1];</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>14</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res[i] = fun.call(thisp,</code><code>this</code><code>[i], i,&nbsp;</code><code>this</code><code>);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>17</code></td> 
   <td><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>res;</code></td> 
  </tr> 
 </tbody> 
</table>

**注：**map返回的是新数组，它不修改调用的数组。

为了兼容不支持map的浏览器，[developer.mozilla.org][]上给出了map兼容性解决方法。

**\[javascript\]** [view plain][][copy][view plain]

1.  // Production steps of ECMA-262, Edition 5, 15.4.4.19  
2.  // Reference: http://es5.github.com/\#x15.4.4.19  
3.  if (!Array.prototype.map) \{  
4.    Array.prototype.map = function(callback, thisArg) \{  
5.     
6.      var T, A, k;  
7.     
8.      if (this == null) \{  
9.        throw new TypeError(" this is null or not defined");  
10.     \}  
11.    
12.     // 1. Let O be the result of calling ToObject passing the |this| value as the argument.  
13.     var O = Object(this);  
14.    
15.     // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".  
16.     // 3. Let len be ToUint32(lenValue).  
17.     var len = O.length >>> 0;  
18.    
19.     // 4. If IsCallable(callback) is false, throw a TypeError exception.  
20.     // See: http://es5.github.com/\#x9.11  
21.     if (typeof callback !== "function") \{  
22.       throw new TypeError(callback + " is not a function");  
23.     \}  
24.    
25.     // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.  
26.     if (thisArg) \{  
27.       T = thisArg;  
28.     \}  
29.    
30.     // 6. Let A be a new array created as if by the expression new Array(len) where Array is  
31.     // the standard built-in constructor with that name and len is the value of len.  
32.     A = new Array(len);  
33.    
34.     // 7. Let k be 0  
35.     k = 0;  
36.    
37.     // 8. Repeat, while k < len  
38.     while(k < len) \{  
39.    
40.       var kValue, mappedValue;  
41.    
42.       // a. Let Pk be ToString(k).  
43.       //   This is implicit for LHS operands of the in operator  
44.       // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.  
45.       //   This step can be combined with c  
46.       // c. If kPresent is true, then  
47.       if (k in O) \{  
48.    
49.         // i. Let kValue be the result of calling the Get internal method of O with argument Pk.  
50.         kValue = O\[ k \];  
51.    
52.         // ii. Let mappedValue be the result of calling the Call internal method of callback  
53.         // with T as the this value and argument list containing kValue, k, and O.  
54.         mappedValue = callback.call(T, kValue, k, O);  
55.    
56.         // iii. Call the DefineOwnProperty internal method of A with arguments  
57.         // Pk, Property Descriptor \{Value: mappedValue, : true, Enumerable: true, Configurable: true\},  
58.         // and false.  
59.    
60.         // In browsers that support Object.defineProperty, use the following:  
61.         // Object.defineProperty(A, Pk, \{ value: mappedValue, writable: true, enumerable: true, configurable: true \});  
62.    
63.         // For best browser support, use the following:  
64.         A\[ k \] = mappedValue;  
65.       \}  
66.       // d. Increase k by 1.  
67.       k++;  
68.     \}  
69.    
70.     // 9. return A  
71.     return A;  
72.   \};       
73. \}

### 使用 `Map` 对象[节][Link 3] ###

### 将 `NaN` 作为 `Map` 的键[节][Link 4] ###

`NaN` 也可以作为`Map`对象的键。虽然 `NaN` 和任何值甚至和自己都不相等(`NaN !== NaN` 返回true)，但下面的例子表明，`NaN`作为Map的键来说是没有区别的:

var myMap = new Map();
    myMap.set(NaN, "not a number");
    
    myMap.get(NaN); // "not a number"
    
    var otherNaN = Number("foo");
    myMap.get(otherNaN); // "not a number"

### 使用 `for..of` 方法迭代 `Map`[节][Link 5] ###

`Map`可以使用`for..of`循环来实现迭代：

### 使用 `forEach()` 方法迭代 `Map`[节][Link 6] ###

`Map`也可以通过`forEach()`方法迭代：

myMap.forEach(function(value, key) {
      console.log(key + " = " + value);
    }, myMap)
    // 将会显示两个logs。 一个是 "0 = zero" 另一个是 "1 = one"

### `Map` 与数组的关系[节][Link 7] ###

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"]

### 复制或合并 `Maps`[节][Link 8] ###

Map 能像数组一样被复制：

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对象间可以进行合并，但是会保持键的唯一性。

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

[undefined]: /images/20220219/62c5bb73f7884170bd0bada3ed77a2de.png
[_1_ _2_ _3_.map_parseInt_ _1_NaN_NaN]: https://www.cnblogs.com/xuan52rock/p/4460938.html
[Link 1]: http://msdn.microsoft.com/zh-cn/express/ff679976%28v=vs.90%29
[Link 2]: http://msdn.microsoft.com/zh-cn/express/s4esdbwz%28v=vs.90%29
[developer.mozilla.org]: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map
[view plain]: http://blog.csdn.net/freshlover/article/details/19034079
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#%E4%BD%BF%E7%94%A8_Map_%E5%AF%B9%E8%B1%A1
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#%E5%B0%86_NaN_%E4%BD%9C%E4%B8%BA_Map_%E7%9A%84%E9%94%AE
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#%E4%BD%BF%E7%94%A8_for..of_%E6%96%B9%E6%B3%95%E8%BF%AD%E4%BB%A3_Map
[Link 6]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#%E4%BD%BF%E7%94%A8_forEach%28%29_%E6%96%B9%E6%B3%95%E8%BF%AD%E4%BB%A3_Map
[Link 7]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#Map_%E4%B8%8E%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%B3%E7%B3%BB
[Link 8]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#%E5%A4%8D%E5%88%B6%E6%88%96%E5%90%88%E5%B9%B6_Maps