JavaScriptの配列操作まとめ

2020.07.13 2020.07.30

JavaScriptを書いていると配列の操作(特にループ)が分からなくなるので、よく使う処理をまとめてみました。

定義

まずは基本的な定義方法。

let array = ["A", "B", "C", "BB", "B"];
console.log(array);

> [ 'A', 'B', 'C', 'BB', 'B' ]

要素数を取得

lengthで取得します。

let array = ["A", "B", "C", "BB", "B"];
console.log(array.length);

> 5

抽出

特定の値だけを抽出したい場合。filter()メソッドを使います。

let array = ["A", "B", "C", "BB", "B"];

array = array.filter(v => v === "B");
console.log(array);

> [ 'B', 'B' ]

let array = ["A", "B", "C", "BB", "B"];

array = array.filter(v => v !== "B");
console.log(array);

> [ 'A', 'C', 'BB' ]

ループ

いくつか方法があって、得られる値も異なるので注意。

for 文

よくあるカウンタを使って回すパターンですね。

let array = [1, 2, 3];

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

> 1
> 2
> 3

for…in 文

順序不定でインデックスを取得します。

let array = [1, 2, 3];

for (let i in array) {
    console.log("array[%s]=%s", i, array[i]);
}

> array[0]=1
> array[1]=2
> array[2]=3

for…of 文

先頭から順に要素を取り出します。

let array = [1, 3, 2];

for (let item of array) {
    console.log(item);
}

> 1
> 3
> 2

forEach() メソッド

配列の各要素に対して関数を実行します。

let array = [1, 3, 2];

array.forEach(function(item)　{
    console.log(item);
});

> 1
> 3
> 2

追加

先頭に追加

unshift()メソッドを使います。1つ以上の要素を追加できます。

let array = [1, 2, 3];
array.unshift('c');
console.log(array);

array.unshift('a', 'b');
console.log(array);

> [ 'c', 1, 2, 3 ]
> [ 'a', 'b', 'c', 1, 2, 3 ]

末尾に追加

push()メソッドを使います。1つ以上の要素を追加できます。

let array = [1, 2, 3];
array.push('a');
console.log(array);

array.push('b', 'c');
console.log(array);

> [ 1, 2, 3, 'a' ]
> [ 1, 2, 3, 'a', 'b', 'c' ]

指定位置に挿入

splice()メソッドで削除要素数を0にすることで要素の挿入が可能です。splice()メソッドについては次の「削除」で説明します。

let array = [1, 2, 3];
array.splice(1, 0, 'a');
console.log(array);

> [ 1, 'a', 2, 3 ]

削除

削除の仕方も個人的には特殊と思う。

指定位置から削除

splice()メソッドを使います。削除開始インデックスと削除要素数を指定します。

// インデックス1から1要素削除.
let array = [1, 2, 3];
array.splice(1, 1);
console.log(array);

> [ 1, 3 ]

// インデックス1から1要素削除して新しい要素を追加.
let array = [1, 2, 3];
array.splice(1, 1, 'a', 'b', 'c');
console.log(array);

> [ 1, 'a', 'b', 'c', 3 ]

指定位置の要素を空にする

deleteを使うと、配列の長さを変えずに指定位置の要素を削除できます。

let array = [1, 2, 3];
delete array[1];
console.log(array.length);
console.log(array);
console.log(array[1]);

> 3
> [ 1, <1 empty item>, 3 ]
> undefined