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 相关文章推荐
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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常用技巧总结(附函数代码)
2012/02/04 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
Python实现图像几何变换
2015/07/06 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python实现矩阵打印
2019/03/02 Python
vue常用指令代码实例总结
2020/03/16 Python
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
入党积极分子自我鉴定范文
2014/03/25 职场文书
个人授权委托书范本
2014/04/03 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
教学副校长工作总结
2015/08/13 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
四年级作文之植物
2019/09/20 职场文书
k-means & DBSCAN 总结
2021/04/27 Python