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
|
---
title: Array.prototype.concat()
slug: Web/JavaScript/Reference/Global_Objects/Array/concat
translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
---
<div>{{JSRef}}</div>
<p>Phương thức <code><strong>concat()</strong></code> dùng để kết nối 2 hay nhiều mảng với nhau. Phương thức này không làm thay đổi các mảng đã có mà thay vào đó sẽ trả về 1 mảng mới.</p>
<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
<h2 id="Cú_pháp">Cú pháp</h2>
<pre class="syntaxbox">var <var>newArray</var> = <var>oldArray</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre>
<h3 id="Tham_số">Tham số</h3>
<dl>
<dt><code>value<em>N</em></code></dt>
<dd>Các giá trị hay mảng dùng để nối lại với nhau trong mảng mới .</dd>
</dl>
<h3 id="Giá_trị_trả_về">Giá trị trả về</h3>
<p>Một mảng {{jsxref("Array")}} mới.</p>
<h2 id="Mô_tả">Mô tả</h2>
<p>Phương thức <code>concat</code> tạo ra 1 mảng mới bao gồm các phần tử trong đối tượng mà nó được gọi thực thi, và theo thứ tự lần lượt, với mỗi tham số truyền vào là các phần tử của tham số đó (nếu tham số truyền vào là 1 mảng) hoặc là chính tham số đó (nếu tham số truyền vào không phải là 1 mảng). Phương thức này sẽ không thực thi 1 cách đệ quy cho các tham số là mảng lồng nhau.</p>
<p>Phương thức <code>concat</code> không thay đổi <code>this</code> (mảng được gọi thực thi) hay bất cứ mảng được truyền vào làm tham số mà thay vào đó nó sẽ trả về 1 bản sao tham chiếu (shallow copy) bao gồm các bản sao của cùng 1 phần tử được kết hợp từ các mảng ban đầu. Các phần từ của mảng ban đầu được sao chép vào mảng mới như sau: </p>
<ul>
<li>Đối với tham chiếu đối tượng (và không phải đối tượng thực tế): <code>concat</code> sao chép tham chiếu đối tượng vào mảng mới. Cả mảng ban đầu và mảng mới đều tham chiếu tới cùng 1 đối tượng. Nghĩa là nếu đối tượng được tham chiếu tới bị thay đổi thì việc thay đổi đó sẽ ảnh hưởng trong cả mảng ban đầu và mảng mới. Điều này bao gồm các phần tử của các mảng làm tham số cũng đều là mảng. </li>
<li>Đối với dữ liệu kiểu chuỗi(strings), số(numbers), và booleans (không phải là các đối tượng kiểu {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, và {{jsxref("Global_Objects/Boolean", "Boolean")}}): <code>concat</code> sẽ sao chép giá trị của chuỗi, số vào mảng mới.</li>
</ul>
<div class="note">
<p><strong>Chú ý:</strong> Việc ghép nối các mảng hay giá trị sẽ không "đụng chạm" tới các giá trị ban đầu. Hơn nữa, bất cứ thao tác nào trên mảng trả về (ngoại trừ các thao tác trên các phần từ là tham chiếu đối tượng) sẽ không ảnh hưởng tới các mảng ban đầu, và ngược lại.</p>
</div>
<h2 id="Ví_dụ">Ví dụ</h2>
<h3 id="Nối_2_mảng">Nối 2 mảng</h3>
<p>Đoạn mã dưới đây sẽ nối 2 mảng lại với nhau:</p>
<pre class="brush: js">var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]
</pre>
<h3 id="Nối_3_mảng">Nối 3 mảng</h3>
<p>Đoạn mã dưới đây sẽ nối 3 mảng lại với nhau</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);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
</pre>
<h3 id="Nối_các_giá_trị_vào_1_mảng">Nối các giá trị vào 1 mảng</h3>
<p>Đoạn mã sau đây sẽ nối 3 giá trị vào 1 mảng:</p>
<pre class="brush: js">var alpha = ['a', 'b', 'c'];
var alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]
</pre>
<h3 id="Nối_mảng_lồng_nhau">Nối mảng lồng nhau</h3>
<p>Đoạn mã sau đây sẽ nối các mảng lồng nhau và thể hiện sự lưu trữ tham chiếu:</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="Đặc_tả">Đặc tả</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Đặc tả</th>
<th scope="col">Trạng thái</th>
<th scope="col">Ghi chú</th>
</tr>
<tr>
<td>{{SpecName('ES3')}}</td>
<td>{{Spec2('ES3')}}</td>
<td>Định nghĩa lần đầu. Hiện thực trong 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="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2>
<div>
<p>{{Compat("javascript.builtins.Array.concat")}}</p>
</div>
<h2 id="Xem_thêm">Xem thêm</h2>
<ul>
<li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — thêm/xóa phần tử từ cuối mảng</li>
<li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — thêm/xóa các phần tử từ đầu mảng</li>
<li>{{jsxref("Array.splice", "splice")}} — thêm/xóa các phần tử tại vị trí xác định trong mảng</li>
<li>{{jsxref("String.prototype.concat()")}}</li>
<li>{{jsxref("Symbol.isConcatSpreadable")}} – control flattening.</li>
</ul>
|
