关于javascript:JavaScript中forEach方法的原理和应用

JavaScript中forEach办法的原理和利用

上一篇文章比照了下js中for循环和forEach办法的区别,明天手写一些forEach办法,不便理解的更加粗浅一些。

首先看看MDN中forEach办法的语法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

也就是说forEach办法传入了一个回调函数,外面第一个参数是以后值,第二个索引,第三个是以后的数组,此外还有一个额定的可选对象,用于指定callback办法的this

首先,咱们测一下forEach办法

  const arr2 = ['apply', 'call', 'bind']
  let a = arr2.forEach((item, index) => {
   console.log(item)
  })
  console.log(a) // undefined
  const arr2 = ['apply', 'call', 'bind']
    var params = { data: 1 }
    arr2.forEach(function (item, index) {
      console.log(this)
      console.log('data', this.data)
    }, { data: 2 })
    arr2.forEach((item, index)=> {
      console.log(this)
      console.log('data', this.data)
    }, { data: 2 })
    

强烈建议各位打印一下下面的console输入内容

咱们能够看到一些实现时要留神的事项

1、如果应用箭头函数表达式来传入函数参数, thisArg 参数会被疏忽,因为箭头函数在词法上绑定了 this 值。

2、应用一般函数时,第二个参数会当做对应的this指向

3、forEach只是执行回调函数,没有返回值

接下来咱们就能够简略实现下了

  Array.prototype.MyForEach = function(callback, thisArg) {
    for(let i = 0;i<this.length;i++){
       callback.call(thisArg,this[i],i,this)
    }
  }

最重要的是this指向这块,好多同学的简略实现都没看语法,不晓得除了函数之外还能够传第二个参数进去。

而且讲真的,callback中的三个参数,因为第三个是简单对象,所以在callback外部扭转了对应数组的话,是会净化原数据的!

不信你试试?

const arr2 = ['apply', 'call', 'bind']
  var params = { data: 1 }
  arr2.forEach(function (item, index, arr) {
   console.log(this)
   console.log('data', this.data)
   arr.push(1)
  }, { data: 2 })
  console.log(arr2)

试过的敌人无妨点个赞,哈哈,细还是我细啊!

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据