JavaScript: 配列の要素の追加と削除

このページではJavaScriptにおける、配列の要素の追加と削除について説明します。 まずは配列のメソッドを使わない方法、次にメソッドを使った追加と削除の方法を説明します。

追加

配列に要素を追加するには下のプログラムのように新しいインデックスに値を設定します。 JavaScriptの配列は動的なので、この場合でも配列を再割り当てする必要はありません。

// 要素数2の配列
var arr = [1,3];

// 新しいインデックスに値を設定
arr[2] = 5;   // 要素数は3

削除

配列の末尾の要素を削除するなら配列のlengthプロパティに値を設定することで削除できます。 下のプログラムは要素数3の配列の末尾を削除し、要素数2の配列へと変更しています。

var arr = [1,3,5];  // 要素数3の配列

arr.length = 2;      // 末尾の要素を削除

console.log(arr);    // Array[ 1, 3]

メソッドを使った追加と削除

メソッドを使っての追加と削除もできます。

  • push() --> 末尾に追加
  • pop() --> 末尾の要素を削除
  • unshift() --> 先頭に追加
  • shift() --> 先頭を削除

整理すると表のようになります

追加 削除
末尾 push() pop()
先頭 unshift() shift()

それぞれのメソッドの例は下のようになります。

var arr = [1,3];

arr.push(5);       // 末尾に追加

console.log(arr);  // [ 1, 3, 5 ]

arr.pop();         // 末尾の要素を削除

console.log(arr);  // [ 1, 3 ]

arr.unshift(9);    // 先頭に追加

console.log(arr);  // [ 9, 1, 3 ]

arr.shift();       // 先頭の要素を削除

console.log(arr);  // [ 1, 3 ]

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト