We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
原文:https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/ 译者:前端小智
原文:https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/
译者:前端小智
为了保证的可读性,本文采用意译而非直译。
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。
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']。
Object.keys(natureColors)
natureColors
['colorC','colorD']
natureColors包含从simpleColors原型对象继承的属性,但是Object.keys()函数会跳过它们。
simpleColors
Object.values() 和 Object.entries() 也都是返回一个给定对象自身可枚举属性的键值对数组
Object.values()
Object.entries()
// ... Object.values(natureColors); // => ['green', 'yellow'] Object.entries(natureColors); // => [ ['colorC', 'green'], ['colorD', 'yellow'] ]
现在注意与for..in语句的区别,for..in不仅可以循环枚举自身属性还可以枚举原型链中的属性
for..in
// ... let enumerableKeys = []; for (let key in natureColors) { enumerableKeys.push(key); } enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']
enumerableKeys数组包含natureColors自身属性键: 'colorC'和'colorD'。
enumerableKeys
'colorC'
'colorD'
另外for..in也遍历了从simpleColors原型对象继承的属性
**Object.values()**方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
for-in
来个例子,使用Object.keys()收集keys,然后通过 key 去对象取对应的值:
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循环获取对象键值。
meal
Object.keys(meals)
for..of
代码看起来很简单,但是,let mealName = meals[key] 没有多大的必要,可以进一步优化,如下:
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.values(meals)
mealName
**Object.entries()**方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
Object.entries() 返回键值对数组,如 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。
[ [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
(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.values()
Map.prototype.entries() 等价于Object.entries()
Map.prototype.entries()
map是普通对象的改进版本,可以获取 map 的大小(对于普通对象,必须手动获取),并使用任意对象类型作为键(普通对象使用字符串基元类型作为键)。
map
让我们看看返回.values()和.entries()的map的方法:
.values()
.entries()
// ... [...greetingsMap.values()]; // => ['Good morning', 'Good day', 'Good evening'] [...greetingsMap.entries()]; // => [ ['morning', 'Good morning'], ['midday', 'Good day'], // ['evening', 'Good evening'] ]
注意,greetingsMap.values()和greetingsMap.entries()返回迭代器对象。若要将结果放入数组,扩展运算符…是必要的。
greetingsMap.values()
greetingsMap.entries()
…
JS 对象是简单的键值映射,因此,对象中属性的顺序是微不足道的, 在大多数情况下,不应该依赖它。
在ES5和早期标准中,根本没有指定属性的顺序。
然而,从ES 6开始,属性的顺序是基于一个特殊的规则的,除非特指按照时间排序。通过两个新方法Object.getOwnPropertyNames和Reflect.ownKeys来编写示例讲解这一属性排序规则。
Object.getOwnPropertyNames
Reflect.ownKeys
如果需要有序集合,建议将数据存储到数组或Set中。
Set
Object.values() 和Object.entries() 是为JS开发人员提供新的标准化辅助函数的另一个改进步骤。
Object.entries()最适用于数组解构赋值,其方式是将键和值轻松分配给不同的变量。 此函数还可以轻松地将纯JS对象属性映射到Map对象中。、
注意,Object.values()和Object.entries()返回数据的顺序是不确定的,所以不要依赖该方式。
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
https://github.com/qq449245884/xiaozhi
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
为了保证的可读性,本文采用意译而非直译。
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!
自身可枚举属性
Object.keys()
方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for...in
循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。这是合理的,因为大多数时候只需要关注对象自身的属性。
来看看一个对象拥有自身和继承属性的例子,
Object.keys()
只返回自己的属性键:Object.keys(natureColors)
返回natureColors
对象的自身可枚举属性键:['colorC','colorD']
。natureColors
包含从simpleColors
原型对象继承的属性,但是Object.keys()
函数会跳过它们。Object.values()
和Object.entries()
也都是返回一个给定对象自身可枚举属性的键值对数组现在注意与
for..in
语句的区别,for..in
不仅可以循环枚举自身属性还可以枚举原型链中的属性enumerableKeys
数组包含natureColors
自身属性键:'colorC'
和'colorD'
。另外
for..in
也遍历了从simpleColors
原型对象继承的属性2. Object.values() 返回属性值
来个例子,使用
Object.keys()
收集keys
,然后通过key
去对象取对应的值:meal
是一个普通对象。 使用Object.keys(meals)
和枚举的for..of
循环获取对象键值。代码看起来很简单,但是,
let mealName = meals[key]
没有多大的必要,可以进一步优化,如下:因为
Object.values(meals)
返回数组中的对象属性值,所以可以直接在for..of
中简化。mealName
直接在循环中赋值。Object.entries()
Object.entries()
返回键值对数组,如[ [key1, value1], [key2, value2], ..., [keyN, valueN] ]
。可能直接使用这些键值对不怎么方便,但可以通过数组解构赋值方式访问键和值就变得非常容易,如下所示:
如上所示,因为
Object.entries()
返回一个与数组解构赋值兼容的集合,因此不需要为赋值或声明添加额外的行。当普通对象要转换成
Map
时Object.entries()
就很有用,因为Object.entries()
返回的格式与Map
构造函数接受的格式完全相同:(key,value)
。使用常规的
Map
构造函数可以将一个二维键值对数组转换成一个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()
和greetingsMap.entries()
返回迭代器对象。若要将结果放入数组,扩展运算符…
是必要的。对象属性的顺序
JS 对象是简单的键值映射,因此,对象中属性的顺序是微不足道的, 在大多数情况下,不应该依赖它。
在ES5和早期标准中,根本没有指定属性的顺序。
然而,从ES 6开始,属性的顺序是基于一个特殊的规则的,除非特指按照时间排序。通过两个新方法
Object.getOwnPropertyNames
和Reflect.ownKeys
来编写示例讲解这一属性排序规则。如果需要有序集合,建议将数据存储到数组或
Set
中。总结
Object.values()
和Object.entries()
是为JS开发人员提供新的标准化辅助函数的另一个改进步骤。Object.entries()
最适用于数组解构赋值,其方式是将键和值轻松分配给不同的变量。 此函数还可以轻松地将纯JS对象属性映射到Map
对象中。、注意,
Object.values()
和Object.entries()
返回数据的顺序是不确定的,所以不要依赖该方式。交流
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
The text was updated successfully, but these errors were encountered: