js中forEach的用法

104 阅读 0 评论 69 点赞

我是靠谱客的博主高大短靴，最近开发中收集的这篇文章主要介绍js中forEach的用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天在浏览时遇到了下面一段代码，里面有一个forEach的函数，决定写个文章详细记录以下。

<script>
    var fruits, text;
    fruits = ["Banana", "Orange", "Apple", "Mango"];

    text = "<ul>";
    fruits.forEach(myFunction);
    text += "</ul>";
    document.getElementById("demo").innerHTML = text;

    function myFunction(value) {
      text += "<li>" + value + "</li>";
    } 
</script>

forEach方法：

forEach是ES5中操作数组的一种方法，主要功能是遍历数组。forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身。方法执行是没有返回值的，对原来数组也没有影响。

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

    //等价于jquery中$.each()

    $.each([],function(index,value,array){
　　　    //code something
    })

但是好像和我今天看到的例子中的写法不太一样，看到下面的代码应该就能理解一些了。

var arr = [1,2,3,4];
arr.forEach(alert);

//等价于

var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
    alert(array[k]);
}

扩展：

map方法：

map：用法与 forEach 相似，map方法的即是“映射”，原数组被“映射”成对应新数组。map的回调函数中支持return返回值，并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变。

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

map和forEach举个例子：

//map例子
var arr = [1,2,3,4];

var newarr=arr.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> 结果为true
  return val*val;           
})
console.log(newarr);        // ==> 结果为[1, 4，9, 16]

//forEach例子
var arr = [1,2,3,4];

arr.forEach(function(value,index,array){
    array[index] == value;    //结果为true
    sum+=value;  
    });
console.log(sum);    //结果为 10