JavaScriptで配列（Array）を操作する方法のまとめ

他の言語だと配列操作はこうなんだけど、JavaScriptだとどう書くんだっけ？そんな時にさっと眺める為の記事です。

目次

• 配列を作成（宣言・初期化）
• 要素を参照
• 要素数を参照（配列の長さ）
• 要素を繰り返し処理（ループ）
• 要素を追加（１つ・複数・配列の要素を追加）
• 要素を削除（１つ・複数・特定の要素を削除）
• 要素を更新（１つ・複数・特定の要素を更新）
• 要素を検索（要素の存在を確認、値と位置を取得）
• 要素を並び変え（昇順ソート・降順ソート・反転）
• 要素を集約（最大・最小・合計・平均・カウント）
• 重複した要素の削除と抽出
• 配列を複製（コピー）
• 配列を結合（連結）
• 配列を分割（切り出し）
• 配列から文字列へ変換
• 配列であるか確認（チェック）

配列を作成（宣言・初期化）

// 配列を作成
let arr = ["A", "B", "C"];
console.log(arr); // ["A", "B", "C"]

// 空の配列を作成
let arr2 = []
console.log(arr2); // []

要素を参照

let arr = ["A", "B", "C"];

// 要素を参照
let v =arr[1];
console.log(v); // B

要素数を参照（配列の長さ）

let arr = ["A", "B", "C"];

// 要素数を参照
let l = arr.length;
console.log(l); // 3

要素を繰り返し処理（ループ）

let arr = ["A", "B", "C"];

// forで繰り返す
for(let i = 0; i < arr.length; i++){
    console.log(i);      // 0 → 1 → 2
    console.log(arr[i]); // A → B → C
}

// forEachで繰り返す
arr.forEach((v, i, a) => {
    console.log(i);      // 0 → 1 → 2
    console.log(v);      // A → B → C
});

要素を追加（１つ・複数・配列の要素を追加）

先頭に１つの要素を追加

let arr = ["A", "B"];

// 先頭に１つの要素を追加
arr.unshift("C");
console.log(arr); // ["C", "A", "B"]

先頭に複数の要素を追加

let arr = ["A", "B"];

// 先頭に複数の要素を追加
arr.unshift("C", "D");
console.log(arr); // ["C", "D", "A", "B"]

先頭に配列の要素を追加

let arr = ["A", "B"];
let arr2 = ["C", "D"];

// 先頭に配列の要素を追加
arr.unshift(...arr2);
console.log(arr); // ["C", "D", "A", "B"]

末尾に１つの要素を追加

let arr = ["A", "B"];

// 末尾に１つの要素を追加
arr.push("C");
console.log(arr); // ["A", "B", "C"]

末尾に複数の要素を追加

let arr = ["A", "B"];

// 末尾に複数の要素を追加
arr.push("C", "D");
console.log(arr); // ["A", "B", "C", "D"]

末尾に配列の要素を追加

let arr = ["A", "B"];
let arr2 = ["C", "D"];

// 末尾に配列の要素を追加
arr.push(...arr2);
console.log(arr); // ["A", "B", "C", "D"]

途中に１つの要素を追加

let arr = ["A", "B"];

// 1番目から要素を0個削除し"C"を追加する
arr.splice(1, 0, "C");
console.log(arr); // ["A", "C", "B"]

途中に複数の要素を追加

let arr = ["A", "B"];

// 1番目から要素を0個削除し"C"と"D"を追加する
arr.splice(1, 0, "C", "D");
console.log(arr); // ["A", "C", "D", "B"]

途中に配列の要素を追加

let arr = ["A", "B"];
let arr2 = ["C", "D"];

// 1番目から要素を0個削除し配列要素を追加する
arr.splice(1, 0, ...arr2);
console.log(arr); // ["A", "C", "D", "B"]

要素を削除（１つ・複数・特定の要素を削除）

先頭から１つの要素を削除

let arr = ["A", "B", "C", "D"];

// 先頭から１つの要素を削除
arr.shift();
console.log(arr); // ["B", "C", "D"]

先頭から複数の要素を削除

let arr = ["A", "B", "C", "D"];

// 0番目から要素を2個削除する
arr.splice(0, 2);
console.log(arr); // ["C", "D"]

末尾から１つの要素を削除

let arr = ["A", "B", "C", "D"];

// 末尾から１つの要素を削除
arr.pop();
console.log(arr); // ["A", "B", "C"]

末尾から複数の要素を削除

let arr = ["A", "B", "C", "D"];

// 末尾より2番目から要素を2個削除する
arr.splice(-2, 2);
console.log(arr); // ["A", "B"]

途中から１つの要素を削除

let arr = ["A", "B", "C", "D"];

// 1番目から要素を1個削除する
arr.splice(1, 1);
console.log(arr); // ["A", "C", "D"]

途中から複数の要素を削除

let arr = ["A", "B", "C", "D"];

// 1番目から要素を2個削除する
arr.splice(1, 2);
console.log(arr); // ["A", "D"]

