js中forEach、map

客官°小女子只卖身不卖艺 2022-06-15 11:17 239阅读 0赞

JavaScript数组的 **forEach()**方法调用数组中的每个元素。  
**语法**

array.forEach(callback[, thisObject]);

下面是参数的详细信息：  
callback : 函数测试数组的每个元素。  
thisObject : 对象作为该执行回调时使用。

forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身

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

返回值:  
返回创建数组。

兼容性：  
这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现。为了使它工作，你需要添加下面的脚本代码的顶部：

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

例子：

<html>
    <head>
    <title>JavaScript Array forEach Method</title>
    </head>
    <body>
    <script type="text/javascript"> if (!Array.prototype.forEach) { Array.prototype.forEach = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) fun.call(thisp, this[i], i, this); } }; } function printBr(element, index, array) { document.write("<br />[" + index + "] is " + element ); } [12, 5, 8, 130, 44].forEach(printBr); </script>
    </body>
    </html>

这将产生以下结果：  
\[0\] is 12  
\[1\] is 5  
\[2\] is 8  
\[3\] is 130  
\[4\] is 44

**map方法**  
这里的map不是“地图”的意思，而是指“映射”。\[\].map();  
基本用法跟forEach方法类似：

array.map(callback,[ thisObject]);

callback的参数也类似：

[].map(function(value, index, array) {
      // ...
    });
    map方法的作用

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

var data=[1,3,4]
    
    var Squares=data.map(function(val,index,arr){
      console.log(arr[index]==val);  // ==> true
      return val*val           
    })
    console.log(Squares);        // ==> [1, 9, 16]

注意：由于forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持（万恶的IE啊），不过呢，可以从Array原型扩展可以实现以上全部功能，例如forEach方法:  
if (typeof Array.prototype.forEach != “function”) \{  
Array.prototype.forEach = function() \{  
/\* 实现 \*/  
\};  
\}