-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path13-1.html
110 lines (106 loc) · 4 KB
/
13-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
<!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>新標準 ES2019 (ES10)</h2>
<h2 id="13-1">13-1 Array.prototype.flat()</h2>
<p>
flat 的作用就如其名一般，將一個嵌套的陣列壓平，通過傳入一個 depth
參數，可以將指定深度嵌套的陣列解開壓平，最終合並成一個新的陣列回傳。如果不傳遞 depth
參數，默認為 depth 為 1 ，將解開一層的嵌套陣列。如果傳入 Infinity
，則會壓平所有層級的嵌套陣列，最後變成一維陣列。
</p>
<h3>描述</h3>
<p>
<code>flat()</code>
方法屬於複製方法。它不會改變
<code>this</code>
陣列，而是回傳一個淺拷貝，該淺拷貝包含了原始陣列中相同的元素。
</p>
<pre><code class="language-js">
const arr = [1, [2, [3, [4, [5, 6]]]], [7, [8, [9, [10]]]]];
console.log(arr.flat()); // default 解構一層
// [ 1, 2, [ 3, [ 4, [ 5, 6 ] ] ], 7, [ 8, [ 9, [10] ] ] ]
console.log(arr.flat(2));
// [ 1, 2, 3, [ 4, [ 5, 6 ] ], 7, 8, [ 9, [ 10 ] ] ]
console.log(arr.flat(3));
// [ 1, 2, 3, 4, [ 5, 6 ], 7, 8, 9, [ 10 ] ]
console.log(arr.flat(Infinity));
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
</code></pre>
<p>
如果待展開的陣列是稀疏的，
<code>flat()</code>
方法會忽略其中的空槽。例如，如果
<code>depth</code>
是
1，那麽根陣列和第一層嵌套陣列中的空槽都會被忽略，但在更深的嵌套陣列中的空槽則會與這些陣列一起保留。
</p>
<pre><code class="language-js">
const arr2 = [1, , [2, , 3, [4, , 5]], null, undefined];
console.log(arr2.flat());
// [ 1, 2, 3, [ 4, , 5 ], null, undefined ] // 只有空項被忽略
console.log(arr2.flat(Infinity));
// [ 1, 2, 3, 4, 5, null, undefined ]
</code> </pre>
<p>
<code>flat()</code>
方法是通用的。它只需要
<code>this</code>
值具有
<code>length</code>
屬性和整數鍵屬性即可。但是，如果要展開元素，則它們必須是陣列。
</p>
<pre><code class="language-js">
const arrayLike = {
length: 3,
0: [1, 2],
1: { length: 2, 0: 3, 1: 4 }, // 嵌套的類陣列物件不會被壓平
2: 5,
};
console.log(Array.prototype.flat.call(arrayLike));
// [ 1, 2, { '0': 3, '1': 4, length: 2 }, 5 ]
</code> </pre>
<p>資料來源:</p>
<p>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat"
>
https://developer.mozilla.org/.../flat
</a>
</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>