-
Notifications
You must be signed in to change notification settings - Fork 0
/
12-1.html
134 lines (121 loc) · 4.02 KB
/
12-1.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
<!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>新標準 ES2018 (ES9)</h2>
<h2 id="12-1">12-1 Spread 展開運算子 / Rest 其餘參數</h2>
<p>
前面章節
<a href="./2-4.html">2-4</a>
有提到展開運算子。當時的特性是針對陣列和函式內傳入參數設計。 在 ES9
新標準中，也開始支援對物件的屬性做操作。案例如下：
</p>
<pre><code class="language-js">
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };
const clonedObj = { ...obj1 };
// Object { foo: 'bar', x: 42 }
const mergedObj = { ...obj1, ...obj2 };
// Object { foo: 'baz', x: 42, y: 13 }
</code></pre>
<p>
針對函式傳入參數做處理。按序引入，並且將剩餘的參數合併成一個變數並裝有其餘參數的陣列。
</p>
<pre><code class="language-js">
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
const merge = (...objects) => ({ ...objects });
const merge2 = (foo,...objects) => {
console.log(foo)
console.log(objects)
};
let mergedObj1 = merge(obj1, obj2);
// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
let mergedObj2 = merge({}, obj1, obj2);
// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }
let merged2Obj1 = merge2(obj1, obj2);
// {foo: 'bar', x: 42}
// [{ foo: 'baz', y: 13 }]
let merged2Obj2 = merge2({}, obj1, obj2);
// {}
// [
// {foo: 'bar', x: 42},
// {foo: 'baz', y: 13}
// ]
</code></pre>
<p>物件操作不能跟陣列混用</p>
<pre><code class="language-js">
const obj = { key1: 'value1' };
const array = [...obj]; // TypeError: obj is not iterable
</code></pre>
<p>深淺拷貝測試 對照 Object.assign()</p>
<pre><code class="language-js">
let baseData = {
test1:123,
test2:'321'
}
Object.assign(baseData,{test3:'1234567'})
// {test1: 123, test2: '321', test3: '1234567'}
const lucy = Object.assign(
{test4:'我們是快樂的好兒童(給我閉嘴！)'},
baseData
)
// {test4: '我們是快樂的好兒童(給我閉嘴！)',
// test1: 123,
// test2: '321',
// test3: '1234567'
// }
let merged = { ...baseData, ...lucy }
// {
// test1: 123
// test2: '321',
// test3: '1234567',
// test4: '我們是快樂的好兒童(給我閉嘴！)'
// }
merged.test1 = '321'
console.log(baseData)
// {test1: 123, test2: '321', test3: '1234567'} 沒有更動原本物件
</code></pre>
<p>資料來源:</p>
<p>
<a
href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Spread_syntax"
>
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/.../Spread_syntax
</a>
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>