JavaScript Array Processing (JavaScript配列処理)

要素数

length

length は Array インスタンスのデータプロパティで、配列の要素の数を表します。値は符号なし 32 ビット整数で、常に配列の最も大きなインデックスよりも数値的に大きくなります。

const array = ["a", "b", "c"];
console.log(array.length);  // Expected output: 3

存在判定

includes()

Array.prototype.includes() - JavaScript | MDN

includes() は Array インスタンスのメソッドで、特定の要素が配列に含まれているかどうかを true または false で返します。

const integers = [1, 2, 3, 4, 5];
console.log(integers.includes(3));  // Expected output: true
console.log(integers.includes(6));  // Expected output: true

const strings = ["a", "b", "c", "d", "e", "f"];
console.log(strings.includes("d")); // Expected output: true
console.log(strings.includes("g")); // Expected output: false

要素連結

join()

Array.prototype.join() - JavaScript | MDN

join() は Array インスタンスのメソッドで、配列の全要素を順に連結した新しい文字列を返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。

const array = ["a", "b", "c", "d", "e"];
console.log(array.join());      // Expected output: "a,b,c,d,e"
console.log(array.join(""));    // Expected output: "abcde"
console.log(array.join(", "));  // Expected output: "a, b, c, d, e"
console.log(array.join("-"));   // Expected output: "a-b-c-d-e"

並び替え

sort()

元の配列が変更されます。

Array.prototype.sort() - JavaScript | MDN

sort() は Array のメソッドで、配列の要素をその場 (in-place) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します...

const numbers = [0, 1, 2, 3, 4, 5, Math.E, Math.PI];
numbers.sort();
console.log(numbers);   // [ 0, 1, 2, 2.718281828459045, 3, 3.141592653589793, 4, 5 ]

numbers.sort((a, b) => b - a);  // Descending order
console.log(numbers);   // [ 5, 4, 3.141592653589793, 3, 2.718281828459045, 2, 1, 0 ]

const strings1 = ["e", "d", "c", "b", "a"];
strings1.sort();
console.log(strings1);   // [ 'a', 'b', 'c', 'd', 'e' ]

const strings2 = ["f", "g", "h", "i", "j"];
strings2.sort((a, b) => (a > b ? -1 : 1));  // Descending order
console.log(strings2);  // [ 'j', 'i', 'h', 'g', 'f' ]

const jsonArray = [
    { "x": "xc", "y": "yc", "z": 0 },
    { "x": "xb", "y": "yb", "z": 1 },
    { "x": "xb", "y": "ya", "z": 0 },
    { "x": "xa", "y": "yb", "z": 1 },
    { "x": "xa", "y": "yb", "z": 0 },
    { "x": "xa", "y": "yb", "z": -1 },
    { "x": "xa", "y": "ya", "z": 1 },
    { "x": "xa", "y": "ya", "z": 0 },
    { "x": "xa", "y": "ya", "z": -1 }
];
jsonArray.sort((a, b) => {
    return a.x < b.x ? -1
            : a.x > b.x ? 1
            : a.y < b.y ? -1
            : a.y > b.y ? 1
            : a.z - b.z
}); // x, y, z: Ascending order
console.log(jsonArray);
//[
//    { x: 'xa', y: 'ya', z: -1 },
//    { x: 'xa', y: 'ya', z: 0 },
//    { x: 'xa', y: 'ya', z: 1 },
//    { x: 'xa', y: 'yb', z: -1 },
//    { x: 'xa', y: 'yb', z: 0 },
//    { x: 'xa', y: 'yb', z: 1 },
//    { x: 'xb', y: 'ya', z: 0 },
//    { x: 'xb', y: 'yb', z: 1 },
//    { x: 'xc', y: 'yc', z: 0 }
//  ]

toSorted()

元の配列を変更せず新しい配列を返します。

Array.prototype.toSorted() - JavaScript | MDN

toSorted() は Array インスタンスのメソッドで、 sort() メソッドに対応するコピーメソッドです。これは、要素を昇順にソートした新しい配列を返します。

const numbers = [5, 4, 3, 2, 1, 0];
const numSorted = numbers.toSorted();
console.log(numbers);   // [ 5, 4, 3, 2, 1, 0 ]
console.log(numSorted); // [ 0, 1, 2, 3, 4, 5 ]

const strings = ["e", "d", "c", "b", "a"];
const strSorted = strings.toSorted();
console.log(strings);   // [ 'e', 'd', 'c', 'b', 'a' ]
console.log(strSorted); // [ 'a', 'b', 'c', 'd', 'e' ]

要素処理

map()

Array.prototype.map() - JavaScript | MDN

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

const integers = [1, 2, 3, 4, 5];
const squared = integers.map((x) => Math.pow(x, 2));
console.log(squared); // Expected output: Array [ 1, 4, 9, 16, 25 ]

要素抽出

filter()

指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

Array.prototype.filter() - JavaScript | MDN

filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

const integers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const even = integers.filter((n) => n % 2 === 0);
console.log(even);      // Expected output: Array [ 2, 4, 6, 8, 10 ]

const odd = integers.filter((n) => n % 2 !== 0);
console.log(odd);       // Expected output: Array [ 1, 3, 5, 7, 9 ]

const strings = ["a", null, "c", undefined, "e", null, "g", undefined];
const filtered = strings.filter((str) => str != null);
console.log(filtered);  // Expected output: Array [ 'a', 'c', 'e', 'g' ]

配列連結

concat()

Array.prototype.concat() - JavaScript | MDN

concat() は Array インスタンスのメソッドで、2 つ以上の配列を結合するために使用します。このメソッドは既存の配列を変更せず、新しい配列を返します。

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = array1.concat(array2);
console.log(array3);    // Expected output: Array ["a", "b", "c", "d", "e", "f"]

条件判定

some()

指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定する。

Array.prototype.some() - JavaScript | MDN

some() は Array インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を...

const integers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const even = (n) => n % 2 === 0;
const odd = (n) => n % 2 !== 0;
const negative = (n) => n < 0;
console.log(integers.some(even));       // Expected output: true
console.log(integers.some(odd));        // Expected output: true
console.log(integers.some(negative));   // Expected output: false

every()

指定された関数で実装されているテストに、配列の中のすべての要素が合格するかどうかを判定する。

Array.prototype.every() - JavaScript | MDN

every() は Array インスタンスのメソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const integer = (x) => x === Math.trunc(x)
const positive = (x) => x > 0;
const negative = (x) => x < 0;
console.log(numbers.every(integer));   // Expected output: true
console.log(numbers.every(positive));  // Expected output: true
console.log(numbers.every(negative));  // Expected output: false

重複排除

Set

const numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
const uniq1 = Array.from(new Set(numbers));
const uniq2 = [...new Set(numbers)];
console.log(uniq1); // [1, 2, 3, 4]
console.log(uniq2); // [1, 2, 3, 4]

参考

JavaScript | MDN

JavaScript (JS) は軽量でインタープリター型（あるいは実行時コンパイルされる）第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くのブラウザー以外の環境、例えば Node.js...

Array - JavaScript | MDN

Array オブジェクトは、他のプログラミング言語の配列と同様に、複数のアイテムの集合を単一の変数名の下に格納することができ、共通の配列操作を行うためのメンバーを持っています。

ハンズオンNode.js

Node.jsの入門書。対象読者は、フロントエンド開発の知識はあってもサーバサイド開発は知らないエンジニアや、他言語の経験はあってもNode.jsは触ったことがないプログラマー。本書ではターミナルのプロンプトにコマンドを入力してその反応を確...