当前位置: 代码网 > it编程>编程语言>Javascript > JavaScript基础之Array forEach使用示例

JavaScript基础之Array forEach使用示例

2024年05月15日 Javascript 我要评论
前言foreach()方法对数组的每个元素执行一次给定的函数。回调函数中传递三个参数:第一个参数,就是当前正在遍历的元素第二个参数,就是当前正在遍历的元素的索引第三个参数,就是正在遍历的数组尝试一下v

前言

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的资料请关注代码网其它相关文章!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com