JavaScriptで配列の要素を削除する:shift(), pop(), splice()

今回は配列の要素を削除する方法についてご説明したいと思います。配列の要素を削除する方法には、先頭の要素を削除する方法、末尾の要素を削除する方法、任意の位置と数を指定して削除する方法など様々な方法があります。

配列の先頭の要素を削除する方法

配列の先頭の要素を削除するためのshiftというメソッドがあります。

削除対象が先頭の要素と特定している場合は、非常に有効な方法でしょう。

function test2(){
    // 配列の初期化
    var array = ['田中','佐藤','小池','伊藤','鈴木'];

    // 配列の先頭の要素を削除する
    array.shift();

    // 配列の要素数を表示する
    document.write("配列の要素数:" + array.length + "<br>");

    // 配列の要素を順番に表示する
    for (var i = 0; i < array.length; i++) {
        document.write("配列の" + i + "番目の値:" + array[i] + "<br>");
    }
}

上記のプログラムの実行結果は次のようになります。

配列の要素数:4
配列の0番目の値:佐藤
配列の1番目の値:小池
配列の2番目の値:伊藤
配列の3番目の値:鈴木

配列の要素が1つ減って、先頭の要素が削除された事が確認できます。

配列の末尾の要素を削除する方法

次に、配列の一番後ろの要素を削除するためのメソッドpopについて説明します。

// 配列の初期化
var array = ['田中','佐藤','小池','伊藤','鈴木'];

// 配列の先頭の要素を削除する
array.pop();

// 配列の要素数を表示する
document.write("配列の要素数:" + array.length + "<br>");

// 配列の要素を順番に表示する
for (var i=0; i<array.length; i++) {
    document.write("配列の" + i + "番目の値:" + array[i] + "<br>");
}

上記のプログラムの実行結果は次のようになります。

配列の要素数:4
配列の0番目の値:田中
配列の1番目の値:佐藤
配列の2番目の値:小池
配列の3番目の値:伊藤

配列の要素が1つ減って、末尾の要素が削除された事が確認できます。

配列の任意の場所から任意の数だけ要素を削除する方法

今度は、配列の任意の場所と数を指定して、要素を削除するメソッドspliceをご紹介します。

spliceは、配列の何番目にある要素でも好きなだけ削除することができる自由度の高いメソッドです。

先頭や末尾の要素を削除するためのshiftやpopと同じ役割をすることもできるメソッドですから、是非押さえておきましょう。

// 配列の初期化
var array = ['田中','佐藤','小池','伊藤','鈴木'];

// 配列の4番目から1つ要素を削除する
array.splice(3,1);

// 配列の要素数を表示する
document.write("配列の要素数:" + array.length + "<br>");

// 配列の要素を順番に表示する
for (var i=0; i<array.length; i++) {
    document.write("配列の" + i + "番目の値:" + array[i] + "<br>");
}

上記のプログラムの実行結果は次のようになります。

配列の要素数:4
配列の0番目の値:田中
配列の1番目の値:佐藤
配列の2番目の値:小池
配列の3番目の値:鈴木

イベント

2017/12/05(火)
Design Thinking Square