js中的遍历方式（js循环）

1.for循环

最常用的一种循环，常用于普通数组的遍历
场景1：普通数组

//1.普通写法
var arr=["苹果","香蕉","雪梨"];
for(var i=0;i<arr.length;i++){
   console.log(arr[i]);//打印 苹果 香蕉 雪梨
}
//2.优化性能写法（把数组的长度缓存起来，不用每次去检测数组的长度）
for(i = 0,len=arr.length; i < len; i++) {  
   console.log(arr[i]);//打印 苹果 香蕉 雪梨
  }

场景2：数组里面装对象

var arr=[{
    name:"hu",
    age:11
},
 {
    name:"huww",
    age:20
}];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
    console.log(arr[i].name);
    console.log(arr[i].age);
}

运行结果如下：

2.forEach循环

forEach回调函数中有三个参数：第一个参数为当前元素，第二个参数为当前元素的索引（下标），第三个参数为当前元素所属的数组（数组本身）
常用于遍历对象，也就是for循环中的场景2

var myArray=[{
    name:"hu",
    age:11
},
 {
    name:"hu2",
    age:20
}];
//1.普通函数写法 
myArray.forEach(function(value, index, array) {
     console.log(value);//当前元素
     console.log(index);//当前元素下标
     console.log(array);//当前元素所属数组
});
//2.箭头函数写法（ES6标准中新增的一种函数）
myArray.forEach((value, index, array)=> {
     console.log(value);//当前元素
     console.log(index);//当前元素下标
     console.log(array);//当前元素所属数组
});

运行结果如下：

jQuery中的$.each方法与其用法一致：

$.each(myArray, function(index, value, array) {
    // ...
});

3.for…in循环

for … in是为遍历对象属性而构建的，不建议运用在数组上。
例子取于：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…in

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
   console.log("属性名:" + prop + "值:" + obj[prop])
 }

运行结果如下：

4.for…of循环

var myArray=[{
    name:"hu",
    age:11
},
 {
    name:"hu2",
    age:20
}];
//写法1:
for (var value of myArray) {
  console.log(value); 
}
//写法2：在定义时可以var或let，
//两者的区别是什么？在什么情况会造成输出不一样？可以先自我扩展，以后我会在其他文章写出来
for (let value of myArray) {
  console.log(value); 
}
`

运行结果如下：

5.map循环

var arr=[{
    name:"hu",
    age:11
},
 {
    name:"hu2",
    age:20
}];

//1.普通函数写法
  arr.map(function(value,index,array){ 　
　	console.log(value)
　	console.log(index)
　	console.log(array)
　 })

运行结果如下:

map中可以运用return,例如：拿到数据时想把所有的年龄减10

//2.箭头函数写法
var num = arr.map((value,index,array)=>{ 　
       return value.age-10
  　 })
  console.log(num)

结果如下：

注意：return返回任意值时，都是以数组的方式返回，比如：在例中，return 2 结果就会一个数组：[2,2]。
filter与map用法相似

总结

在js中有很多遍历的方式，在学习的时候语法是一个重点，但是它的应用场景是什么是必须要去记住的。学完一个知识点应当是不断的追问自己：for循环能完成数组遍历，那对象遍历呢？几种的遍历，优缺点是什么？在什么情况下，性能是最优的？等等，而且需要把所有问题，带到实际应用中去思考。
如有错误或建议，请您不吝赐教！