JavaScriptの配列操作 every / some / at / flat / includes

新しいJavaScript構文においては、ループ処理が強化されています。

過去においてループ処理と言えば for や while を使ったものに限定されていましたが、現在は forEach や filter であったり、 for 〜 of のような構文もあります。

こうした配列操作用メソッドで便利なものを紹介します。

すべての要素が条件にマッチするか判定する every

every メソッドは、配列の要素がすべて条件にマッチする場合に true が返ってきます。例えば以下のように書きます。

// 配列
const ary = [0, 2, 4, 6, 8, 10];

// すべて2で割り切れるか判定
const result = ary.every(value => value % 2 === 0);
console.log(result); // => true

同じことを for 文で書くと、以下のようになるでしょう。

コードがずいぶん長くなり、可読性も悪くなります。

// 配列
const ary = [0, 2, 4, 6, 8, 10];

// 結果。初期値をtrueにしておく
let result = true;

for (const value of ary) {
    // 2で割り切れるなら次の要素に
    if (value % 2 === 0) continue;
    // ここに来ると言うことは割り切れない場合
    result = false; // 結果をfalseにする
    break; // ループを抜ける
}

console.log(result);

いずれかの要素がマッチするか判定する some

every は全ての要素でしたが、 some はいずれかの要素さえマッチすれば true になります。

// 配列
const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// どれか1つでも2で割り切れるか判定
const result = ary.some(value => value % 2 === 0);
console.log(result); // => true

これを同じように for 文で書くと、次のようになります。

結果の初期値や、判定時の処理がeveryの時と逆になります。

// 配列
const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 結果。初期値をfalseにしておく
let result = false;

for (const value of ary) {
    // 2で割り切れるなら結果をtrueにして終了
    if (value % 2 === 0) {
        result = true;
        break;
    }
}

console.log(result);

要素を取り出す at

配列の要素を指定する際には [] を使うことが多いでしょう。

同じ操作は、at を使っても同じように操作できます。

しかも、 at の場合は逆順にもデータを取り出せます。

// 配列
const ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

ary[0]; // => 0
ary.at(0); // => 0

ary[ary.length - 1]; // => 10
ary.at(-1); // => 10

入れ子になった配列を展開する flat

配列の中に配列が入った状態（2次元の配列）から1次元配列に展開するのが flat メソッドです。

引数なしで実行すると、2次元から1次元に展開します（つまり3次元だったものは2次元になります）。

さらに、引数を指定することで、何次元まで展開するか指定できます。

// 配列
const ary = [[1, 2], [3, 4], [[5, 6], [7, 8]]];

ary.flat();
// => [1, 2, 3, 4, [5, 6], [7, 8]]

ary.flat(2);
// => [1, 2, 3, 4, 5, 6, 7, 8]

要素が含まれているか判定する includes

配列の中にある要素が含まれているか判定する際、 indexOf を使っている方が多いのではないでしょうか。

includes も同じように要素が含まれているか判定できますが、 indexOf とは異なり true または false で判定できます。

indexOf の場合は -1 より大きいといった判定を書きますが、 includes はそれより可読性が良いです。

以下は配列に 2 という要素が含まれているかどうかの判定処理です。

const ary = [1, 2, 3];

// indexOfを使った判定
console.log(ary.indexOf(2) > -1); // => true

// includesを使った判定
console.log(ary.includes(2)); // => true

まとめ

これらのメソッドでは、他の書き方もできなくはありません。しかし、より簡便に書けますし、可読性も高くなります。

可読性が高ければコーディングミスも減りますし、不具合の入り込む余地も減るでしょう。

ぜひ新しいメソッドを使いこなして、綺麗なコードを書いてください。