aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/javascript/reference/global_objects/array/splice/index.html
blob: 17e617d5d7e86a230de711d9cbc7ce574c76e3df (plain)
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
158
---
title: Array.prototype.splice()
slug: Web/JavaScript/Reference/Global_Objects/Array/splice
tags:
  - Array
  - JavaScript
  - Method
  - Prototype
  - Reference
  - remove
  - replace
  - splice
  - プロトタイプ
  - メソッド
translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
---
<div>{{JSRef}}</div>

<p><strong><code>splice()</code></strong> メソッドは、<a href="https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0">in place</a> で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。</p>

<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate">let <var>arrDeletedItems</var> = <var>array</var>.splice(<var>start</var>[, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]])
</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<dl>
 <dt><code><var>start</var></code></dt>
 <dd>配列を変更する開始位置を表すインデックスです。</dd>
 <dd>値が配列の長さより大きい場合は、<code><var>start</var></code> は配列の長さに設定されます。この場合、削除される要素はありませんが、このメソッドは追加関数として動作し、提供された item[n*] の数だけ要素を追加します。</dd>
 <dd>値が負数の場合は、配列の末尾から要素数を戻ったところから始まります (<code>-1</code> が原点で、<code>-<var>n</var></code> は最後の要素から <code><var>n</var></code> 番目であることを意味し、したがってインデックスが <code><var>array</var>.length - <var>n</var></code> であるのと同等です)。</dd>
 <dd><code><var>start</var></code> の絶対値が配列の長さよりも大きい場合は、インデックス <code>0</code> から始まります。</dd>
 <dt><code><var>deleteCount</var></code> {{optional_inline}}</dt>
 <dd>配列の <code><var>start</var></code> から取り除く古い要素の数を示す整数です。</dd>
 <dd><code><var>deleteCount</var></code> 引数が省略された場合、または <code>array.length - start</code> 以上 (つまり、<code><var>start</var></code> から始まり、配列に残る要素の数以上の場合) の場合、<code><var>start</var></code> 以降のすべての要素が取り除かれます。</dd>
 <dd>
 <div class="blockIndicator note">
 <p><strong>メモ:</strong> IE8 では、<code><var>deleteCount</var></code> が省略された場合はすべての要素を削除しません。</p>
 </div>
 </dd>
 <dd><code><var>deleteCount</var></code><code>0</code> か負数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります (以下参照)。</dd>
 <dt><code><var>item1</var>, <var>item2</var>, ...</code> {{optional_inline}}</dt>
 <dd>配列に追加する要素で、<code><var>start</var></code> から始まります。要素を指定しなかった場合、<code>splice()</code> は単に配列から要素を取り除きます。</dd>
</dl>

<h3 id="Return_value" name="Return_value">返値</h3>

<p>取り除かれた要素を含む配列です。</p>

<p>要素が 1 つのみ削除された場合は、要素数 1 の配列が返されます。</p>

<p>要素が削除されなかった場合、空の配列が返されます。</p>

<h2 id="Description" name="Description">解説</h2>

<p>取り除こうとする要素数と異なる数の要素を挿入するように指定した場合、関数呼び出しが終わったとき配列は初めと異なる長さになります。</p>

<h2 id="Examples" name="Examples"></h2>

<h3 id="Remove_0_zero_elements_before_index_2_and_insert_drum" name="Remove_0_zero_elements_before_index_2_and_insert_drum">index 2 の位置 (3番目の要素の前) から 0 個の要素を削除して "drum" を挿入する</h3>

<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')

// myFish は ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed は [], どの要素も取り除かれていない (空配列) </pre>

<h3 id="Remove_0_zero_elements_before_index_2_and_insert_drum_and_guitar" name="Remove_0_zero_elements_before_index_2_and_insert_drum_and_guitar">index 2 の位置 (3 番目の要素の前) から 0 個の要素を削除して、"drum" と "guitar" を挿入する</h3>

<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum', 'guitar')

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed
</pre>

<h3 id="Remove_1_element_at_index_3" name="Remove_1_element_at_index_3">index 3 の位置 (4番目の要素) から一つ取り除く</h3>

<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
let removed = myFish.splice(3, 1)

// removed は ["mandarin"]
// myFish は ["angel", "clown", "drum", "sturgeon"]
</pre>

<h3 id="Remove_1_element_at_index_2_and_insert_trumpet" name="Remove_1_element_at_index_2_and_insert_trumpet">index 2 の位置 (3 番目の要素) から 1 つ取り除いて "trumpet" を挿入する</h3>

<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'drum', 'sturgeon']
let removed = myFish.splice(2, 1, 'trumpet')

// myFish は ["angel", "clown", "trumpet", "sturgeon"]
// removed は ["drum"]</pre>

<h3 id="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue" name="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue">index 0 の位置 (先頭の要素) から二つ取り除き、そこへ "parrot" と "anemore" と "blue" を挿入する</h3>

<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'trumpet', 'sturgeon']
let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue')

// myFish は ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed は ["angel", "clown"]</pre>

<h3 id="Remove_2_elements_from_index_2" name="Remove_2_elements_from_index_2">配列長 - 3 の位置 (後ろから 3番目) から 2 つ取り除く</h3>

<pre class="brush: js notranslate">let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']
let removed = myFish.splice(-3, 2)

// myFish は ["parrot", "anemone", "sturgeon"]
// removed は ["blue", "trumpet"]</pre>

<h3 id="Remove_1_element_from_index_-2" name="Remove_1_element_from_index_-2">index -2 の位置 (後ろから 2番目) から 1 つ取り除く</h3>

<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(-2, 1)

// myFish は ["angel", "clown", "sturgeon"]
// removed は ["mandarin"]</pre>

<h3 id="Remove_all_elements_after_index_2_incl." name="Remove_all_elements_after_index_2_incl.">index 2 の位置 (3番目の要素) から末端までを取り除く</h3>

<pre class="brush: js notranslate">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2)

// myFish は ["angel", "clown"]
// removed は ["mandarin", "sturgeon"]</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.splice', 'Array.prototype.splice')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div>
<p>{{Compat("javascript.builtins.Array.splice")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} - 配列末尾の要素の追加 / 削除</li>
 <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} - 配列先頭の要素の追加 / 削除</li>
 <li>{{jsxref("Array.prototype.concat()", "concat()")}} - 配列に他の配列や値をつないでできた新しい配列を返す</li>
</ul>