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
|
---
title: Array.prototype.concat()
slug: Web/JavaScript/Reference/Global_Objects/Array/concat
tags:
- Array
- JavaScript
- Method
- Prototype
- Reference
- 陣列
translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
---
<div>{{JSRef}}</div>
<p><code><strong>concat()</strong></code> 方法被用來合併兩個或多個陣列。此方法不會改變現有的陣列，回傳一個包含呼叫者陣列本身的值，作為代替的是回傳一個新陣列。</p>
<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
<h2 id="語法">語法</h2>
<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre>
<h3 id="參數">參數</h3>
<dl>
<dt><code>value<em>N</em></code></dt>
<dd>陣列以及／或者值，用來合併成一個新的陣列。請參閱下方詳細資訊描述。</dd>
</dl>
<h3 id="回傳值">回傳值</h3>
<p>一個新的{{jsxref("Array","陣列")}}實體。</p>
<h2 id="描述">描述</h2>
<p><code>concat</code> 產生一個由呼叫者陣列自己的元素，以及對每一個參數按照順序，合併參數的元素（如果參數是個陣列）或者是參數自己本身（如果參數不是一個陣列）成為一個新的陣列。<code>concat</code> 方法不會遞迴巢狀陣列參數。</p>
<p><code>concat</code> 方法不會改變 <code>this</code> 自己本身或是任何被提供當做參數的陣列，取而代之則是回傳一個淺層複製（shallow copy）包含了與原始的陣列中一樣的元素的副本。原始陣列的元素被複製到新的陣列的規則如下所示：</p>
<ul>
<li>物件參考（並非為實際的物件）：<code>concat</code> 複製物件的參考至新的陣列。不管是原始的還是新的陣列都參考到相同的物件。也就是說，如果一個被參照的物件被修改了，變動會同時反映到新的以及原始的陣列中。</li>
<li>資料型態為字串、數值或是布林（非 {{jsxref("Global_Objects/String", "String")}}、{{jsxref("Global_Objects/Number", "Number")}} 及 {{jsxref("Global_Objects/Boolean", "Boolean")}} 物件）：<code>concat</code> 複製字串及數值的值到新的陣列。</li>
</ul>
<div class="note">
<p><strong>備註：</strong>合併（多個）陣列／（多個）值將讓原始的陣列不會被受到影響。此外，任何對新陣列（只有在元素不是物件參考的情況下）的操作都不會影響原始的陣列，反之亦然。</p>
</div>
<h2 id="範例">範例</h2>
<h3 id="合併兩個陣列">合併兩個陣列</h3>
<p>下面的程式碼為合併兩個陣列：</p>
<pre class="brush: js">var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
// 結果: ['a', 'b', 'c', 1, 2, 3]
</pre>
<h3 id="合併三個陣列">合併三個陣列</h3>
<p>下面的程式碼為合併三個陣列：</p>
<pre class="brush: js">var num1 = [1, 2, 3],
num2 = [4, 5, 6],
num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums);
// 結果：[1, 2, 3, 4, 5, 6, 7, 8, 9]
</pre>
<h3 id="合併值到一個陣列">合併值到一個陣列</h3>
<p>下面的程式碼為合併三個值到一個陣列中：</p>
<pre class="brush: js">var alpha = ['a', 'b', 'c'];
var alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric);
// 結果：['a', 'b', 'c', 1, 2, 3]
</pre>
<h3 id="合併巢狀陣列">合併巢狀陣列</h3>
<p>下面的程式碼為合併巢狀陣列，並證明保留了原本的參考（references）：</p>
<pre class="brush: js">var num1 = [[1]];
var num2 = [2, [3]];
var nums = num1.concat(num2);
console.log(nums);
// results in [[1], 2, [3]]
// modify the first element of num1
num1[0].push(4);
console.log(nums);
// results in [[1, 4], 2, [3]]
</pre>
<h2 id="規格">規格</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">規格</th>
<th scope="col">狀態</th>
<th scope="col">備註</th>
</tr>
<tr>
<td>{{SpecName('ES3')}}</td>
<td>{{Spec2('ES3')}}</td>
<td>首次定義。實作於 JavaScript 1.2。</td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<div>
<p>{{Compat("javascript.builtins.Array.concat")}}</p>
</div>
<h2 id="參見">參見</h2>
<ul>
<li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — 從陣列的尾端加入/移除元素</li>
<li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — 從陣列的前端加入/移除元素</li>
<li>{{jsxref("Array.splice", "splice")}} — 從陣列特定的位置加入/移除元素</li>
<li>{{jsxref("String.prototype.concat()")}}</li>
<li>{{jsxref("Symbol.isConcatSpreadable")}} – 控制扁平化</li>
</ul>
|
