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

标签: javascript 循环 foreach for fo
267人阅读 评论(0) 收藏 举报

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循环与foreach(for in)的区别

js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;iarray.length;i++){ alert(array[i]) } //fo...
  • gtt875
  • gtt875
  • 2017-04-20 15:21:06
  • 2272

for in、for of、forEach的区别

forEachforEach()是数组的一个方法,用于遍历数组的每一项,并对每一项执行一个callback函数。 forEach()没有返回值,返回值总是undefined。let a = ["a"...
  • crystal6918
  • crystal6918
  • 2017-07-14 11:04:14
  • 535

js中for in 和 for each in的用法和区别

(2012-12-23 16:17:26) 转载▼ 标签:  forin   foreach   js   用法   区别 ...
  • yaoyaoopen
  • yaoyaoopen
  • 2015-09-10 16:35:44
  • 1942

foreach和for in each 的区别

本文将谈谈javascript 中for in 和 for each in的用法和区别区别一: for in是javascript 1.0 中发布的。 for each in是作为E4X...
  • osdfhv
  • osdfhv
  • 2016-10-13 20:26:30
  • 2018

foreach 和in的用法

https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/keywords/foreach-in forea...
  • u010294743
  • u010294743
  • 2017-09-15 20:35:54
  • 342

<em>For</em> <em>和 Foreach</em> 的效率问题

<em>For</em> <em>和 Foreach</em> 的效率问题,先猜一下,再运行一下,看猜的对不对。... <em>For</em> <em>和 Foreach</em> 的效率问题,先猜一下,再...“exists”和“<em>in</em>”的效率问题 立即下载 ...
  • 2018年04月08日 00:00

foreach和for的区别

  • qq_15253407
  • qq_15253407
  • 2017-04-13 20:06:39
  • 322

for..in,for..of和forEach的区别

forEachforeach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。for..in使用for in 也可以遍历数组,但是会存在以下问题:1.index索引为字符...
  • ken_ding
  • ken_ding
  • 2017-11-15 21:39:34
  • 70

for...in和for...of循环以及forEach方法

用Es6对象扩展运算符(…)与rest运算符说明 function test(first,...a){     for(let val=0; val         console.log(val+...
  • Ayiayi00
  • Ayiayi00
  • 2017-08-08 15:15:01
  • 289
    个人资料
    等级:
    访问量: 6014
    积分: 151
    排名: 110万+
    最新评论