JavaScript 配列要素の操作

配列要素の操作

配列要素を追加したり削除するメソッドや演算子について解説します。

配列要素を追加するメソッド一覧

配列要素を追加する演算子

配列要素を削除するメソット

push【ﾌﾟｯｼｭ】メソッド

配列の最後に要素を追加するには、配列オブジェクトのpush【ﾌﾟｯｼｭ】メソッドを使用します。

push【ﾌﾟｯｼｭ】メソッドの書式

配列オブジェクト.push(追加する要素);

設定値の説明

• 配列オブジェクト
  追加する配列が格納されている配列変数名を指定します。
• 追加する要素
  追加するデータを指定します。

コード例

 var fruit= [ "りんご","みかん","ぶどう"];
       fruit.push("いちご");
       document.write(fruit[3]);

実行結果

pushメソッドによる要素追加イメージ図

unshift【ｱﾝｼﾌﾄ】メソッド

配列の先頭に要素を追加するには、配列オブジェクトのunshift【ｱﾝｼﾌﾄ】メソッドを使用します。

unshift【ｱﾝｼﾌﾄ】メソッドの書式

配列オブジェクト.unshift(追加する要素);

設定値の説明

• 配列オブジェクト
  追加する配列が格納されている配列変数名を指定します。
• 追加する要素
  追加するデータを指定します。

コード例

var fruit= [ "りんご","みかん","ぶどう"];
       fruit.unshift("いちご");
       document.write(fruit[0]);

実行結果

unshiftメソッドによる要素追加イメージ図

スプレッﾄﾞ演算子

スプレッド演算子「…」は、配列要素の任意の場所に配列要素を追加することができます。

スプレッド演算子の書式

配列オブジェクト = [要素1,…配列オブジェクト名,要素2,・・・]

設定値の説明

• 配列オブジェクト
  追加する配列が格納されている配列変数名を指定します
• …配列オブジェクト
  追加したい要素が格納されている配列変数名も前にスプレッド演算子の記号を記述して既存の配列要素の挿入したい場所に記述します。

コード例

 var fruit1=["いちご"]
   var fruit2= [ "りんご",...fruit1,"みかん","ぶどう"];
       document.write(fruit2[1]);

実行結果

スプレッド演算子による要素追加のイメージ図

shift【ｼﾌﾄ】メソッド

配列の先頭要素を削除するには、配列オブジェクトのshift【ｼﾌﾄ】メソッドを使用します。

shift【ｼﾌﾄ】メソッドの書式

配列オブジェクト.shift();

設定値の説明

• 配列オブジェクト
  配列が格納されている配列変数名を指定します
• shift()
  shiftの後の引数「()」の中は何も指定しません。

コード例

 var fruit= [ "りんご","みかん","ぶどう"];
       fruit.shift();
       document.write(fruit[0])

実行結果

shiftメソッドによる先頭要素削除のイメージ図

pop【ﾎﾟｯﾌﾟ】メソッド

配列の最後の要素を削除するには、配列オブジェクトのpop【ﾎﾟｯﾌﾟ】メソッドを使用します。

pop【ﾎﾟｯﾌﾟ】メソッドの書式

配列オブジェクト.pop();

設定値の説明

• 配列オブジェクト
  配列が格納されている配列変数名を指定します
• pop()
  popの後の引数「()」の中は何も指定しません。

コード例

 var fruit= [ "りんご","みかん","ぶどう"];
       fruit.pop();
       document.write(fruit[3])

実行結果

※変数に値が代入されていないことを表すundefined【ｱﾝﾃﾞﾌｧｲﾝﾄﾞ】が出力されます。

popメソッドによる最後の要素削除のイメージ図

splice【ｽﾌﾟﾗｲｽ】

配列の指定の要素から指定数分の要素を削除するには、配列オブジェクトのsplice【ｽﾌﾟﾗｲｽ】】メソッドを使用します。

引数element【ｴﾚﾒﾝﾄ】に要素を指定すると要素を置き換えることもできます。

splice【ｽﾌﾟﾗｲｽ】の書式

[]内は省略可能です。
配列オブジェクト.splice(index[,howMany,element]);

設定値の説明

• 配列オブジェクト
  配列が格納されている配列変数名を指定します
• index（必須）
  削除する先頭の要素の添え字（インデックス）を指定します。
• howMany（省略可）
  削除する先頭の要素からいくつ要素を削除するか指定します。0を指定した場合は要素は1つも削除されません。省略した場合はindexで指定した要素とそれ以降の要素はすべて削除されます。
• element（省略可）
  配列に追加する要素を指定します。省略した場合は単に配列から要素を取り除きます。

コード例

  var fruit= [ "りんご","みかん","ぶどう"];
       fruit.splice(1,1);
       document.write(fruit[1])

実行結果

spliceメソッドによる最後の要素削除のイメージ図

以上で、Javascriptの配列要素の操作についての解説を終了します。ありがとうございました。