javascript中Array map()与forEach()的用法

1 map()介绍

map()方法返回一个新数组，数组中的元素为原始元素经过函数处理后输出的元素。不会改变原始数组

map()按照原数组顺序一次处理数组元素

语法：

array.map(function(currentValue,index,arr), thisValue)

参数说明：

currentValue: 必须，当前元素的值

index：可选，当前元素的索引值

arr：可选，当前元素所属的数组

thisValue：可选，对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

注意：函数里会出现return

举例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>map方法</title>
</head>
<body>
<p>点击按钮将数组中的每个元素乘以输入框指定的值，并返回新数组</p>
<p>
    最小年龄:
    <input type="number" id="age" value="10" />
</p>
<button id="btn">点我</button>
<p id="data">新数组</p>

<script type="text/javascript">
    var btn = document.getElementById("btn");
    var data = document.getElementById("data");
    var age = document.getElementById("age");
    var numbers = [25,36,121,49];

    function myFunction(num,index,arr){
        // console.log(arr);
        return num * age.value;
    }

    btn.onclick = function(){
data.innerHTML = numbers.map(myFunction);
}
console.log(numbers);
</script>

</body>
</html>

运行结果为：250，360，1210，490

2 forEach()介绍

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数说明：

currentValue: 必须，当前元素的值

index：可选，当前元素的索引值

arr：可选，当前元素所属的数组

thisValue：可选，传递给函数的值一般用作 "this" 值。如果省略了 thisValue ，"this" 的值为 "undefined"

用forEach来实现上述功能，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>map方法</title>
</head>
<body>
<p>点击按钮将数组中的每个元素乘以输入框指定的值，并返回新数组</p>
<p> 最小年龄: <input type="number" id="age" value="10" />
</p>
<button id="btn">点我</button>
<p id="data">新数组</p>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var data = document.getElementById("data");
    var age = document.getElementById("age");
    var numbers = [25,36,121,49];
    function myFunction(num,index,arr){
        arr[index]=num * age.value;
    }
    btn.onclick = function(){
        numbers.forEach(myFunction);
        data.innerHTML = numbers;
    }
    console.log(numbers);
</script>
</body>

运行结果如下：

3 二者的比较

相同点：

1.都是循环遍历数组中的每一项

2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）

3.匿名函数中的this都是指向window

4.只能遍历数组，对空数组不进行检测

不同点：

map()不改变原数组，function函数里会有return

forEach()改变原数组,没有return，直接写入操作逻辑

可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值

javascript中Array map()与forEach()的用法

猜你喜欢