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

スポンサーリンク

関連記事・広告