JS中如何轻松遍历对象属性的方式总结


Posted in Javascript onAugust 06, 2019

自身可枚举属性

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。

这是合理的,因为大多数时候只需要关注对象自身的属性。

来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键:

let simpleColors = {
 colorA: 'white',
 colorB: 'black'
};
let natureColors = {
 colorC: 'green',
 colorD: 'yellow'
};
Object.setPrototypeOf(natureColors, simpleColors);
Object.keys(natureColors); // => ['colorC', 'colorD']
natureColors['colorA']; // => 'white'
natureColors['colorB']; // => 'black'

Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或 null。

Object.keys(natureColors)返回natureColors对象的自身可枚举属性键: ['colorC','colorD']

natureColors包含从simpleColors原型对象继承的属性,但是Object.keys()函数会跳过它们。

Object.values() Object.entries() 也都是返回一个给定对象自身可枚举属性的键值对数组

// ...
Object.values(natureColors); 
// => ['green', 'yellow']
Object.entries(natureColors);
// => [ ['colorC', 'green'], ['colorD', 'yellow'] ]

现在注意与for..in语句的区别,for..in不仅可以循环枚举自身属性还可以枚举原型链中的属性

// ...
let enumerableKeys = [];
for (let key in natureColors) {
 enumerableKeys.push(key);
}
enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']

enumerableKeys数组包含natureColors自身属性键: 'colorC'和'colorD'。

另外for..in也遍历了从simpleColors原型对象继承的属性

2. Object.values() 返回属性值

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

来个例子,使用Object.keys()收集keys,然后通过 key 去对象取对应的值:

let meals = {
 mealA: 'Breakfast',
 mealB: 'Lunch',
 mealC: 'Dinner'
};
for (let key of Object.keys(meals)) {
 let mealName = meals[key];
 // ... do something with mealName
 console.log(mealName);
}
// 'Breakfast' 'Lunch' 'Dinner'

meal是一个普通对象。 使用Object.keys(meals)和枚举的for..of循环获取对象键值。

代码看起来很简单,但是,let mealName = meals[key] 没有多大的必要,可以进一步优化,如下:

let meals = {
 mealA: 'Breakfast',
 mealB: 'Lunch',
 mealC: 'Dinner'
};
for (let mealName of Object.values(meals)) {
 console.log(mealName);
}
// 'Breakfast' 'Lunch' 'Dinner'

因为Object.values(meals)返回数组中的对象属性值,所以可以直接在 for..of 中简化。 mealName直接在循环中赋值。

Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

Object.entries() 返回键值对数组,如 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。

可能直接使用这些键值对不怎么方便,但可以通过数组解构赋值方式访问键和值就变得非常容易,如下所示:

let meals = {
 mealA: 'Breakfast',
 mealB: 'Lunch',
 mealC: 'Dinner'
};
for (let [key, value] of Object.entries(meals)) {
 console.log(key + ':' + value);
}
// 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner'

如上所示,因为 Object.entries()返回一个与数组解构赋值兼容的集合,因此不需要为赋值或声明添加额外的行。

当普通对象要转换成 Map 时Object.entries() 就很有用,因为Object.entries() 返回的格式与Map构造函数接受的格式完全相同:(key,value)。

使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象。

来个例子,让人缓缓:

let greetings = {
 morning: 'Good morning',
 midday: 'Good day',
 evening: 'Good evening'
};
let greetingsMap = new Map(Object.entries(greetings));
greetingsMap.get('morning'); // => 'Good morning'
greetingsMap.get('midday'); // => 'Good day'
greetingsMap.get('evening'); // => 'Good evening'

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

有趣的是,Map提供了与Object.values()Object.entries() 等效的方法(只是它们返回Iterators),以便为Map实例提取属性值或键值对:

  • Map.prototype.values() 等价于Object.values()
  • Map.prototype.entries() 等价于Object.entries()

map是普通对象的改进版本,可以获取 map 的大小(对于普通对象,必须手动获取),并使用任意对象类型作为键(普通对象使用字符串基元类型作为键)。

让我们看看返回.values().entries()的map的方法:

// ...
[...greetingsMap.values()];
// => ['Good morning', 'Good day', 'Good evening']
[...greetingsMap.entries()];
// => [ ['morning', 'Good morning'], ['midday', 'Good day'], 
//  ['evening', 'Good evening'] ]

注意,greetingsMap.values()greetingsMap.entries()返回迭代器对象。若要将结果放入数组,扩展运算符…是必要的。

对象属性的顺序

JS 对象是简单的键值映射,因此,对象中属性的顺序是微不足道的, 在大多数情况下,不应该依赖它。

在ES5和早期标准中,根本没有指定属性的顺序。

然而,从ES 6开始,属性的顺序是基于一个特殊的规则的,除非特指按照时间排序。通过两个新方法Object.getOwnPropertyNamesReflect.ownKeys来编写示例讲解这一属性排序规则。

  • 数字:当属性的类型时数字类型时,会按照数字的从大到小的顺序进行排序;
  • 字符串:当属性的类型是字符串时,会按照时间的先后顺序进行排序;
  • Symbol:当属性的类型是Symbol时,会按照时间的先后顺序进行排序。

如果需要有序集合,建议将数据存储到数组或Set中。

总结

Object.values() Object.entries() 是为JS开发人员提供新的标准化辅助函数的另一个改进步骤。

Object.entries()最适用于数组解构赋值,其方式是将键和值轻松分配给不同的变量。 此函数还可以轻松地将纯JS对象属性映射到Map对象中。、

注意,Object.values()Object.entries()返回数据的顺序是不确定的,所以不要依赖该方式。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 #Javascript
浅入深出Vue之自动化路由
Aug 06 #Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 #Javascript
微信小程序3种位置API的使用方法详解
Aug 05 #Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 #Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
You might like
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
详解Vue 如何监听Array的变化
2019/06/06 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
python pdb调试方法分享
2014/01/21 Python
举例讲解Python中is和id的用法
2015/04/03 Python
常见的python正则用法实例讲解
2016/06/21 Python
python实现扫描日志关键字的示例
2018/04/28 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python程序封装为win32服务的方法
2021/03/07 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
python热力图实现简单方法
2021/01/29 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
外企C语言笔试题
2013/11/10 面试题
大学生个人自我鉴定
2013/12/03 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers