1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
title: Object.entries()
slug: Web/JavaScript/Reference/Global_Objects/Object/entries
tags:
- JavaScript
- Method
- Object
- Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
---
<div>{{JSRef}}</div>
<p><code><strong>Object.entries()</strong></code>方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 {{jsxref("Statements/for...in", "for...in")}} 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。</p>
<div>{{EmbedInteractiveExample("pages/js/object-entries.html", "taller")}}</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>obj</code></dt>
<dd>可以返回其可枚举属性的键值对的对象。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<dl>
<dd>给定对象自身可枚举属性的键值对数组。</dd>
</dl>
<h2 id="描述">描述</h2>
<p><code>Object.entries()</code>返回一个数组，其元素是与直接在<code>object</code>上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。</p>
<h2 id="示例">示例</h2>
<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}
// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});</pre>
<h3 id="将Object转换为Map">将<code>Object</code>转换为<code>Map</code></h3>
<p>{{jsxref("Map", "new Map()")}} 构造函数接受一个可迭代的<code>entries</code>。借助<code>Object.entries</code>方法你可以很容易的将{{jsxref("Object")}}转换为{{jsxref("Map")}}:</p>
<pre class="brush: js">var obj = { foo: "bar", baz: 42 };
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }</pre>
<h2 id="Polyfill">Polyfill</h2>
<p>要在较旧环境中添加兼容的<code>Object.entries</code>支持，你可以在 <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> 中找到Object.entries的示例（如果你不需要任何对IE的支持），在 <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> 资料库中的一个polyfill，或者你可以使用下面列出的简易 polyfill。</p>
<pre class="brush: js">if (!Object.entries)
Object.entries = function( obj ){
var ownProps = Object.keys( obj ),
i = ownProps.length,
resArray = new Array(i); // preallocate the Array
while (i--)
resArray[i] = [ownProps[i], obj[ownProps[i]]];
return resArray;
};</pre>
<p>对于上述 polyfill 代码片段，如果你需要 IE9 以下的支持，那么你还需要一个 Object.keys polyfill（如 {{jsxref("Object.keys")}}页面上的）。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
<td>{{Spec2('ES8')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{Compat("javascript.builtins.Object.entries")}}</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">属性的可枚举性和所有权</a></li>
<li>{{jsxref("Object.keys()")}}</li>
<li>{{jsxref("Object.values()")}} {{experimental_inline}}</li>
<li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
<li>{{jsxref("Object.create()")}}</li>
<li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
</ul>
|
