js中关于for循环、for in、foreach、for each in

for each in

原谅我标题党了因为在js中是不支持 for each(var i in array){}的，

关于for循环

for循环是很简单的但是注意

for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

如果要提高效率

 j=arr.length;    //避免每次重新计算 arr.length
for(var i=0;i<j;i++){
    
}

,这个里面对于初学者还是要注意一下的，如果你的第一个条件var i 没有定义直接写成

for(var i;i<arr.length;i++){  
    alert(arr[i]);
}

浏览器是不会报错的但是后面要执行的操作是不会被执行的，

关于 for in

一般在js里面我们需要遍历的有两种一种是数组一种是对象，但是一般不推荐遍历数组，因为for in遍历后的不能保证顺序，而且原型链上的属性也会被遍历到，因此一般常用来遍历非数组的对象并且使用hasOwnProperty()方法去过滤掉原型链上的属性

var arr=['a','b','c'];

var person={
    name:"xiaoming",
    age:25,
    height:"178cm",
    weight:"65kg"
};

我们先遍历数组

for(var i in arr){
    console.log(i);  //这时的var i 代表的是 arr的下标
    console.log(arr[i]);
}

遍历嵌套数组

 var arr1=[['ab','cd'],['e','f'],['ghi','jkl'],['mnop','rlst']];

for(var i in arr1){
    //console.log(i);  输出的也是arr1的下标
  for(var j in arr1[i]){
    console.log(arr1[i][j]);
  }
}

遍历对象

for(var i in person){
    console.log(i);  // i代表的是person的key
    console.log(person[i]);
}

其实还有一种

遍历对象数组----其实很简单只是把上面的结合一下

var arr2=[{
    name:"xiaoming1",
    age:25,
    height:"178cm",
    weight:"65kg"
    },
    {
    name:"xiaoming2",
    age:25,
    height:"178cm",
    weight:"65kg"
      },
    {
    name:"xiaoming3",
    age:25,
    height:"178cm",
    weight:"65kg"
  }];

  for (var i in arr2){
      console.log(i);  //arr2的下标
      for (var j in arr2[i]){ //此处的arr3[i]代表的是一个对象
          console.log(j);  // 所以遍历对象 这个 j就是对象的key ex: name age……
          console.log(arr3[i][j])
      }
  }

关于for each 是无法遍历对象的不然会报错Uncaught TypeError: person.forEach is not a function 我是拿上面的persong实验的

缺陷：不能响应break、continue和return语句

遍历数组

var arr=['a','b','c'];
arr.forEach(function(item,index){
    console.log(item);  //输出 a b c
    console.log(index); //输出的是数组的下标
});

遍历嵌套数组

var arr1=[['ab','cd'],['e','f'],['ghi','jkl'],['mnop','rlst']];
arr1.forEach(function(item,index){

    item.forEach(function(con,num){
        console.log(con)
    });

});

强大的for-of循环

还记得在《深入浅出ES6（一）：ES6是什么》中我向你们承诺过的话么？ES6不会破坏你已经写好的JS代码。目前看来，成千上万的Web网站依赖for-in循环，其中一些网站甚至将其用于数组遍历。如果想通过修正for-in循环增加数组遍历支持会让这一切变得更加混乱，因此，标准委员会在ES6中增加了一种新的循环语法来解决目前的问题。

这是最简洁、最直接的遍历数组元素的语法
这个方法避开了for-in循环的所有缺陷
与forEach()不同的是，它可以正确响应break、continue和return语句
能数组，set，map,不能遍历对象

写法同for in

js中关于for循环、for in、foreach、for each in

强大的for-of循环

猜你喜欢