JavaScript中forEach、for-in、for-of循环的比较

传统for循环

传统for循环遍历数组

var arr=[2,56,78,34,7];
for(var i=0;i<arr.length;i++)
{
console.log(arr[i]);   //2 56 78 34 7
}

这种方式我们都比较熟悉,但这种方式写法比较麻烦,且不方便于遍历对象，我们用调试工具看一下Array和Object的结构就清楚了



传统for可以这样遍历对象

var obj={name:'cc',age:10,checked:true};
var keys=Object.keys(obj);//返回一个表示给定对象的所有可枚举属性的字符串数组
for(var i=0;i<keys.length;i++)
{
console.log('属性：'+keys[i]);
console.log('值：'+obj[keys[i]]);
}

forEach循环

内置的forEach循环遍历数组

var arr=[2,56,78,34,7];
arr.forEach(function(item)
{
console.log(item);   //2 56 78 34 7
});

我们可以模拟内置的forEach方法,写一个myforEach,可以得到同样的结果，其中func作为回调函数

var arr=[2,56,78,34,7];
Array.prototype.myforEach=function(func)
{
if(typeof func=='function') {
for (var i = 0; i < this.length; i++) {
func(this[i]);
}
}
}
arr.myforEach(function(item){
console.log(item);   //2 56 78 34 7
});

注意：forEach方法不能使用return和break方法跳出循环

var arr=[2,56,78,34,7];
arr.forEach(function(item) {
console.log(item);
return;       //不起作用,还是输出了全部的值
});

for-in循环

遍历数组和对象

//遍历数组
var arr=[2,56,78,34,7];
for(var i in arr)
{
console.log(arr[i]);   //2 56 78 34 7
}
//遍历对象
var obj={name:'cc',age:10,checked:true};
for(var index in obj)
{
console.log('属性：'+index+' 值：'+obj[index]);

注意：数组的键名是数字，index不是数字0，1，2 是字符串“0”、“1”、“2”

注意：某些情况下，for-in循环会以任意顺序遍历键名。

注意：for-in会循环遍历自身可枚举属性，和继承的可枚举属性。


看下面的例子，我们给数组添加了一个foo,一个baz，输出结果包含了自身的可枚举属性

var arr=[2,56,78,34,7];
console.log(arr.length);    //5
arr.foo='one';
arr.baz=function(){};
console.log(arr.length);   //5
for(var index in arr)
{
console.log(arr[index]);    //2 56 78 34 7 one [Function]
}

我们设置数组的原型为一个新的对象，输出的结果包含了继承的可枚举属性

var obj1={mo:'prototype-value'};
var arr=[2,56,78,34,7];
Object.setPrototypeOf(arr, obj1);
for(var index in arr)
{
console.log(arr[index]);    //2 56 78 34 7  prototype-value
}
//JSON.stringify只关心自身的可枚举属性
console.log(JSON.stringify(arr));    //[2,56,78,34,7]

现在数组的结构，原型为我们设置的对象

for-of循环

ES6引入了for-of循环，作为遍历所有数据结构的统一的方法。

for-in循环获取键名,for-of循环直接获取键值，且没有上述for-in循环的缺点

for-of循环默认调用 Iterator 接口，原生具备 Iterator 接口的数据结构:Array、Map、Set、String、TypedArray、arguments 对象、NodeList 对象

//遍历Array
var arr=[2,56,78,34,7];
for(var i of arr)
{
console.log(i);   //2 56 78 34 7
}
//遍历Map
var map = new Map().set('age', 10).set('name', 'cc');
for (var pair of map) {
console.log(pair);         //[ 'age', 10 ] [ 'name', 'cc' ]
}
//遍历Set
var set=new Set();
set.add('name').add('age');
for (var j of set) {
console.log(j);         //name age
}
//遍历String
for (var n of 'mystr') {
console.log(n);         //m y s t r
}
//遍历TypedArray
var int16 = new Int16Array(2);
int16[0] = 42;
for (var t of int16) {
console.log(t);         //42 0
}
//遍历arguments
function exa(){
for (var ar of arguments) {
console.log(ar);         //go 67 dog
}
}
exa('go',67,'dog');

//遍历NodeList 对象
var paras = document.querySelectorAll("div");
for (let d of paras) {
console.log(d);
}

当然我们也可以用for-of循环遍历普通的对象，没有部署 Iterator 接口的普通对象for-of结构不能直接使用，会报错。

我们可以给普通对象部署一个Iterator 接口，看下面的例子

let obj={name:'cc',age:10,checked:true};

obj[Symbol.iterator]=function(){
let keys=Object.keys(obj);
let index=0;
let myobj=this;
return {next:function() {
if(index<keys.length)
{
let k=keys[index++];
return {value:[k,myobj[k]],done:false};
}
else
{
return {value:undefined,done:true};
}
}
}
};

//使用for-of循环遍历对象
for(let [key,value] of obj){
console.log('属性:'+key+' 值:'+value);
}
//输出
//属性:name 值:cc
//属性:age 值:10
//属性:checked 值:true

还有一种方法是使用 Generator 函数将对象重新包装一下，执行 Generator 函数会返回一个遍历器对象

在Generator 函数中，使用yield表达式，定义不同的内部状态。

var obj={name:'cc',age:10,checked:true};

function* generate(obj) {
for (let key of Object.keys(obj)) {
yield [key, obj[key]];
}
}
//使用for-of循环遍历对象
for (let [key, value] of generate(obj)) {
console.log('属性:'+key+' 值:'+value);
}

//输出
//属性:name 值:cc
//属性:age 值:10
//属性:checked 值:true