JS里几种for...循环的区别

目录

• 1. 普通for循环
• 2. for(... in ...)循环
• 3. for(... of ...)循环
• 4. forEach循环

1. 普通 for循环

普通for循环可用于遍历数组

let arr = ['A','B','C','D']
for(let i=0;i<arr.length;i++){
    console.log(arr[i])
}
// A
// B
// C
// D

2. for(... in ...)循环

可遍历Array,Object对象
可以结合break continue return, 随时退出循环

遍历返回的值都是数据结构的键名:

• 遍历对象返回的对象的key值
• 遍历数组返回的数组的下标(key)

const arr = ["A","B","C","D"]
for(let i in arr){
    console.log(i)
    // 0
    // 1
    // 2
    // 3
}

const obj = {
    a:1,
    b:2,
    c:3
}
for(let i in obj){
    console.log(i)
    // a
    // b
    // c
}

for(... in ...)循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键:

const arr = ["A","B","C"]
// 手动给arr数组添加一个属性
arr.name='小白'
// for...in循环可以遍历出name这个键名
for(let i in arr){
    console.log(i)
    // 0
    // 1
    // 2
    // name
}

某些情况下，for…in循环会以任意顺序遍历键名

const obj = {
    100:'a',
    1:'b',
    20:'c'
}
for(let i in obj){
    console.log(i)
    // 1
    // 20
    // 100
}

主要是为遍历对象而设计的，不适用于遍历数组
for...in获取的键名是字符串类型的

let arr = [1,2,3]
for (var index in arr) { // 千万别这样做
    console.log(arr[index])
    console.log(typeof index)
    // 1
    // string
    // 2
    // string
    // 3
    // string
}

由上，我们可以看出获取的index，并不是数值类型，而是字符串类型。
如果我们在无意之间进行了字符串的计算："1"+1=="21"，๑乛◡乛๑bug就来喽~

3. for(... of ...)循环

• 可遍历iterable可被迭代的对象（不包括Object）
  一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for ...of循环
  注意：
  拥有iterator接口的数据结构，有：
  Array(数组) Map(映射) Set(集合) String(字符串) arguments对象(传递给函数的参数的类数组对象) Nodelist对象(获取的dom列表集合)
  凡是部署了 iterator 接口的数据结构也都可以使用数组的 扩展运算符(...)、和解构赋值等操作
• 只遍历属于对象本身的属性
• 遍历获取的是键值
• 可以结合break continue return, 随时退出循环

const arr = ["A","B","C","D"]
for(let i of arr){
    console.log(i)
    // A
    // B
    // C
    // D
}

const obj = {
    a:1,
    b:2,
    c:3
}
for(let i of obj){
    console.log(i)  // 报错：obj is not iterable
}

for...of遍历对象需要通过和Object.keys()搭配使用

const obj = {
    a: 1,
    b: 2,
    c: 3
}
console.log(Object.keys(obj)) // [ 'a', 'b', 'c' ]
for (let i of Object.keys(obj)) {
    console.log(i)
    // a
    // b
    // c
}

4. forEach循环

可被迭代的对象有成员方法forEach()
只遍历属于对象本身的属性
不能使用break continue return

arr.forEach(function(value,key,iterable){
    console.log(key, value, iterable)
})
// 0 'A' [ 'A', 'B', 'C', 'D' ]
// 1 'B' [ 'A', 'B', 'C', 'D' ]
// 2 'C' [ 'A', 'B', 'C', 'D' ]
// 3 'D' [ 'A', 'B', 'C', 'D' ]

总结：

• forEach更多的用来遍历数组，不能使用break continue return退出循环
• for...in一般用来遍历对象或json
• for...of用来遍历数组非常方便且比较安全
• for...in循环出的是key, for...of循环出的是value