当前位置: 首页 > news >正文

js中for in与for of之间的差异

先说结论:

推荐在循环对象属性的时候,使用for…in,在遍历数组的时候的时候使用for…of。
for…in循环出的是key,for…of循环出的是value
注意,for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
for…of不能循环普通的对象,需要通过和Object.keys()搭配使用
假设我们要遍历一个数组的valuelet aArray = [‘a’,123,{a:‘1’,b:‘2’}]

使用for…in循环:

for(let index in aArray){
    console.log(`${aArray[index]}`);
}

使用for…of循环:

for(var value of aArray){
    console.log(value);
}

咋一看好像好像只是写法不一样而已,那为什么说for…of修复了for…in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = ‘demo’,再分别查看上面写的两个循环:

for(let index in aArray){
    console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
    console.log(value);
}

所以说,作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for…of循环不会循环对象的key,只会循环出数组的value,因此for…of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for…in

如果实在想用for…of来遍历普通对象的属性的话,可以通过和Object.keys()搭配使用,先获取对象的所有key的数组
然后遍历:

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

相关文章:

  • Cesium实现三维可视化一般步骤
  • Vue2.0 探索之路——生命周期和钩子函数的一些理解
  • vuejs实践todolist列表
  • vue中的watch监听事件机制
  • CommonJS、AMD、CMD的区别
  • npm局部安装和全局安装文件的区别
  • querySelector操作dom的用法
  • webpack打包文件出错
  • npm中的--save-dev与--save的区别
  • vue-router路由导航钩子
  • javascript本地上传并解析excel文件
  • echarts柱状图的x轴文字纵向显示
  • ajax实现跨域请求的几种方式--前端
  • css3-单位px与vw,rem的区别
  • openlayers4通过拖动滑动条设置图层颜色透明度
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 《Javascript数据结构和算法》笔记-「字典和散列表」
  • Angular数据绑定机制
  • Laravel 菜鸟晋级之路
  • seaborn 安装成功 + ImportError: DLL load failed: 找不到指定的模块 问题解决
  • vue 个人积累(使用工具,组件)
  • Web设计流程优化:网页效果图设计新思路
  • 闭包--闭包作用之保存(一)
  • 分布式任务队列Celery
  • 前端之React实战:创建跨平台的项目架构
  • 区块链共识机制优缺点对比都是什么
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • 浅谈sql中的in与not in,exists与not exists的区别
  • ​学习一下,什么是预包装食品?​
  • # 飞书APP集成平台-数字化落地
  • ###STL(标准模板库)
  • ${ }的特别功能
  • $refs 、$nextTic、动态组件、name的使用
  • (2022版)一套教程搞定k8s安装到实战 | RBAC
  • (附源码)springboot教学评价 毕业设计 641310
  • (四) 虚拟摄像头vivi体验
  • (太强大了) - Linux 性能监控、测试、优化工具
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)socket Aio demo
  • (转)编辑寄语:因为爱心,所以美丽
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • .NET Core中的去虚
  • .NET 的程序集加载上下文
  • .net安装_还在用第三方安装.NET?Win10自带.NET3.5安装
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • .NET轻量级ORM组件Dapper葵花宝典
  • .NET中使用Protobuffer 实现序列化和反序列化
  • /bin/bash^M: bad interpreter: No such file or directory
  • @Builder用法
  • [ C++ ] STL_stack(栈)queue(队列)使用及其重要接口模拟实现
  • [ 数据结构 - C++]红黑树RBTree
  • [28期] lamp兄弟连28期学员手册,请大家务必看一下
  • [AutoSar]工程中的cpuload陷阱(三)测试