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
|
---
title: Array.prototype.concat()
slug: Web/JavaScript/Reference/Global_Objects/Array/concat
tags:
- Array
- JavaScript
- Method
- Prototype
- Reference
- array.concat
- concat
translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
---
<div>{{JSRef}}</div>
<p><code><strong>concat()</strong></code> メソッドは、2つ以上の配列を結合するために使用します。このメソッドは既存の配列を変更せず、新しい配列を返します。</p>
<div>{{EmbedInteractiveExample("pages/js/array-concat.html","shorter")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">const <var>new_array</var> = <var>old_array</var>.concat([<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]]])</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><code>value<em>N</em></code> {{optional_inline}}</dt>
<dd>新しい配列に連結する配列や値です。すべての <code>value<em>N</em></code> 引数が省略された場合、 <code>concat</code> は呼び出された既存の配列のシャローコピーを返します。詳しくは下記の解説をお読みください。</dd>
</dl>
<h3 id="Return_value" name="Return_value">返値</h3>
<p>新しい {{jsxref("Array")}} インスタンス。</p>
<h2 id="Description" name="Description">解説</h2>
<p><code>concat</code> は、メソッドを呼び出した <code>this</code> オブジェクトの要素に、与えられた引数の要素 (引数が配列である場合) または引数そのもの (引数が配列でない場合) が順に続く、新しい配列オブジェクトを生成します。</p>
<p><code>concat</code> は <code>this</code> や引数として与えられた配列を変更しませんが、その代わりに元の配列から結合させた同じ要素のコピーを含むシャローコピー (1 次元の配列要素までの浅いコピー) を返します。元の配列の要素は以下のようにして新しい配列にコピーされます。</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="Examples" name="Examples">例</h2>
<h3 id="2_つの配列を連結させる">2 つの配列を連結させる</h3>
<p>以下のコードは 2 つの配列を連結させます。</p>
<pre class="brush: js notranslate">const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];
letters.concat(numbers);
// result in ['a', 'b', 'c', 1, 2, 3]
</pre>
<h3 id="3_つの配列を連結させる">3 つの配列を連結させる</h3>
<p>以下のコードは 3 つの配列を連結させます。</p>
<pre class="brush: js notranslate">const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const numbers = num1.concat(num2, num3);
console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
</pre>
<h3 id="配列に値を連結させる">配列に値を連結させる</h3>
<p>以下のコードは配列に値を連結させます。</p>
<pre class="brush: js notranslate">const letters = ['a', 'b', 'c'];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]
</pre>
<h3 id="ネストした配列を連結する">ネストした配列を連結する</h3>
<p>以下のコードはネストした配列同士を連結させます。また、元の配列からの参照を保持しています。</p>
<pre class="brush: js notranslate">const num1 = [[1]];
const num2 = [2, [3]];
const numbers = num1.concat(num2);
console.log(numbers);
// results in [[1], 2, [3]]
// num1 の最初の要素を変更します
num1[0].push(4);
console.log(numbers);
// results in [[1, 4], 2, [3]]
</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<p>{{Compat("javascript.builtins.Array.concat")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</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>
|
