[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)

试过的朋友不妨点个赞，哈哈，细还是我细啊！