for of, for in 和 forEach用法及其区别

5,532 阅读3分钟

for in

语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

对于数组 ,迭代出来的是数组元素,对于对象 ,迭代出来的是对象的属性;

遍历数组

<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
//var mycars = new Array([saab,Volvo,BMW])
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
//Saab
//Volvo
//BMW

遍历对象

var obj = {      a: "Benz",      b: "BMW",      c: "BAOJUN"  }  for(var v in obj){    document.write(var)+"<br/>";  }  
//a
//b
//c

for...in 并不能够保证返回的是按一定顺序的索引,所有可枚举属性,包括继承属性。

forEach 

    数组一个方法,用于遍历数组,性能相较于for循环弱
  • 定义和用法:forEach()用于调用数组的每个元素,并将元素传递给回调函数
          注:forEach在运行途中无法跳出循环,break和return不起作用,对于空数组不会执行回调函数。
  • 语法:array.forEach(function(currentValue, index, arr), thisValue)
       方法中的参数 function(回调函数)和currentValue(当前元素)是必需的index是当前元素索引值,arr元素所属的数组对象,thisValue传递给函数的值一般用               "this"  值。如果这个参数为空, "undefined" 会传递给 "this" 值。

   上面噼里啪啦“官宣”一大堆,直接上用法

var arr = [1,2,3,4,5,6]
arr.forEach((value,index)=>console.log(index,value));
//另外一种写法
/*arr.forEach((value,index){
    console.log(index,value)
});*/

for of 

     ES6语句,可迭代对象(Array,Map,Set,String,TypedArray,arguments)上创建一个迭代循环。

遍历字符串--string

let str = 'string';
for(let val of str){
    console.log(val);
}
//"s"
//"t"
//"r"
//"i"
//"n"
//"g"

遍历Set---对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

let set = new Set([a,a,b,c,c,c]);
for(let value of set){
    console.log(value);
}
// a
// b
// c

遍历Map---对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

let map = new Map([["a", 0], ["b", 1], ["c",2]]);
for(let arr of map){
    console.log(arr);
}
// ["a", 0]
// ["b", 1]
// ["c", 2]

for(let [key,value] of map){
    console.log(key);
}
// a
// b
// c 

遍历数组(Array)

let arr = [1,2,3,4,5]
for(let val of arr){
   console.log(val)
}
//1
//2
//3
//4
//5

遍历DOM

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>3</li>  
    </ul>
</body>
var dom = document.getElementsByTagName("li")
for(let item of dom){
    console.log(item);
}
//<li>1<li>
//<li>2<li>
//<li>3<li>

总结:

forEach:针对数组,运行途中无法跳出循环,空数组无法执行回调函数。

for in:对于数组 ,迭代出来的是数组元素,对于对象,迭代出来的是对象的属性;

缺点:键名是字符串;会遍历对象本身的所有可枚举属性和从它原型继承而来的可枚举属性,仅迭代对象本身的属性,要结合hasOwnProperty()来使用;某种情况下会任意顺序遍历

for of:和for  in一样简洁的语法但是没有for in的缺点,还提供了遍历多有数据结构的统一操作接口。