-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path13-6.html
154 lines (145 loc) · 5.33 KB
/
13-6.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
<!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="13-6">13-6 Object.fromEntries()</h2>
<p>方法定義</p>
<pre><code class="language-ts">
interface ObjectConstructor {
/**
* Returns an object created by key-value entries for properties and methods
* @param entries An iterable object that contains key-value entries for properties and methods.
*/
fromEntries<T = any>(entries: Iterable<readonly [PropertyKey, T]>): { [k: string]: T };
/**
* Returns an object created by key-value entries for properties and methods
* @param entries An iterable object that contains key-value entries for properties and methods.
*/
fromEntries(entries: Iterable<readonly any[]>): any;
}
</code></pre>
<p>
我們在 ES8 中新增了 Object.entries 方法，可以將物件轉成 entry 陣列。在 ES10 則增加了一個從
entry 陣列生成物件的方法。
</p>
<p>Object.fromEntries() 靜態方法將鍵值配對列表轉換為一個物件。</p>
<pre><code class="language-js">
const entries = new Map([
['foo', 'bar'],
['baz', 42]
]);
const obj = Object.fromEntries(entries);
console.log(obj);
// Expected output: Object { foo: "bar", baz: 42 }
</code></pre>
<p>
Object.fromEntries()
方法接收一個鍵值對列表，並回傳一個新物件，該物件的屬性由這些條目給定。iterable
參數應該是實現了 @@iterator
方法的可疊代物件。該方法回傳一個可疊代物件，產生包含兩個元素的類陣列物件。第一個元素是將用作屬性鍵的值，第二個元素是要與該屬性鍵關聯的值。Object.fromEntries()
是 Object.entries() 的逆操作，只是 Object.entries() 只回傳字串鍵屬性，而
Object.fromEntries() 還可以創建符號鍵屬性。
</p>
<p>
<strong>備注：</strong>
與 Array.from() 不同的是，Object.fromEntries() 不使用 this
的值，因此在另一個構造函數上調用它不會創建該類型的物件。
</p>
<p>以下是相互轉換的範例</p>
<h3>將 Map 轉換成物件</h3>
<pre><code class="language-js">
const map = new Map([
["foo", "bar"],
["baz", 42],
]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
</code></pre>
<h3>將 Array 轉換成物件</h3>
<pre><code class="language-js">
const arr = [
["0", "a"],
["1", "b"],
["2", "c"],
];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
</code></pre>
<h3>物件轉換</h3>
<p>
通過 Object.fromEntries、其逆操作 Object.entries()
和陣列操作方法，你可以像這樣轉換物件達到類似屬性疊代效果：
</p>
<pre><code class="language-js">
const object1 = { a: 1, b: 2, c: 3 };
const object2 = Object.fromEntries(
Object.entries(object1).map(([key, val]) => [key, val * 2]),
);
console.log(object2);
// { a: 2, b: 4, c: 6 }
</code></pre>
<h3>其他示範</h3>
<p>陣列降解。</p>
<pre><code class="language-js">
const arr = [
{ name: `A男`, age: 26 },
{ name: `B男`, age: 18 },
];
const obj3 = Object.fromEntries(arr.map(({ name, age }) => [name, age]));
console.log(obj3);
// { 'A男': 26, 'B男': 18 }
</code></pre>
<p>URLSearchParams 操作</p>
<pre><code class="language-js">
const obj4 = Object.fromEntries(new URLSearchParams(`x=1&y=2`));
console.log(obj4);
// { x: '1', y: '2' }
</code></pre>
<p>資料來源:</p>
<p>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries"
>
https://developer.mozilla.org/.../Object/fromEntries
</a>
</p>
<p>
<a href="https://juejin.cn/post/7023895016384757796">
https://juejin.cn/post/7023895016384757796
</a>
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>