javascript中的 for...in, for...of, for 和 forEach 循环的区别

for…in和for…of的区别

• for … in 获取的是对象的键名key；for … of遍历获取的是对象的键值value
  • 如果要通过for…of循环，获取数组的索引，可以借助数组实例的 entries() 方法和 keys() 方法
• for … in 会遍历对象的整个原型链,性能非常差不推荐使用；而 for … of 只遍历当前对象，不会遍历原型链
• 对于数组的遍历：for … in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for … of只返回数组的下标对应的属性值

var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log('forin', a); // 0 1 2 3
}
for (let a of arr) {
  console.log('forof', a); // a b c d
}

结果：

---for in 打印的是索引
forin 0
forin 1
forin 2
forin 3
---for of 打印的是值
forof a
forof b
forof c
forof d

   

for

优点：程序简洁，结构清晰，循环初始化，循环变量化，循环体和循环条件位置突出

缺点：结构比while循环复杂，容易出编码错误

//for
//它和forEach,forof一样不可以遍历对象
//解决办法：就是把对象先转化为数组类型
let obj = {a:1, b:2, c:3}
let obj2 = Object.keys(obj)  //用Object.keys属性转化
for(let i=0; i<obj2.length; i++){
  console.log('obj2', obj2[i])
}

结果：

obj2 a
obj2 b
obj2 c

 

for...in（主要用于遍历对象）

for … in 获取的是对象的键名 key，数组的键名是数字，但是 for…in 循环是的index是string类型的：以字符串作为键名“0”、“1”、“2”等等。

用于循环遍历数组或对象属性。

优点：可以遍历数组的键名，遍历对象简洁方便；    

缺点：某些情况下可能开销较大

eg1. for...in遍历对象

//for...in遍历对象
let obj = {a:1, b:2, c:3}
for(let i in obj){
  console.log('obj', obj[i])
}

结果：

obj 1
obj 2
obj 3

eg2. for...in遍历数组

//for...in遍历数组
let array=[1, 2, 3, 4, 5]
for (let i in array){
  console.log('array', array[i])
}

结果：

array 1
array 2
array 3
array 4
array 5

 

for...of(ES6新增，利用了遍历对象内部的iterator接口，主要用于遍历数组)

for … of遍历获取的是对象的键值 value (值是什么就打印什么)

     1.目前遍历 数组 最便利的方法
     2.避免了for-in，forEach的所有缺陷（可以使用break,continue和return）
     3.可以用在 类数组，字符串，set和map数据 上
     4.不支持对象的遍历（但是它提供了其他的三种方法）
            ①Object.keys()
            ②Object.values()
            ③Object.entries()

 

forEach

（三个参数，第一个是value，第二个是index，第三个是数组体）

优点：不用关心集合下标的问题，减少了出错的效率

缺点：不能同时遍历多个集合，方法不能使用break，continue语句跳出循环，不能使用return从函数体返回，对于空数组不会执行回调函数