for...in 和 for...of 的区别 -javascript

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

先说结论

  1. for...of 是 for...in 的升级版 (ES6)
  2. for...of 只用于遍历数组 遍历值为value
  3. for...in 主要用于遍历对象(不建议遍历数组) 遍历值为key

环境

node v12.13.0

实践

对Array操作
const arr = [1, 2, 3, 4, 5];

for (let key in arr){
    console.log(key); // '0','1','2','3','4'
}
以上符合预期 index 作为 key 被打印
arr.name = 'xiaoming';// 稍稍来一个动态语言中的对象操作(这种情况可能为程序员误写)
for (let key in arr){
    console.log(key); // '0' '1' '2' '3' '4' 'name' 出现一个name?
}
此处不符合预期
不应该是index作为key被打印吗?那为什么只打印了(arr.)name,而(Array.)length却未作为key打印
这显然不合大多数人的逻辑
来看看 for...of 表现如何
for (let value of arr) {
   console.log(value); // 1 2 3 4 5 
}
并没有出现 'xiaoming' 这才是原汁原味的数组遍历!
对Object操作
const obj = {
    name: 'xiaoming',
    age: 20,
    height: {
        normal: 180,
        atNight: 175
    }
}

for (let key in obj){
    console.log(key); // name age height
}
符合预期
那for...of对对象遍历会得到什么结果呢?
for (let value of obj){ 
    console.log(value); // error : // obj is not iterable
}
报错! 这里涉及ES6引入的iterable类型,有兴趣的同学可以了解一下
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看