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
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です