JavaScript 配列要素の操作

スポンサーリンク
スポンサーリンク

配列要素の操作

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

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

メソッド内容
push【プッシュ】配列要素の最後に要素を追加します。
unshift【アンシフト】配列要素の先頭に要素を追加します。

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

演算子内容
スプレッド(…)配列要素の任意の場所に要素を追加します。

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

メソッド内容
shift【シフト】配列の先頭の要素を削除します。
pop【ポップ】配列の最後の要素を削除します。
splice【スプライス】配列の指定の要素から指定数分の要素を削除します。
また、要素を置き換えることもできます。

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の配列要素の操作についての解説を終了します。
ありがとうございました。

スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク