[JS] 配列の操作まとめ(要素の追加、削除他)

Javascriptの配列操作方法まとめ

Javascriptでの配列に対する操作方法をまとめます。

配列の生成

配列を生成するには Arrayコンストラクタ もしくは 配列リテラル を使います。

コンストラクタによる生成

new Array(n) で要素数nの配列を生成できます。
new Array(item1, item2, …) で配列の生成と同時に値を初期化します。引数なしの場合、空の配列を生成します。

例：

// 要素数10の配列を生成
var ary1 = new Array(10);
// 要素数3の配列を生成し、値を "a", "b", "c" で初期化
var ary2 = new Array("a", "b", "c");

配列リテラルによる初期化

[“a”, “b”, …] のように、括弧[]の中にカンマ区切りで要素の値を書くことで、配列の要素の値を初期化することができます。

例：

// 要素0～5の配列を生成
var ary = [0, 1, 2, 3, 4, 5];

配列の要素の追加・削除

末尾に要素追加 – push

push(item) で item を配列の末尾に追加することができます。返り値は要素追加後の配列の要素数です。

例：

var ary = ["a", "b", "c"];
ary.push("d");      // "d" を追加
ary.push("e", "f"); // 複数まとめて追加も可能
console.log(ary);   // ["a", "b", "c", "d", "e", "f"]

末尾の要素を取り出す – pop

pop() で配列の末尾にある要素を取り出せます。配列の末尾の要素を削除し、返り値とします。なので実行後、配列の要素が一つ減ります。

例：

var ary = ["a", "b", "c"];
var c = ary.pop();    // 末尾の要素 "c" を取り出す
console.log(ary);     // ["a", "b"]

先頭に要素の削除 – shift

shift() で配列の先頭要素を取り出せます。配列の先頭の要素を削除し、返り値とします。つまり pop の先頭要素版です。

例：

var ary = ["a", "b", "c"];
var a = ary.shift();    // 先頭の要素 "a" を取り出す
console.log(ary);       // ["b", "c"]

先頭に要素の追加 – unshift

unshift() は配列の先頭に要素を追加します。push の先頭要素版です。返り値は要素追加後の配列の要素数です。

例：

var ary = ["d"];
ary.unshift("c");       // 先頭に要素 "c" を追加
ary.unshift("a", "b");  // 先頭に要素 "a", "b" を追加
console.log(ary);       // ["a", "b", "c", "d"]

配列の結合

非破壊的結合 – concat

ary1.concat(ary2) で配列ary1 の末尾に 配列ary2の要素をすべて結合した新しい配列を生成し返します。もとの配列には影響を及ぼしません。

例：

var ary1 = [1, 2, 3];
var ary2 = [4, 5];
var ary = ary1.concat(ary2);
console.log(ary1);      // [1, 2, 3]
console.log(ary2);      // [4, 5]
console.log(ary);       // [1, 2, 3, 4, 5]

破壊的結合 – Array.prototype.push.apply(ary1, ary2)

配列ary1 に 配列ary2 を結合します。新しい配列を生成するのではなく、配列ary1の内容を更新します。返り値は結合後の配列ary1の要素数です。

例：

var ary1 = [1, 2, 3];
var ary2 = [4, 5];
Array.prototype.push.apply(ary1, ary2);
console.log(ary1);      // [1, 2, 3, 4, 5]
console.log(ary2);      // [4, 5]

配列の切り出し – slice

slice(begin, end) は配列の一部を切り出して新しい配列を生成し返します。もとの配列に影響はありません。
begin は どこから切り出すかをインデックスで指定します。
end は どこまで切り出すかを指定するインデックスを指定します。ただし end の直前までで end 自体の要素は含みません。

begin, end はともに省略可能です。end を省略すると末尾までが対象となります。start を省略すると先頭から対象となります。

例：

var ary = [0, 1, 2, 3, 4, 5];
var ary1 = ary.slice(2, 4);
var ary2 = ary.slice(4);
console.log(ary1);      // [2, 3]
console.log(ary2);      // [4, 5]

配列の値コピー

slice は元の配列から取り出された要素のコピーを含むシャローコピー（ 1 段階の深さのコピー）を返します。なので配列を単純に代入してコピ－しようとすると、参照のコピーとなりますが、文字列や数値についてであれば、slice で配列全体をコピーすれば、配列の値コピーができます。生成された新しい配列はもとの配列とは別のものになります。

例：

var ary = [0, 1, 2];
var ary1 = ary;         // 配列の参照コピー
var ary2 = ary.slice(); // 配列の値コピー
ary1.push(3);
ary2.pop();
// ary と ary1 は同じ ary2 は別物
console.log(ary);       // [0, 1, 2, 3]
console.log(ary1);      // [0, 1, 2, 3]
console.log(ary2);      // [0, 1]