[置顶] 浅谈for，for-in，forEach,for-of几种循环

今天主要来给大家说一下for的几种循环，仅代表个人的想法与观点，欢迎各位大神批评。

for循环主要有以下几种：

1.一般的for循环

2.for-in循环

3.forEach循环

4.for-of循环

一.首先是普通的for循环，例如：

var arr = ["a","b","c"];
for(var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

这种for循环是很多初学者用的最多的一种，除了写法上不够简洁外，其他的没啥问题,这里不再赘述。

二.for-in循环

（1）索引为字符串

（2）无顺序（通常用于对象或json中）

（3）可扩展属性也会遍历

用法如下：

var arr = ["a","b","c"];
for(var v in arr){           //这里的v代表的是key值，主要用于输出key值
console.log(typeof v);     //string，索引为字符串
console.log(arr[v]);
}

结果如下：



那么，可扩展属性也会遍历是什么意思呢？我们来看一个栗子：

var arr = ["a","b","c"];
arr.name = "hello";
for(var v in arr){//这里的v代表的是key值，主要用于输出key值
//console.log(typeof v);
console.log(arr[v]);
console.log(v)
}

结果是：



我们可以看到，arr的扩展属性也被遍历出来了

因为它的无序性，所以for-in循环我们通常用于对象或json中，再看下面一个栗子：

var obj = {
name:"hello",
age:"18",
11:22
}
for(var v in obj){
console.log(v);     //遍历对象的属性
console.log(obj[v]);       //遍历对象的属性值
}

结果为:



三.forEach

forEach循环有一个缺点：你不能中断循环(使比如说用break语句或使用return语句），反正这个我用的少~~~。栗子：

var arr = ['a','b','c'];
arr.forEach(function (value) {  //不能跳出循环操作
console.log(value);
break;
});

结果如下：



四.for-of

1.目前遍历 数组 最便利的方法

2.避免了for-in，forEach的所有缺陷

3.可以用在 类数组，字符串，set和map数据 上

4.不支持对象的遍历（但是它提供了其他的三种方法）

①Object.keys()

②Object.values()

③Object.entries()

一个简单地栗子先说一下他怎么用的：

var arr = ['q','w','e'];
for(var v of arr){
console.log(v);
}

结果如下：



for-of是可以跳出循环的（避免了forEach的缺陷），栗子如下：

var arr = ['q','w','e'];
for(var v of arr){
console.log(v);
break;
}

此时只会输出了一个q，说明跳出循环了

for-of也可以循环字符串，上栗子：

var str = "hello";
for(var v of str){
console.log(v);
}

结果如下：



for-of也可以循环类数组，栗子：

function foo(){
for(var i of arguments){
console.log(i)
}
}
foo(1,2,3,4);

结果如下：



接下来我们来看一下对象：

var obj = {
name:"hello",
age:"18"
};
for(var i of obj){
console.log(i);
}

运行之后我们发现报错了：obj[Symbol.iterator] is not a function

我们前面提到，for-of不支持对象的遍历，但是它提供了另外的其他三种方法，我们来试一下：

（1）Object.keys()

var obj = {
name:"hello",
age:"18"
};
for(var i of Object.keys(obj)){
console.log(i);
}

结果如下：



这个时候我们看到,我们使用Object.keys()这个方法，把obj这个对象的属性给遍历出来了（【注意】这里面Object.keys()，O要大写,另外两种方法也一样），那么如果想要属性值呢，？那当然就是Object.values()这个方法了 ，我们来试一下：

var obj = {
name:"hello",
age:"18"
};
for(var i of Object.values(obj)){
console.log(i);
}

果然，属性值出来了：



那小伙伴们肯定已经知道Object.entries()的作用了，我们也来试一下：

var obj = {
name:"hello",
age:"18"
};
for(var i of Object.entries(obj)){
console.log(i);
}

对象obj的属性和属性值都被遍历了出来：



【注意】此时是数组哦~

OK,今天就先到这里吧，希望能对大家有所帮助，也希望各位大牛多多批评，大家共同进步~