js中forEach、map

最新推荐文章于 2025-05-27 17:45:06 发布

swpu_lwf

最新推荐文章于 2025-05-27 17:45:06 发布

阅读量469

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 循环

本文链接：https://blog.youkuaiyun.com/liwenfei123/article/details/72831887

JavaScript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了JavaScript中数组的forEach()和map()方法的使用方法及注意事项。包括语法、参数说明、返回值、兼容性和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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() {
/* 实现 */
};
}