特定の要素を削除

let arr = ["A", "B", "C", "D"];
let r;

// "A"と"C"を除いた配列を取得
r = arr.filter((v, i, a) => 
    // 条件
    // 要素が"A"かつ"C"ではない
    v !== "A" && v !== "C"
);
console.log(r); // ["B", "D"]

要素を更新（１つ・複数・特定の要素を更新）

１つの要素を更新（置換）

let arr = ["A", "B", "C", "D"];

// １つの要素を更新（置換）
arr[1] = "E";
console.log(arr); // ["A", "E", "C", "D"]

複数の要素を同一の値に更新（置換）

let arr = ["A", "B", "C", "D"];

// 1番目から3番目まで"E"で更新
arr.fill("E", 1, 3);
console.log(arr); // ["A", "E", "E", "D"]

複数の要素を異なる値に更新（置換）

let arr = ["A", "B", "C", "D"];

// 1番目から要素を2個削除し"E"と"F"を追加する
arr.splice(1, 2, "E", "F");
console.log(arr); // ["A", "E", "F", "D"]

特定の要素を更新（置換）

let arr = ["A", "B", "C", "D"];
let r;

// "A"と"C"を"E"に変更した配列を取得
r = arr.map((v, i, a) => 
    // 条件
    // 要素が"A"または"C"のときは"E"にする
    v === "A" || v === "C" ? "E" : v
);
console.log(r); // ["E", "B", "E", "D"]

要素を検索（要素の存在を確認、値と位置を取得）

検索した要素の存在を確認（チェック）

let arr = ["A", "B", "C", "A"];
let r;

// 検索した要素の存在を確認
r = arr.some((v, i, a) => 
    // 条件
    // 要素が"A"である
    v === "A"
);
console.log(r); // true

// 見つからない時、someはfalseを返す
r = arr.some((v, i, a) => 
    v === "D"
);
console.log(r); // false

検索した要素の値を１つ取得

let arr = ["A", "B", "C", "A"];
let r;

// 検索した要素の値を１つ取得
r = arr.find((v, i, a) => 
    // 条件
    // 要素が"A"である
    v === "A"
);
console.log(r); // A

// 見つからない時、findはundefinedを返す
r = arr.find((v, i, a) => 
    v === "D"
);
console.log(r); // undefined

検索した要素の値を全て取得

let arr = ["A", "B", "C", "A"];
let r;

// 検索した要素の値を全て取得
r = arr.filter((v, i, a) => 
    // 条件
    // 要素が"A"である
    v === "A"
);
console.log(r); // ["A", "A"]

// 見つからない時、filterは空の配列を返す
r = arr.filter((v, i, a) => 
    v === "D"
);
console.log(r); // []

検索した要素のインデックスを１つ取得

let arr = ["A", "B", "C", "A"];
let r;

// 検索した要素のインデックスを１つ取得
r = arr.findIndex((v, i, a) => 
    // 条件
    // 要素が"A"である
    v === "A"
);
console.log(r); // 0

// 見つからない時、findIndexは-1を返す
r = arr.findIndex((v, i, a) => 
    v === "D"
);
console.log(r); // -1

検索した要素のインデックスを全て取得

let arr = ["A", "B", "C", "A"];
let r;

// 検索した要素のインデックスを全て取得
r = arr.reduce((c, v, i, a) => {
    // 条件
    // 要素が"A"である
    if(v === "A"){
        c.push(i);
    }
    return c;
},[]);
console.log(r); // [0, 3]

// 見つからない時、この場合は空の配列を返す
r = arr.reduce((c, v, i, a) => {
    if(v === "D"){
        c.push(i);
    }
    return c;
},[]);
console.log(r); // []

要素を並び変え（昇順ソート・降順ソート・反転）

数値の要素を昇順ソート

let arr = [2, 1, 3, 10];

// 数値の要素を昇順ソート
arr.sort((a, b) => 
    a < b ? -1 : 1
);
console.log(arr); // [1, 2, 3, 10]

数値の要素を降順ソート

let arr = [2, 1, 3, 10];

// 数値の要素を降順ソート
arr.sort((a, b) => 
    a > b ? -1 : 1
);
console.log(arr); // [10, 3, 2, 1]

数値の要素を反転ソート

let arr = [2, 1, 3, 10];

// 数値の要素を反転ソート
arr.reverse();
console.log(arr); // [10, 3, 1, 2]

文字列の要素を昇順ソート

let arr = ["B", "A", "C", "b"];

// 文字列の要素を昇順ソート
arr.sort((a, b) => 
  a.toLowerCase() < b.toLowerCase() ? -1 : 1
);
console.log(arr); // ["A", "B", "b", "C"]

文字列の要素を降順ソート

let arr = ["B", "A", "C", "b"];

// 文字列の要素を降順ソート
arr.sort((a, b) => 
  a.toLowerCase() > b.toLowerCase() ? -1 : 1
);
console.log(arr); // ["C", "B", "b", "A"]

