forEach和map详细讲解

这篇具有很好参考价值的文章主要介绍了forEach和map详细讲解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基本用法

forEachmap都是JavaScript中常见的用于遍历数组的方法,它们都可以用于对数组中的每个元素执行某种操作,但它们的使用方式和返回结果略有不同。

forEach

forEach是一个用于数组的方法,它会对数组中的每个元素执行一次回调函数。该方法没有返回值,它只是遍历整个数组并执行回调函数。

forEach方法的语法如下:

array.forEach(callback(currentValue, index, array), thisArg);

其中,callback是要执行的函数,它会被传入三个参数:

  • currentValue:当前处理的元素。
  • index:当前处理元素的索引。
  • array:当前正在遍历的数组。

thisArg是一个可选参数,用于指定执行回调函数时使用的 this 值。

forEach方法返回的是undefined,它不会生成新的数组。

forEach方法和for循环在功能上类似,但它更简洁、易读,也更安全,因为它会避免循环时的一些常见问题,如数组越界、重复计算等。

下面是一个使用 forEach 方法遍历数组并输出每个元素的例子:

const arr = [1, 2, 3];

arr.forEach((element) => {
  console.log(element);
});

map

map 方法也是一个用于数组的方法,它会对数组中的每个元素执行一次回调函数,并将回调函数的返回值存储在一个新的数组中。

map 方法的语法如下:

array.map(callback(currentValue, index, array), thisArg);

其中,callback 是要执行的函数,它会被传入三个参数:

  • currentValue:当前处理的元素。
  • index:当前处理元素的索引。
  • array:当前正在遍历的数组。

thisArg是一个可选参数,用于指定执行回调函数时使用的 this 值。

map 方法会返回一个新的数组,这个数组的长度和原数组相同,但是每个元素都是经过回调函数处理后的结果。

下面是一个使用 map 方法将数组中的每个元素都加上 1 的例子:

const arr = [1, 2, 3];

const newArr = arr.map((element) => {
  return element + 1;
});

console.log(newArr); // 输出[2, 3, 4]

可以看到,map 方法生成了一个新的数组,并将原数组中的每个元素都加上了 1。

剖析原理

forEachmap方法的原理都是基于数组的迭代器,实际上它们都是通过调用迭代器实现对数组的遍历。

JavaScript数组有一个内置的迭代器,即Array.prototype[@@iterator]方法。该方法返回一个迭代器对象,可以使用该对象对数组进行迭代。forEachmap方法都会调用Array.prototype[@@iterator]方法返回迭代器对象,然后使用该迭代器对象进行遍历。

forEach

当调用forEach方法时,JavaScript引擎会执行以下步骤:

  1. 检查数组是否存在,如果不存在,则抛出TypeError异常。
  2. 检查第一个参数是否是一个函数,如果不是,则抛出TypeError异常。
  3. 检查第二个参数是否是一个对象,如果是,则将该对象作为this值传递给回调函数,否则this值为undefined
  4. 获取迭代器对象,通过调用Array.prototype[@@iterator]方法获得。
  5. 对于迭代器对象中的每个元素,依次执行回调函数,并将当前元素的值、索引和原数组作为参数传递给回调函数。
  6. forEach方法不会返回任何值。

下面是一个简化的forEach实现代码:

Array.prototype.myForEach = function(callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  for (var i = 0; i < this.length; i++) {
    callback.call(thisArg, this[i], i, this);
  }
};

可以看到,该实现代码使用了for循环来遍历数组,并使用call方法调用回调函数,并将当前元素的值、索引和原数组作为参数传递给回调函数。

map

map方法的原理与forEach方法类似,也是通过调用迭代器实现对数组的遍历,只不过map方法在遍历时会将回调函数的返回值存储在一个新的数组中。下面我们以map方法为例来剖析其原理。

当调用map方法时,JavaScript引擎会执行以下步骤:

  1. 检查数组是否存在,如果不存在,则抛出TypeError异常。
  2. 检查第一个参数是否是一个函数,如果不是,则抛出TypeError异常。
  3. 检查第二个参数是否是一个对象,如果是,则将该对象作为this值传递给回调函数,否则this值为undefined
  4. 创建一个新的空数组,用于存储回调函数的返回值。
  5. 获取迭代器对象,通过调用Array.prototype[@@iterator]方法获得。
  6. 对于迭代器对象中的每个元素,依次执行回调函数,并将当前元素的值、索引和原数组作为参数传递给回调函数。
  7. 将回调函数的返回值存储在新数组中。
  8. 返回新数组。

下面是一个简化的map实现代码:

Array.prototype.myMap = function(callback, thisArg) {
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var newArray = [];
  for (var i = 0; i < this.length; i++) {
    newArray.push(callback.call(thisArg, this[i], i, this));
  }
  return newArray;
};

