zoukankan      html  css  js  c++  java
  • JS中map与forEach的区别

    很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法,

    我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数为(item,index,arr1)),返回值保存到另一个数组中,遍历结束后,整个方法返回这个数组

    map与forEach其实都是JS中,对array进行遍历的方法,区别在于map是存在返回值的,而forEach返回值为undefined

    接下来我们来看map代码实例

    1 let L1 = [1, 4, 7, 11] 
    2 let res1 = L1.map((item, index, arr) => {
    3     console.log(item);  //该参数为遍历的元素本身
    4     console.log(index);  //该参数为遍历的元素的下标
    5     console.log(arr);  //该参数为原数组本身
    6     return item + 2  //返回值会作为储存到另一个数组当作总体的返回值
    7 })
    8 console.log(res1);
    9 console.log(L1);

    输出为下图。可以看到,map方法确实有返回值,用res1接收后输出为修改过的数组。

    map接收的函数有三个参数,可以只写一个两个,也可以三个都写,但是要注意先后顺序。

    然后我们来看forEach代码实例

    1 let L1 = [1, 4, 7, 11]
    2 let res1 = L1.forEach((item, index, arr) => {
    3     console.log(item);
    4     console.log(index);
    5     console.log(arr);
    6     return item + 2
    7 })
    8 console.log(res1);
    9 console.log(L1);

    输出为下图。可以看到,forEach方法无返回值,用res1接收后输出undefined,但是细心的同学可能发现了,为什么对item进行了return,但是L1数组依旧没有变化呢?那是因为对于forEach也是不能修改原数组的,如果需要修改原数组,可以使用索引进行修改

    1 let L1 = [1, 4, 7, 11]
    2 let res1 = L1.forEach((item, index, arr) => {
    3     console.log(item);
    4     console.log(index);
    5     console.log(arr);
    6     arr[index] += 1
    7 })
    8 console.log(res1);
    9 console.log(L1);

    输出为:

     但是forEach作为ES5提出的方法,性能异常的差

    所以大家如果是想对数组进行遍历输出之类简单的操作,可以使用forEach,但是想批量修改数组值,推荐使用map方法

  • 相关阅读:
    子类构造函数中调用虚函数问题验证
    socks5代理浅识
    关于C++标准库(第2版)std::remove_if的"特性"概述
    动态获取结构体中指定的属性值
    构造和析构函数定义为私有场景
    remove_pointer使用测验
    广播自定义消息实现进程间的通信问题
    遍历窗口权限问题
    嵌入窗口到桌面的问题
    实验一 熟悉实验环境
  • 原文地址:https://www.cnblogs.com/JobsOfferings/p/JonsOfferings_map_forEach.html
Copyright © 2011-2022 走看看