配列要素変更 push unshift splice

変数を配列にすると要素を増やしたり減らしたり置き換えしたり追加したりとさまざまな操作ができるようになります。今回はそのメソッド（push、unshift、splice）に関して解説しますね。

pushメソッド

push()は配列の最後に要素を追加します。

配列名.push()
//配列を作成
let itm = ["田中", "佐藤", "鈴木", "加藤", "井上"];
//要素を追加する
itm.push("山田");
document.write(itm[5]);

実行するとインデックスの最後5番で「山田」と表示されます。

実際のインデックスを直接記入して追加することもできます。

//配列を作成
let itm = ["田中", "佐藤", "鈴木", "加藤", "井上"];
//要素を追加する
itm[5] = "山田";
document.write(itm[5]);

ただし実際のプログラミングでは配列の要素は変更があったりするとインデックスの番号が重複する可能性があるからおすすめしません。てかやりません。

 

同時に複数の要素を追加することもできます。べんりですね

//配列を作成
let itm = ["田中", "佐藤", "鈴木", "加藤", "井上"];
//要素を追加する
itm.push("山田","山下");
push(要素)
配列要素の一番後ろに要素を追加します。

unshiftメソッド

unshift()は配列の要素の先頭に要素を追加します。

配列名.unshift()
//配列を作成
let itm = ["田中", "佐藤", "鈴木", "加藤", "井上"];
//要素を追加する
itm.unshift("山田");
document.write(itm[0]);

インデックスを0にして実行すると「山田」と表示されます。

unshift(要素)
配列要素の一番先頭に要素を追加します。

spliceメソッド

splice()は配列の要素を入れ替える働きをしますが引数をとるため少しわかりにくいです。

配列名.splice(指定インデックス,項目削除数,追加項目1,追加項目2,・・・)

第1引数は必須です。要素を操作するところの番号を入れます。引数のみ追加するとそれ以降の要素が削除されます。

第2引数はオプションです。指定した場合は第1引数で決めた位置から後ろを削除します。

第3引数以降はオプションです。追加する要素を記入します。

第1引数に数字を入れてみる

第1引数に数字3を入れて実行する

//配列を作成
let itm = ["1番目", "2番目", "3番目", "4番目", "5番目"];
itm.splice(3);
document.write(itm[0], itm[1], itm[2], itm[3], itm[4]);
実行結果
1番目2番目3番目undefinedundefined

「4番目」の文字以降は削除されましたね。undefinedは配列の要素が見つからない場合に表示されます。

第1引数と第2引数を指定してみる

第1引数と第2引数に数字を入れて実行してみます。

//配列を作成
let itm = ["1番目", "2番目", "3番目", "4番目", "5番目"];
itm.splice(3,1);
document.write(itm[0], itm[1], itm[2], itm[3], itm[4]);

実行結果
1番目2番目3番目5番目undefined

インデックス3の「4番目」が1個削除されました。

第1引数と第2引数、第3引数を指定

第2引数を0にした場合

//配列を作成
let itm = ["1番目", "2番目", "3番目", "4番目", "5番目"];
//要素を追加する
itm.splice(3,0,"追加要素");
document.write(itm[0], itm[1], itm[2], itm[3], itm[4],itm[5]);
実行結果
1番目2番目3番目追加要素4番目5番目

文字列「追加要素」が追加されて削除された要素はありません。第2引数に0を指定すると要素の削除はなくそのまま追加されます。

第2引数に3を入れてみる

第1引数と第3引数はそのままで第2引数に1を入れてみます。

//配列を作成
let itm = ["1番目", "2番目", "3番目", "4番目", "5番目"];
//要素を追加する
itm.splice(3, 1, "追加要素");
document.write(itm[0], itm[1], itm[2], itm[3], itm[4], itm[5]);
実行結果
1番目2番目3番目追加要素5番目undefined

インデックス3の場所から要素が1個だけ削除されて項目が追加されています。

第1引数、第2引数、第3引数・・・

第3引数以降は追加する要素を記入します。

//配列を作成
let itm = ["1番目", "2番目", "3番目", "4番目", "5番目"];
//要素を追加する
itm.splice(3, 2, "追加１","追加2","追加3");
document.write(itm[0], itm[1], itm[2], itm[3], itm[4], itm[5]);
実行結果
1番目2番目3番目追加１追加2追加3

上記のようになります。

splice(インデックス指定番号,削除要素数,追加要素1,追加要素2、・・・)
配列要素を指定位置から指定数削除して項目を追加する

以上、spliceメソッドの解説でした。

 

配列には強力なメソッドが沢山用意されています。それほど重要な項目です。

 

このページはこれでおしまいです。

お疲れ様でした！

前のページ　 INDEX　 次のページ

コメント

ホーム