可以看到,该实现代码除了使用for循环遍历数组之外,还创建了一个新的数组,并将回调函数的返回值存储在新数组中,最后返回新数组。

总结

总的来说,forEachmap方法都是基于数组的迭代器实现的,它们的主要区别在于对回调函数的处理方式。forEach方法执行回调函数时,不会将回调函数的返回值存储起来,而是直接忽略。map方法执行回调函数时,会将回调函数的返回值存储在一个新数组中,最后将该数组返回。因此,如果我们需要对数组中的每个元素执行一个操作,并将操作的结果存储在新数组中,那么应该使用map方法。如果我们只是需要对数组中的每个元素执行一些操作,而不需要将操作的结果存储起来,那么应该使用forEach方法。文章来源地址https://www.toymoban.com/news/detail-735950.html

到了这里,关于forEach和map详细讲解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • forEach跟Map区别

    forEach 和 map 都是 JavaScript 中数组的常用方法,但它们之间的主要区别在于它们的返回值和用途。 1、forEach:它是一个无返回值的方法,它的作用是遍历数组,对数组的每个元素执行相同的操作。 2、map:它是一个有返回值的方法,它的作用是创建一个新的数组,其元素为原始

    2024年04月11日
    浏览(43)
  • JavaScript——forEach()方法

      举例说明: !注意:只遍历有值的元素

    2024年02月19日
    浏览(42)
  • JavaScript forEach 方法跳出循环

    这个问题平时工作中基本不会遇到,通常是面试时,有的面试官喜欢问这个,所以有了探讨的意义。 首先我们来看看 for 循环是怎么处理跳出的。 JavaScript中,for循环可以使用 break 和 continue 来跳出: continue:跳出本次循环 break:结束循环 了解了 for 循环跳出之后,forEach 如何

    2024年02月03日
    浏览(40)
  • mybatis双重foreach实现遍历map中的两个list数组

    前端传值时可能会有多个字段传递过来,需要后台将这多个字段拼接为 name in (? , ?) and name1 in (? , ?) and name2 in (? , ?) 作为sql查询条件…如下图sql语句,即实现多个and xxx in(?,?,?) 拼接 前端传递的是json字符串,json中name和infos是一对具有对应关系的对象,且json中会有多条这种对象

    2024年02月15日
    浏览(41)
  • javascript:在foreach循环完成之后执行一个回调函数

    常规方法 代码如下面demo所示,在foreach的回调函数中进行判断,当循环到数组最后一位元素的时候,执行回调函数: 使用Promise实现 实际工作中,当目标数组的元素内容比较复杂,在回调函数中没有办法进行简单的逻辑判断时,可以使用Promise.all 方法实现:

    2024年02月11日
    浏览(47)
  • 详细分析Java中的list.foreach()和list.stream().foreach()

    典故来源于项目中使用了两种方式的foreach,后面尝试体验下有何区别! 先看代码示例: 使用List的forEach : 使用Stream API的forEach : 两者输出结果都为如下: 既然两个都输出差不多的结果,但两者还是稍微有些小区别,具体看下文! forEach() 是List接口的一部分,用于对列表中

    2024年04月25日
    浏览(46)
  • JS 怎么理解ES6新增Set、Map两种数据结构?

    目录 一、前言 二、Set 1.Set数据结构定义 2.Set数据结构的特性 3.Set数据结构的基本使用 4.Set遍历数据 5.Set 的使用场景 6.WeakSet的使用 7.垃圾回收机制 三、Map 1.Map数据结构定义 2.Map数据结构的特性 3.Map数据结构的基本使用  4.Map遍历数据 5.Map的使用场景 6.WeakMap的使用 7.垃圾回收

    2024年02月08日
    浏览(36)
  • 常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every

    来自于远古的遍历方式,并且涵盖多种手段,例如for in 和for of。 for循环 中使用break和continue语句(终止和跳过本次循环): for of 用来遍历数组也是可以的 for of 中也可以用break和continue for in 也可以遍历数组,但不推荐 for in 中也可以用break和continue forEach是ES5中操作数组的一种

    2024年02月08日
    浏览(52)
  • 数组的5种遍历(for循环、for...in、for...of、forEach()、map()

    数组:内存中一块连续的存储单元,这些存储单元具有共同的名称,不同的索引(下标)。 数组5种遍历: 1、for循环        任何数组都可以使用for循环进行遍历,使用频率最高                                 for (let i = 0; i arr.length; i++) {                            

    2024年02月06日
    浏览(48)
  • [Vue]常见的循环处理数组方法:forEach some map filter every find等方法

    Array.forEach(callback) 千万注意:forEach() 方法对于空数组是不会执行回调函数的 forEach()方法用于遍历数组中的每一个元素,并将元素传给回调函数, 注意:forEach()中是不支持使用break来中途跳出循环和不支持return操作输出, return只能用于控制循环是否跳出当前循环 语法: 回调有三

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包