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 ]
末尾を削除
pop()メソッドを使います。pop()メソッドは配列の末尾の要素を取り除き、その要素を返します。なのでpop()メソッドの戻り値は配列末尾の値になります。
let array = [1, 2, 3, 4, 5];
array.pop();
console.log(array);
> [1, 2, 3, 4]
先頭を削除
shift()メソッドを使います。shift()メソッドは配列の先頭の要素を取り除き、その要素を返します。なのでshift()メソッドの戻り値は配列先頭の値になります。
let array = [1, 2, 3, 4, 5];
array.shift();
console.log(array);
> [2, 3, 4, 5]
指定位置の要素を空にする
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
結合
concat() を使って結合する
Array.prototype.concat()を使って配列を結合できます。
結合元の配列は変更されません。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array1); // Array ["a", "b", "c"]
console.log(array2); // Array ["d", "e", "f"]
console.log(array3); // Array ["a", "b", "c", "d", "e", "f"]
スプレッド構文で結合する
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
let array3 = [];
array3 = [...array1, ...array2];
console.log(array3); // Array ["a", "b", "c", "d", "e", "f"]
let array4 = [];
array4 = [...array4, ...array1];
array4 = [...array4, ...array2];
console.log(array4); // Array ["a", "b", "c", "d", "e", "f"]
配列のクリア
配列の要素を全て削除したい場合は、以下のような方法があります。
- splice()
const array = [1, 2, 3]; array.splice(0); console.log(array); > Array [] - length = 0
const array = [1, 2, 3]; array.length = 0; console.log(array); > Array [] - 空配列を代入(変数の宣言がconst以外の場合)
let array = [1, 2, 3]; array = []; console.log(array); > Array []
文字列との変換
文字列を配列にする
Array.from()メソッドを使用して、文字列を配列に分割します。
let array = Array.from("123456");
console.log(array);
> [ '1', '2', '3', '4', '5', '6' ]
配列を文字列にする
join()メソッドを使用します。引数で区切り文字を指定できます。区切り文字に空文字を指定すれば値のみを連結します。
let array = [1, 2, 3, 4, 5];
console.log(array.join());
console.log(array.join('+'));
console.log(array.join(''));
> 1,2,3,4,5
> 1+2+3+4+5
> 12345
