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指向这块，好多同学的简单实现都没看语法，不知道除了函数之外还可以传第二个参数进去。
而且讲真的，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)试过的朋友不妨点个赞，哈哈，细还是我细啊！
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换