您的位置:

了解如何在JavaScript中使用forEach方法迭代数组

一、forEach方法的介绍

forEach方法是JavaScript中常用的一种迭代数组的方法,它可以遍历数组中的每一项,并对每一项执行一个函数。forEach方法是ES5中新增的方法,它的参数是一个函数,可以接收三个参数:当前遍历的元素、当前遍历元素的索引和整个数组。forEach方法是一个高阶函数,可以将处理数据的具体逻辑传递给它,由它来执行。

二、forEach方法的基本用法


var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array){
    console.log("当前遍历的元素是:" + item);
    console.log("当前遍历的元素的索引是:" + index);
    console.log("整个数组是:" + array);
})

上面的代码就是forEach方法的基本用法。我们首先定义了一个数组,然后调用了数组的forEach方法,传入一个匿名函数作为参数。在匿名函数中,我们输出了当前遍历的元素,当前遍历的元素的索引和整个数组。需要注意的是,forEach方法返回值是undefined,不会改变原始数组。

三、forEach方法中this的指向

在forEach方法中,参数函数中的this默认指向undefined,也就是说,如果你在参数函数中使用了this关键字,那么它指向的是全局对象。但是,我们可以通过给forEach方法传递第二个参数来改变this的指向。第二个参数是一个可选参数,它可以作为参数函数中的this的值。


var arr = [1, 2, 3, 4, 5];
var obj = {
    name: "Lucy",
    age: 18
}
arr.forEach(function(item, index, array){
    console.log("当前遍历的元素是:" + item);
    console.log("当前遍历的元素的索引是:" + index);
    console.log("整个数组是:" + array);
}, obj);

上面的代码中,我们给forEach传递了一个对象作为第二个参数,这样参数函数中的this指向了这个对象。在参数函数中,我们定义了一个输出this.name的语句,这样就可以看到this指向的是我们传递的这个对象。

四、终止forEach方法的执行

在使用forEach方法时,有时我们想要在参数函数中根据一定的条件终止forEach方法的执行。此时,我们可以使用throw语句或return语句来实现。


var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array){
    if(item === 3){
        throw "终止foreach方法的执行";
    }
    console.log("当前遍历的元素是:" + item);
    console.log("当前遍历的元素的索引是:" + index);
    console.log("整个数组是:" + array);
})

上面的代码中,我们在参数函数中添加了if语句判断,如果当前遍历的元素是3,就抛出一个异常,终止forEach方法的执行。

五、forEach方法和map方法的区别

forEach方法和map方法是JavaScript中两种常用的迭代数组的方法。它们的主要区别在于返回值不同。forEach方法没有返回值,而map方法返回一个新的数组。因此,如果你需要对原始数组进行修改并返回一个新的数组,应该使用map方法。


var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.map(function(item, index, array){
    return item * 2;
})
console.log(arr2); // [2, 4, 6, 8, 10]

上面的代码中,我们使用了map方法把原始数组中的每一个元素都乘以2,然后返回了一个新的数组arr2。