以前の記事では配列の初期化について記しましたが、今回は配列の要素に関しての増減などを行う処理についてです。
⇒JavaScript 配列の作成と初期化について
配列を操作するメソッドには以下の様なものがあります。
| メソッド | 構文 | 説明 |
|---|---|---|
| push | Array.push( value, ...) | 配列の最後尾に要素を追加する。(要素は値そのもの、または配列) |
| pop | Array.pop() | 配列の最後尾から要素を削除する。 |
| unshift | Array.unshift( value, ...) | 配列の先頭に要素を追加する。(要素は値そのもの、または配列) |
| shift | Array.shift() | 配列の先頭から要素を削除する。 |
| concat | Array = Array.concat( value, ...) | 配列の最後尾に要素を追加し、結果の配列を返す。 |
| slice | Array = Array.slice( begin [, end] ) | 配列の開始から終了までの要素を別の配列として返す。 終了指定が無い場合は最後の要素までが範囲とする。 (但し終了は含まれない) |
| splice | Array = Array.splice( index, howMany, [element1], ... ) | 指定配列をindexで指定された位置から、howManyで指定された個数分を取除き、要素を追加する。 戻り値：削除された配列を返す。 index：値が配列の長さより大きい場合、配列の長さと同じ値となります。値が負数の場合、配列の終端からその値を引いた数が開始位置となります。 howMany：配列から取り除く古い要素の数を示す整数。howMany が 0 の場合、どの要素も取り除かれません。 |
配列の要素への最後尾への追加と削除、及び先頭への追加と削除の例を示します。 要素の追加は1個のみではなく連続して引数として渡せるため、そのままの順番で配列に追加されます。
配列への要素の追加と削除
//配列の宣言
var arrStr = ["aaaa", "bb", "ccccc"];
console.log(arrStr); // Array(3) [ "aaaa", "bb", "ccccc" ] と表示される
//要素の最後尾追加 : push
arrStr.push("dddd");
console.log(arrStr); // Array(4) [ "aaaa", "bb", "ccccc", "dddd" ] と表示される
//要素の最後尾削除 : pop
arrStr.pop(); // "dddd" 削除
arrStr.pop(); // "ccccc"削除
console.log(arrStr); // Array(2) [ "aaaa", "bb" ] と表示される
//複数要素の先頭追加 : unshift
arrStr.unshift("dddd", "ee");
console.log(arrStr); // Array(4) [ "dddd", "ee", "aaaa", "bb" ] と表示される
//要素の先頭削除 : shift
arrStr.shift(); // "dddd"削除
console.log(arrStr); // Array(3) [ "ee", "aaaa", "bb" ] と表示される
上の例では個別の要素を追加する例でしたが、追加処理の引数として配列そのものを指定できます。 以下にその例を示しますが、追加された配列は最初の配列の中の入れ子での配列になってしまいますので注意が必要です。
配列への配列の追加
//配列の宣言
var arrStr = ["aaaa", "bb", "ccccc"];
console.log(arrStr); // Array(3) [ "aaaa", "bb", "ccccc" ] と表示される
//配列データの最後尾追加 : push (Array())
var arrStr2 = ["111", "222"];
arrStr.push(arrStr2);
console.log(arrStr); // Array(4) [ "aaaa", "bb", "ccccc", ["111", "222"] ] と表示される
この現象を解消する為に concat を使って配列を連結し結果を新しい配列を返す様にします。 concat の戻り値は配列なので新しい配列変数に代入しても、既に在る配列変数に代入することもできます。
配列の連結
//配列の宣言
var arrStr = ["aaaa", "bb", "ccccc"];
console.log(arrStr); // Array(3) [ "aaaa", "bb", "ccccc" ] と表示される
//第2の配列の宣言
var arrStr2 = ["111", "222"];
//配列を連結し、新しい配列にコピー
var arrStr3 = arrStr.concat(arrStr2);
console.log(arrStr3); // Array(5) [ "aaaa", "bb", "ccccc", "111", "222" ] と表示される
//配列を連結し、元の配列を置き換え
var arrStr = arrStr.concat(arrStr2);
console.log(arrStr); // Array(5) [ "aaaa", "bb", "ccccc", "111", "222" ] と表示される
配列の切出しを slice を使って行う例を以下に示します。
配列の切出し
//配列の宣言
var arrStr = ["aaaa", "bb", "ccccc", "d", "eee" ];
console.log(arrStr); // Array(5) [ "aaaa", "bb", "ccccc", "d", "eee" ] と表示される
//開始のみ指定
var arrStr2 = arrStr.slice(1);
console.log(arrStr2); // Array(4) [ "bb", "ccccc", "d", "eee" ] と表示される
//開始、終了指定
var arrStr3 = arrStr.slice(1, 4);
console.log(arrStr3); // Array(3) [ "bb", "ccccc", "d" ] と表示される
//開始、終了指定:終了が範囲を超えた指定
var arrStr4 = arrStr.slice(1, 10);
console.log(arrStr4); // Array(4) [ "bb", "ccccc", "d", "eee" ] と表示される
配列の要素の入替を splice を使って行う例を以下に示します。
配列の要素の入替
//配列の宣言
var arrStr = ["aaaa", "bb", "ccccc", "d", "eee" ];
console.log(arrStr); // Array(5) [ "aaaa", "bb", "ccccc", "d", "eee" ] と表示される
//Index、削除個数、追加要素の指定
var arrStr2 = arrStr.splice(1, 2, "111", "22");
//元の配列の表示
console.log(arrStr); // Array(5) [ "aaaa", "bb", "111", "22", "d", "eee" ] と表示される
//削除された配列の表示
console.log(arrStr2); // Array(2) [ "bb", "ccccc" ] と表示される
PR
コメント