JavaScript の配列の追加・削除操作まとめチートシート

個人的チートシート。splice() の使い方の整理に近い。

目次

• 追加・削除操作のチートシート
• 追加・削除操作に関するメソッド
• 参考

追加・削除操作のチートシート

まずは結論だけ。

「追加」系のメソッドはいずれも、追加したい要素を後続の引数に連ねていけば、一度に複数の要素を追加できる。

以下詳細を説明。

追加・削除操作に関するメソッド

配列に対する要素の追加・削除で使うメソッドの説明。以下のメソッドはいずれも、配列の変数 array 自身に影響を与える破壊的なメソッドだ。

• array.unshift()
  • 概要 : 配列の先頭に引数の要素たちを挿入する。
  • 引数 : 1つ以上、可変。
  • 戻り値 : 追加し終わった配列の長さ (length)。
• array.push()
  • 概要 : 配列の末尾に引数の要素たちを挿入する。
  • 引数 : 1つ以上、可変。
  • 戻り値 : 追加し終わった配列の長さ (length)。
• array.shift()
  • 概要 : 配列の先頭の1要素を削除する。配列の長さは1つ減る。
  • 引数 : なし。
  • 戻り値 : 削除した要素。配列の長さが 0 で、削除した要素がなかった場合は undefined が返る。
• array.pop()
  • 概要 : 配列の末尾の1要素を削除する。配列の長さは1つ減る。
  • 引数 : なし。
  • 戻り値 : 削除した要素。配列の長さが 0 で、削除した要素がなかった場合は undefined が返る。
• array.splice()
  • 概要 : 配列の指定の位置から、指定の数だけ要素を取り除き、指定した要素を追加する。
  • 引数 :
    1. index : 配列を削除・追加し始める添字。
       配列の長さより大きい場合は末尾指定になる。
       負数の場合は配列の末尾からその値を引いた数になる (string.substr() の第1引数や slice() の第2引数と同じ挙動)。
    2. howMany : index の位置から削除する要素数。
       0 の場合は何も削除しない。配列の末尾までの要素数より大きい場合は、index 以降の全ての要素が削除される。
       第1引数のみ指定してこの引数を指定しなかった場合は、index 以降の全ての要素が削除される (undefined を明記した場合は 0 と同じになる)。
    3. 第3引数以降 : index の位置から追加する要素。0個以上を可変引数で指定できる。
  • 戻り値 : 削除した値の配列。削除していない場合は空の配列 []、1つ削除した場合は要素数1の配列 [deletedElement] が返される。

最初は splice が分かりづらいと思う。単語のつづりが slice に似ているが別に関係なく、splice は「繋ぎ合わせる」「解いて組み継ぎする」といった意味の単語で、「削除と追加を同時にできる」もの。追加も削除も splice() だけでできるので、ぜひ覚えておきたい。

• example-splice.js : Array.prototype.splice() の例

const myArray = [ 'AA', 'CC', 'XX', 'EE', 'YY', 'FF' ];

// Insert
const inserted = myArray.splice(1, 0, 'BB');
console.log(inserted);  // []
console.log(myArray);   // [ 'AA', 'BB', 'CC', 'XX', 'EE', 'YY', 'FF' ]

// Replace
const replaced = myArray.splice(3, 1, 'DD');
console.log(replaced);  // [ 'XX' ]
console.log(myArray);   // [ 'AA', 'BB', 'CC', 'DD', 'EE', 'YY', 'FF' ]

// Delete
const deleted = myArray.splice(5, 1);
console.log(deleted);   // [ 'YY' ]
console.log(myArray);   // [ 'AA', 'BB', 'CC', 'DD', 'EE', 'FF' ]

参考

• JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
• Array.prototype.unshift() - JavaScript | MDN
• Array.prototype.push() - JavaScript | MDN
• Array.prototype.shift() - JavaScript | MDN
• Array.prototype.pop() - JavaScript | MDN