js循环的几种方式总结

前言

只描述了一些最基本的用法，和一些可能遇到的问题。一些细节，或者特殊写法之类的，没有。

1.for循环

最基本的循环方式，很少说。可是我在其它某篇文章上，听别人说，这种最基本的循环才是速度最快的，效率最高的。(就是这https://www.jb51.net/article/...

for(var i = 0;i<5;i++){
 console.log(i)
}

2.for in循环

for in循环是用来遍历对象的。要知道JavaScript对象的全部属性都是字符串，不过属性对应的值能够是任意数据类型。（注意：遍历时不只能读取对象自身上面的成员属性，也能遍历出对象的原型属性）

let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指对象的属性名
console.log(prop, obj[prop]);
}
// 输出:
// a,1
// b,2
// c,3

for in一样能够用来循环数组,可是不推荐这么作。因为Array也是对象，而它的每一个元素的索引被视为对象的属性，所以，for in循环能够直接循环出Array的索引，但获得的是String而不是Number，因此一旦你想用这个index去进行计算，就会出错。并且由于会遍历原型属性，因此可能得出的结果不会是你想要的(具体细节很少说，须要了解的本身查询，反正不少坑)。虽然能够用hasOwnProperty()方法避免这个缺陷，可是何须呢，循环方法那么多，换一个就是了。

for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}

3. forEach循环

没什么好说的，看例子。(注意：forEach循环里面没办法用break跳出循环。并且在IE中没法实现，须要作兼容处理。)

let arr = ['123','qwewq','sfds'];
myArray.forEach(function (value, index) {
    console.log(value,index);
});
//输出
//"123",1
//"qwewq",2
//"sfds",3

4.for of循环

做为ES6新增的循环方法，我的以为至关好用，并且方便。这个方法避开了for-in循环的全部缺陷。并且，它能够正确响应break、continue和return语句。

//循环数组
let arr = ['123','qwewq','sfds'];
for(let item of arr){
    console.log(item);    //item指的的就是数组每一项的值。不是索引。
}
//输出
//'123'
//'qwewq'
//'sfds'

for-of循环不只支持数组，还支持大多数类数组对象，例如DOM NodeList对象。可是for of也有一个致命伤，就像例子看到的，没有索引。对，这是优势也是缺点。遍历数组对象，直接就是item.属性(或者item[属性]),而不用像for循环那样arr[index].属性(arrindex)。可是你有的时候真的就得用到index。很差意思，只能把数组转成Map()。但我以为真的须要用到index，仍是换成forEach吧。

//遍历字符串
let name = 'Asher';
for (let char of name){
    console.log(char);         //A s h e r
}

此外，对于在ES6中新增的两种类型，Map和Set(若是学过Java或者其余有这两种类型的语言，会发现用法几乎同样)。for of一样适用。

let mapArray = new Map();
for (let [key, value] of mapArray) {
   console.log(key,value);
}
//Set集合同理，不列举了。

总结

以上就是经常使用的几种for循环总结，不少细节，原理之类的没有写。由于这只是一个简单使用的介绍，不想写那么多。此外，还有不少像while循环，do-while循环之类的其它循环方法，都没提。由于根据个人使用经验，上面的几种已经能够应对几乎全部状况了。