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

Posted 海盗洁哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了for...in和for...of循环以及forEach方法相关的知识,希望对你有一定的参考价值。

一、循环

1、for...in循环:可以把一个对象的所有属性依次循环出来。

var o ={
     name:"jack",
     age:20,
     city:"beijing"
};
for (var key in o){
      alert(key)  //"name","age","city"

由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,forj...in循环可以直接循环出Array的索引

var a =["A","B","C"];
for (var i in a){
    alert(i);       //"0","1","2"
    alert(a[i]);   //"A","B","C"
}

总结:for...in循环的是对象的属性;所以便利数组得到的是索引而不是值;所以要遍历数组,可以采用下标循环。

        for...in对Array的循环得到的是String而不是Number。

2、for...of循环:ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型;

                      具有iterable类型的集合可以通过for...of循环来遍历;

                      只循环集合本身的元素

用for...of循环遍历集合,用法如下:

var a = ["A","B","C"];
var s = new Set(["A","B","C"]);
var m = new Map([[1,"x"],[2,"y"],[3,"z"]]);
for (var x of a){
     alert(x);
}
for (var x of s){
     alert(x);
}
for (var x of m){
     alert(x[0]+"="+x[1]);
}

更好的方式是使用iterable内置的forEach方法。它接收一个函数,每次迭代就自动回调该函数。

以Array为例

var a =["A","B","C"];
a.forEach(function(element,index,array)){
       //element:指向当前元素的值
       //index:指向当前元素索引
       //array:指向Aaary对象本身
       alert(element);
} 

Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身;

Map的回调函数参数依次是value、key和map本身。

二、rest参数

ES6引入了rest参数。看下面函数:

function foo(a,b,...rest){
     console.log("a="+a);
     console.log("b="+b);
     console.log(rest);
}

foo(1,2,3,4,5);
//结果
//a=1
//b=2
//Array[3,4,5]

foo(1)
//结果
//a=1
//b=undefined
//Array[]

rest参数只能写在最后,前面用...标识。从运行结果可知,传入的参数先绑定a、b,多余的参数以数组形式交给变量rest。

如果传入的参数连正常定义的参数都没有填满,rest参数会接收一个空数组(注意不是undefined)。

三、求和sum()函数

1、用rest参数和for...of循环    

function sum(...rest){
     var result=0;
     if (rest.length==0){
            return 0;
     }
     for (var i of rest){
           result+=i;
     }
     return result;
} 

2、for 循环

function sum(...rest){
      var result=0;
      if (rest.length==0){
          result=0;
      }
      for (var i=0;i<rest.length;i++){
              result+=rest[i];
      }
      return result;
}

3、用iterable类型的forEach方法

function sum(...rest){
     var result = 0;
     if(rest.length==0){
           result=0;
     }
     rest.forEach(function(element){
           result+=element;
     })
     return result;
}

 

以上是关于for...in和for...of循环以及forEach方法的主要内容,如果未能解决你的问题,请参考以下文章

第十周(1For each for in for of的解释和例子以及Constructor 和Arrow function 的restore)

for...of和for..in区别

for of 和 for in 的区别

for of和for in循环

for...in和for...of循环的区别

javascript总for of和for in的区别?