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

目录

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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神小夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值