-
Notifications
You must be signed in to change notification settings - Fork 0
/
11-4.html
246 lines (234 loc) · 8.47 KB
/
11-4.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<meta http-equiv="cache-control" content="no-cache" />
<title></title>
<link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="./hightlight/default.min.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/copybutton.css" />
<link rel="stylesheet" href="./css/hightlight.css" />
<script src="./hightlight/hightlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
<script src="./js/gtag.js"></script>
</head>
<body>
<header>
<nav>
<h1>
<span id="toggle-menu"></span>
<a href="index.html"></a>
</h1>
</nav>
</header>
<main>
<aside>
<nav></nav>
</aside>
<article>
<h2 id="11-4">11-4 Object:entries() and values()</h2>
<h3>Object.entries()</h3>
<p>
Object.entries() :
回傳一個由傳入物件自有的可列舉字串鍵屬性的鍵值對組成的陣列。每個鍵值對都是一個包含兩個元素的陣列：第一個元素是屬性的鍵（始終是字串），第二個元素是屬性值。
</p>
<pre><code class="language-js">
const object1 = {
a: 'someString',
b: 42
};
console.log(Object.entries(object1));
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// Expected output:
// [['a', 'someString'], ['b', 42]]
// 'a: someString'
// 'b: 42'
</code></pre>
<p>
Object.entries() 回傳一個陣列，其元素是直接在 object
上找到相應的可列舉字串鍵屬性的鍵值對陣列。這與使用 for...in 迴圈疊代相同，只是使用
for...in 迴圈也列舉原型鏈中的屬性。Object.entries() 回傳的陣列順序和 for...in
迴圈提供的順序相同。如果只需要屬性的鍵，請使用 Object.keys()。如果只需要屬性的值，請使用
Object.values()。
</p>
<h3>通用範例</h3>
<pre><code class="language-js">
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// 類陣列物件
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// 隨機排序的類陣列物件
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
// getFoo 為一個不可列舉的屬性
const myObj = Object.create(
{},
{
getFoo: {
value() {
return this.foo;
},
},
},
);
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
</code></pre>
<h3>用於基本型別中範例</h3>
<p>
非物件參數會強制轉換成物件。只有字串可以有自己的可列舉屬性，所有其他基本類型均回傳一個空陣列。
</p>
<pre><code class="language-js">
// 字串具有索引作為可列舉的自有属性
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
// 其他基本型別沒有自有屬性
console.log(Object.entries(100)); // []
Object.entries(NaN) // []
Object.entries(Math.PI) // []
Object.entries(Infinity) // []
Object.entries(-Infinity) // []
Object.entries(0) // []
Object.entries(-0) // []
Object.entries(false) // []
Object.entries(true) // []
Object.entries('') // []
Object.entries(Symbol()) // []
Object.entries(()=>{}) // []
Object.entries(/^[a-zA-Z0-9]{4,16}$/) // []
Object.entries(null) // TypeError: Cannot convert undefined or null to object
Object.entries(undefined ) // TypeError: Cannot convert undefined or null to object
</code></pre>
<h3>將 Object 轉換成 Map</h3>
<p>
Map() 構造函數接受一個 entries 可疊代物件。使用 Object.entries ，你可以很容易地將 Object
轉換成 Map :
</p>
<pre><code class="language-js">
const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); // Map(2) {'foo' => 'bar', 'baz' => 42}
</code></pre>
<h3>遍歷物件</h3>
<pre><code class="language-js">
// 使用 for...of 迴圈
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'
}
// 使用陣列方法
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // 'a 5', 'b 7', 'c 9'
});
</code></pre>
<h3>其他範例</h3>
<pre><code class="language-js">
// polyfills/Object/entries/tests.js/it
it('accepts number primitives', function() {
if (objectKeysWorksWithPrimitives) {
proclaim.equal(Object.entries(0).length, 0, '0 has zero entries');
proclaim.equal(Object.entries(-0).length, 0, '-0 has zero entries');
proclaim.equal(Object.entries(Infinity).length, 0, 'Infinity has zero entries');
proclaim.equal(Object.entries(-Infinity).length, 0, '-Infinity has zero entries');
proclaim.equal(Object.entries(NaN).length, 0, 'NaN has zero entries');
proclaim.equal(Object.entries(Math.PI).length, 0, 'Math.PI has zero entries');
} else {
this.skip();
}
});
</code></pre>
<h3>Object.values()</h3>
<p>Object.values() : 回傳一個由傳入物件自有的可列舉字串鍵屬性的值組成的陣列。</p>
<pre><code class="language-js">
const object1 = {
a: 'someString',
b: 42,
c: false
};
console.log(Object.values(object1));
// Expected output: Array ['someString', 42, false]
</code></pre>
<p>
Object.values() 回傳一個陣列，其元素是直接在 object 上找到的可列舉字串鍵屬性值。這與使用
for...in 迴圈疊代相同，只是 for...in 迴圈還列舉原型鏈中的屬性。Object.values()
回傳的陣列順序和 for...in 迴圈提供的陣列順序相同。如果需要屬性鍵，請使用
Object.keys()。如果屬性的鍵和值都需要，請使用 Object.entries()。
</p>
<h3>通用範例</h3>
<pre><code class="language-js">
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// 類陣列物件
const arrayLikeObj1 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(arrayLikeObj1)); // ['a', 'b', 'c']
// 具有隨機鍵排序的類陣列物件
// 使用數字鍵對，將按鍵的數字順序回傳值
const arrayLikeObj2 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(arrayLikeObj2)); // ['b', 'c', 'a']
// getFoo 是一個不可列舉的屬性
const myObj = Object.create(
{},
{
getFoo: {
value() {
return this.foo;
},
},
},
);
myObj.foo = 'bar';
console.log(Object.values(myObj)); // ['bar']
</code></pre>
<pre><code class="language-js">
// bin/cli.js/Object.values.reduce
Object.values(commands).reduce(
(memo, { spec }) => ({
...spec,
...memo,
}),
// prettier-ignore
{
'--help': Boolean,
'-h': '--help',
'--version': Boolean,
}
)
</code></pre>
<p>資料來源:</p>
<p>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries"
>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/...entries
</a>
</p>
<p>
<a href="https://www.tabnine.com/code/javascript/query/%22Object.entries%22">
https://www.tabnine.com/code/javascript/....%22Object.entries%22
</a>
</p>
<p>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values"
>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/...values
</a>
</p>
<p>
<a href="https://www.tabnine.com/code/javascript/query/%22Object.values%22">
https://www.tabnine.com/code/javascript/.....values
</a>
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>