文字列の要素を反転ソート

let arr = ["B", "A", "C", "b"];

// 文字列の要素を反転ソート
arr.reverse();
console.log(arr); // ["b", "C", "A", "B"]

要素を集約（最大・最小・合計・平均・カウント）

要素の最大値を取得

let arr = [10, 2, 30, 4];
let r;

// 要素の最大値を取得
r = arr.reduce((c, v, i, a) => 
    c > v ? c : v
);
console.log(r); // 30

要素の最小値を取得

let arr = [10, 2, 30, 4];
let r;

// 要素の最小値を取得
r = arr.reduce((c, v, i, a) => 
    c < v ? c : v
);
console.log(r); // 2

要素の合計値を取得

let arr = [1, 2, 3, 4];
let r;

// 要素の合計値を取得
r = arr.reduce((c, v, i, a) => 
    c + v
, 0);
console.log(r); // 10

要素の平均値を取得

let arr = [1, 2, 3, 4];
let r;

// 要素の平均値を取得
r = arr.reduce((c, v, i, a) => 
    c + v
, 0)/arr.length;
console.log(r); // 2.5

特定の要素の件数を取得（カウント）

let arr = [10, 2, 30, 4];
let r;

// 特定の要素の件数を取得
r = arr.reduce((c, v, i, a) => 
    // 条件
    // 要素が10以上である
    v >= 10 ? c + 1 : c
, 0);
console.log(r); // 2

重複した要素の削除と抽出

重複した要素の削除

let arr = ["B", "A", "A", "C", "B", "A"];
let r;

// 重複した要素の削除
r = arr.filter((v, i, a) => 
    i === a.findIndex((w, j, b) => 
        v === w
    )
);
console.log(r); // ["B", "A", "C"]

重複した要素の抽出

let arr = ["B", "A", "A", "C", "B", "A"];
let r;

// 重複した要素の抽出
r = arr.filter((v, i, a) => 
    0 <= a.findIndex((w, j, b) => 
        v === w &&  i !== j 
    )
);
console.log(r); // ["B", "A", "A", "B", "A"]

配列を複製（コピー）

配列の浅い複製（シャローコピー）

let arr = ["A", "B", "C"];
let r;

// Array.fromで複製
r = Array.from(arr);
console.log(r); // ["A", "B", "C"]

// concatで複製
r = arr.concat();
console.log(r); // ["A", "B", "C"]

// sliceで複製
r = arr.slice();
console.log(r); // ["A", "B", "C"]

配列の深い複製（ディープコピー）

let arr = ["A", "B", "C"];
let r;

// JSON.parseとJSON.stringifyで複製
r = JSON.parse(JSON.stringify(arr));
console.log(r); // ["A", "B", "C"]

配列を結合（連結）

１つの要素を結合

let arr = ["A", "B"];
let r;

// １つの要素を結合した配列を取得
r = arr.concat("C");
console.log(r);// ["A", "B", "C"]

// 元の配列は変化なし
console.log(arr);// ["A", "B"]

複数の要素を結合

let arr = ["A", "B"];
let r;

// 複数の要素を結合した配列を取得
r = arr.concat("C", "D");
console.log(r);// ["A", "B", "C", "D"]

// 元の配列は変化なし
console.log(arr);// ["A", "B"]

１つの配列の要素を結合

let arr = ["A", "B"];
let arr2 = ["C", "D"];
let r;

// １つの配列の要素を結合した配列を取得
r = arr.concat(arr2);
console.log(r);// ["A", "B", "C", "D"]

// 元の配列は変化なし
console.log(arr);// ["A", "B"]

複数の配列の要素を結合

let arr = ["A", "B"];
let arr2 = ["C", "D"];
let arr3 = ["E"];
let r;

// 複数の配列の要素を結合した配列を取得
r = arr.concat(arr2, arr3);
console.log(r);// ["A", "B", "C", "D", "E"]

// 元の配列は変化なし
console.log(arr);// ["A", "B"]

配列を分割（切り出し）

let arr = ["A", "B", "C", "D"];
let r;

// 1番目から3番目の要素（の前）まで分割
r = arr.slice(1, 3);
console.log(r);// ["B", "C"]

// 1番目から最後まで分割
r = arr.slice(1);
console.log(r);// ["B", "C", "D"]

// 元の配列は変化なし
console.log(arr);// ["A", "B", "C", "D"]

配列から文字列へ変換

let arr = ["A", "B", "C"];
let str;

// 区切り文字をカンマで文字列に変換
str = arr.join(",");
console.log(str); // A,B,C

// 区切り文字を空白で文字列に変換
str = arr.join("");
console.log(str); // ABC

配列であるか確認（チェック）

let arr = ["A"];
let str = "A";
let r;

// 変数arrは配列であるか確認
r = Array.isArray(arr);
console.log(r); // true

// 変数strは配列であるか確認
r = Array.isArray(str);
console.log(r); // false

できるだけシンプルにまとめたつもりです！以上です！