阅读 121

map() 和 forEach()

map() 和 forEach() 方法都可以遍历数组,那它们的区别是什么,或者适用场景

1. 遍历数组后是否有返回值

const arr01 = [
    { a: 1, b: 2 },
    { a: 2, b: 2 },
    { a: 3, b: 2 },
    { a: 4, b: 2 }
]
//map方法
const arr02 = arr01.map(item => {
    return item.a
})
console.log(arr02);   // [ 1, 2, 3, 4 ]

//forEach方法
const arr02 = arr01.forEach(item => {
    return item.a
})
console.log(arr02);  //undefined复制代码

2. 是否能对数组元素进行修改

......
const arr02 = arr01.map(item => {
    item.a = 3
    return item.a
})
console.log(arr02);  // [ 3, 3, 3, 3 ]复制代码

3. map、forEach

map() 和 forEach() 是高阶函数,帮助我们实现某种功能,可以直接在代码中调用,而不用纠结循环本身,只需关注于要实现的业务即可。

API是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。 简单理解:API就是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。

高阶函数:

高阶函数定义

高阶函数英文叫 Higher-order function。高阶函数是对其他函数进行操作的函数,操作可以是将它们作为参数,或者返回它们。简单总结为高阶函数是一个接收函数作为参数或者将函数作为返回输出的函数。

函数作为参数情况

Array.prototype.mapArray.prototype.filterArray.prototype.reduceArray.prototype.sort是JavaScript中内置的高阶函数。它们接受一个函数作为参数,并应用这个函数到列表的每一个元素。 内置高阶函数的具体说明讲解,以及和不使用高阶函数情况下的对比

Array.prototype.map

map()(映射)方法最后生成一个新数组,不改变原始数组的值。其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

array.map(callback,[ thisObject]);复制代码

callback(回调函数)

[].map(function(currentValue, index, array) {
    // ...
});复制代码

传递给 map 的回调函数(callback)接受三个参数,分别是currentValue——正在遍历的元素、index(可选)——元素索引、array(可选)——原数组本身,除了 callback 之外还可以接受 this 值(可选),用于执行 callback 函数时使用的this 值。

举例,现有一个数组[1,2,3,4],需要生成一个新数组,其每个元素皆是之前数组的两倍。

// 不使用高阶函数
const arr1 = [1, 2, 3, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
  arr2.push( arr1[i] * 2);
}
console.log( arr2 );  // [2, 4, 6, 8]
console.log( arr1 );  // [1, 2, 3, 4]

//使用高阶函数
const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item * 2);

console.log( arr2 ); // [2, 4, 6, 8]
console.log( arr1 ); // [1, 2, 3, 4]复制代码

高阶函数学习参考链接:segmentfault.com/a/119000001…

4. for循环相关

    <script>
        //1. 在for循环外层用let定义变量,i相对循环是全局变量 
        let i = 0;
        for (; i < 5; i++) {
            setTimeout(() => {
                console.log(i)  // [5,5,5,5,5]
            }, i * 1000)
        }
        
        //2. 在for循环内层用let定义变量
        for (let i = 0; i < 5; i++) {
            setTimeout(() => {
                console.log(i)  // [0,1,2,3,4]
            }, i * 1000)
        }
        
        //3. 在for循环内层用var定义变量,变量提升,i是全局变量
        for (var i = 0; i < 5; i++) {
            setTimeout(() => {
                console.log(i)  // [5,5,5,5,5]
            }, i * 1000)
        }

    </script>


作者:likewind2021
链接:https://juejin.cn/post/7039533461559853086

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