关于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)

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