前言
只描述了一些最基本的用法，和一些可能遇到的问题。一些细节，或者特殊写法之类的，没有。
1.for循环
最基本的循环方式，不多说。但是我之前看过一片实验文章，这种最基本的循环才是速度最快的，效率最高的（循环次数特别多才能看出来一点点差距）。
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,3for 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((value, index) => {
console.log(value,index);
});
//输出
//"123",1
//"qwewq",2
//"sfds",3还有个问题，我们正常经常需要在循环中，直接return函数的的返回值，在forEach中return是不可以的，见例子：
// 普通的循环中，我们可以直接在循环中，结束函数，返回函数结果。
function test() {
const arr = [1,2,3,4];
for(let i =0;
i
文章图片
换成forEach试试呢
// 普通的循环中，我们可以直接在循环中，结束函数，返回函数结果。
function test() {
const arr = [1,2,3,4];
arr.forEach((item, idx)=>{
if(idx === 2) {
return 'success'
}
})
}console.log(test());
// 返回值是undefined
文章图片
所以要记住，forEach不能直接结束函数，返回值。
4.map循环 forEach、map都是ECMA5新增数组的方法。不同的是map不是用来做循环逻辑处理。见例子：
let arr = ['123','qwewq','sfds'];
arr.map((value,index) => {
console.log(value,index);
});
//输出
//"123",1
//"qwewq",2
//"sfds",3看起来和正常的循环使用起来没有差别，就是个普通的循环方法。但如果你这么用，开启了eslint的代码校验，你会发现，这么用会报错（前提是开启了相应校验规则）。为什么呢？
let arr = [1, 2, 3];
const result = arr.map((value,index) => {
return value + 1;
});
console.log(result);
//输出
//[2, 3, 4]
文章图片
如上面的例子所示，map相比普通的for循环，有两点不一样。
- map有返回值。
- 普通的for循环，return有return就会跳出循环，但是这里的return没有跳出循环。
所以不需要操作数组里的值，且没有返回值的需求时，不应该使用map循环。
5.for of循环 作为ES6新增的循环方法。这个方法可以正确响应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();
mapArray.set('name','zhang');
mapArray.set('age',123);
for (let [key, value] of mapArray) {
console.log(key,value);
}
//Set集合同理，不列举了。总结 【常见的js数组循环的方式总结】以上就是常用的几种for循环总结，很多细节，原理之类的没有写。因为这只是一个简单使用的介绍，不想写那么多。此外，还有很多像while循环，do-while循环之类的其它循环方法，都没提。因为根据我的使用经验，上面的几种已经可以应对几乎所有情况了。
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(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中的数据类型转换