JavaScriptの配列操作まとめ
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