JavaScript基础之Array forEach使用示例

 更新时间:2022年12月21日 12:00:10   作者:云层上的光  
这篇文章主要为大家介绍了JavaScript基础之Array forEach使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

forEach() 方法对数组的每个元素执行一次给定的函数。

回调函数中传递三个参数:

  • 第一个参数,就是当前正在遍历的元素
  • 第二个参数,就是当前正在遍历的元素的索引
  • 第三个参数,就是正在遍历的数组

尝试一下

var list = ["云层上的光", "初心", "栾树"];
list.forEach(function(item, index, array){
    console.log(item,index,array)
});

输出内容如下:

那我就好奇了,在forEach回调函数中的this指向谁呢?forEach函数是否有返回值

var list = ["云层上的光", "初心", "栾树"];
var value = list.forEach(function(item, index, array){
    console.log(this);
});
console.log(value);

可以看到 this指向 window并且forEach没有返回值,返回值为 undefined

那我们可以更改this指向吗?

forEach其实接受两个参数,第二个参数 可选参数。当执行回调函数时,用作 this 的值。

forEach实现

Array.prototype.myForEach = function (callback) {
  var _arr    = this,// 调用时谁 this就是谁
      _len    = _arr.length,
      thisArg = arguments[1] || window;
  // 校验callback之能是 function时才往下执行
  if (typeof callback !== 'function') {
    throw new Error(`${callback} is not a function`);
  }
  // for循环
  for (var i = 0; i < _len; i++) {
    callback.apply(thisArg, [_arr[i], i, _arr]);
  }
  // 注意 forEach 没有返回值
}

对象模仿数组

对象的原型上并没有 forEach,所以我们调用 Array.prototype.forEach方法通过call改变方法内部的this指向,myForEach内部循环需要length, 所以我们在对象中模拟了添加了一个length属性,对象的key 分别为 0,1,2 分别对应了循序中的下标。

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));

forEach跳出循环体?

forEach可以跳出循环体吗?其实 returnbreak 是无法做到的,不过可以使用 throw new Error

var list = ["云层上的光", "初心", "栾树"];
try{
    list.forEach(item=&gt;{
        if(item === "初心") throw new Error("初心");
    })
}catch(err){
    if(err.message === "初心")	
        console.log("在执行到初心时跳出循环体了")
    else 
        console.error(err)
}

以上就是JavaScript基础之Array forEach使用示例的详细内容,更多关于JavaScript Array forEach的资料请关注脚本之家其它相关文章!

相关文章

  • 有关于JS辅助函数inherit()的问题

    有关于JS辅助函数inherit()的问题

    本篇为大家介绍有关于JS辅助函数inherit()的一些问题。
    2013-04-04
  • javascript typeof id===''string''?document.getElementById(id):id解释

    javascript typeof id===''string''?document.getElementById(id

    刚开始学习js的朋友可能会有些疑问,其实这段代码使用js的三元运算符,这样代码看起来高大上,最主要是代码段少
    2016-11-11
  • 详解JavaScript中void语句的使用

    详解JavaScript中void语句的使用

    这篇文章主要介绍了详解JavaScript中void语句的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • javascript的 {} 语句块详解

    javascript的 {} 语句块详解

    这篇文章主要介绍了javascript的 {} 语句块详解的相关资料,需要的朋友可以参考下
    2016-02-02
  • 浅谈JavaScript Date日期和时间对象

    浅谈JavaScript Date日期和时间对象

    这篇文章主要介绍了JavaScript Date日期和时间对象的相关资料,需要的朋友可以参考下
    2014-12-12
  • 简单了解JavaScript异步

    简单了解JavaScript异步

    所谓"异步",简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。比如,有一个任务是读取文件进行处理,下面小编来和大家一起学习一下
    2019-05-05
  • JS中的this变量的使用介绍

    JS中的this变量的使用介绍

    在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,在本文将为大家详细介绍下JavaScript中this的使用,感兴趣的朋友可以参考下
    2013-10-10
  • javaScript中

    javaScript中"=="和"==="的区别详解

    对于JavaScript中比较运算符,可能大家用的比较多的是“==”、对于“===”很多人可能很陌生。=== 表示恒等,首先比较两边的变量数据类型是否相等,其次比较两边的变量的数值是否相等;== 表示相等即仅仅比较两边变量的数值是否相等。
    2018-03-03
  • 裁剪字符串trim()自定义改进版

    裁剪字符串trim()自定义改进版

    下面讲述的是自定义trim()函数遇到的问题,改进的过程,建议在支持的浏览器中使用原生函数
    2013-04-04
  • JavaScript ES6中的简写语法总结与使用技巧

    JavaScript ES6中的简写语法总结与使用技巧

    我们在看编写的JS ES6代码时经常会看到许多简写的语法,本篇文章就为大家一一介绍JavaScript ES6可以简写的语法
    2018-12-12

最新评论