JavaScript数组forEach方法及实现forEach与for in 、for of 的区别：

78 阅读 0 评论 52 点赞

我是靠谱客的博主留胡子书本，最近开发中收集的这篇文章主要介绍JavaScript数组forEach方法及实现forEach与for in 、for of 的区别：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、forEach（ function（ element，index，self ）{ }，this）：遍历数组每个元素，没有返回值，如果遍历数组的目的是为了得到返回值，那么使用map，否则使用forEach；

参数一：（必传）

需要传一个函数，函数参数：

element：数组的每一项；

index：每一项所对应的的索引；

self：数组本身；

参数二：（可传）

没传参数二的时候，this指向window，如果传了参数二，this指向参数二本身；

eg：下边例子，参数二没有传递，this指向window

var arr = [1,2];
arr.forEach(function(ele,index,self){
console.log(ele,index,self)
console.log(this)
})

eg：给参数二传一个对象，我们来看下，this指向了对象 { name:"lvxingchen" }

var arr = [1,2];
arr.forEach(function(ele,index,self){
console.log(ele,index,self)
console.log(this)
},{name:"lvxingchen"})

也就是说参数二可以改变this的指向。。。

我们再来看下forEach的实现：

Array.prototype.myForEach =
function(Fn){
var _this = this,
len = _this.length(),//数组的长度
params2 = arguments || window ;//参数二
for( var i = 0 ; i < leg; i++ ){
Fn.call(params2,_this[i],i,_this);//把Fn函数里边的this指向参数二
}
}
var arr = [1,2];
arr.myForEach(function(ele,index,self){
console.log(ele,index,self);
}，{name:"吕星辰"})

打印结果：

注意，forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某个条件就中断循环，要使用for循环。

var arr = [1,1,2,4,5];
for(var i = 0 ; i < arr.length ; i ++){
if( i > 2 )break;
console.log(arr[i])//1
1
2
}

forEach与for in 、for of 的区别：

for in：能遍历出数组私有属性或对原型可枚举的属性方法，而且结果for in把key转化成字符串了；

var arr = [1,2,3];
arr.a = "a";
for(var value in arr){
console.log(key)//0
1
2
a
}

for of：是ES6的方法，只能遍历数组；（在这里我修正下之前这段话，for of也可以遍历对象，前提：需要给对象加上一个迭代器接口）

var obj = {name:"lv",age:"x"};
for(var key of Object.keys(obj)){
console.log(key)//name
age
}

上边代码：Object.keys可以把对象的属性转成字符串依次遍历出来，返回由对象属性组成的数组。

我们来看下遍历有迭代器接口的对象：

let obj = {
0: "lxc",
1: 20,
length:2,
[Symbol.iterator]: function () {
let index = 0
let next = () => {
return {
value: this[index],
done: this.length == index++
}
}
return {
next
};
}
}
for(let i of obj){
console.log(i) // "lxc" "20"
}

我们给上边obj对象加上一个iterator迭代接口，就可以用for ··· ··· of了，关于迭代器及新增原始数据类型symbol可以去看看阮一峰老师的ES6入门：http://es6.ruanyifeng.com/