はじめに
配列は、どのアプリケーションを製造する上でも必ずといっていいほど利用するオブジェクトの一つです。
本記事では、この配列データの処理方法は15のポイントに分けてまとめました。
配列データを処理する15のポイント
ForEach
ForEachは配列内の各要素をループして取り出します。
const data = [1, 2, 3, 4, 5];
data.forEach(num => console.log(num));
// Console: 1, 2, 3, 4, 5
Filter
FilterはForEachのように各要素をループして値を取り出しますが、その取り出すために条件を指定し、条件に一致したもののみ取り出します。
const data = [1, 2, 3, 4, 5];
const dataFilter = data.filter(num => num % 2 === 0);
console.log(dataFilter);
// Console: [2, 4]
Find
Find関数は、対象配列内に対して条件を満たす最初の要素を検索して出力します。
条件にマッチしない場合は、undefinedが返ります。
const data = [1, 2, 3, 4, 5];
const dataFind = data.find(num => num % 2 === 0);
console.log(dataFind);
// Console: 2
FindIndex
FindIndex関数は、Findと同じように条件を満たす最初の要素のインデックスを返します。
条件にマッチするものが存在しない場合は「-1」を返します。
なお、配列なので、最初のインデックスは0となります。
const data = [1, 2, 3, 4, 5];
const dataFindIdx = data.findIndex(num => num % 2 === 0);
console.log(dataFindIdx);
// Console: 1
Map
Map関数は、配列内の全ての要素に対して、条件にマッチ/アンマッチした結果（true or false）を配列にして出力します。
const data = [1, 2, 3, 4, 5];
const dataMap = data.map(num => num % 2 === 0);
console.log(dataMap);
console.log(dataMap[0]);
// Console: [false, true, false, true, false]
// Console: false
Every
Every関数は、配列内のすべての要素に対して、条件にマッチしているかどうかの結果を返します。
指定した条件にすべての要素がマッチしていた場合は「true」を返し、そうでない場合は「false」を返します。
const data = [1, 2, 3, 4, 5];
const dataEvery1 = data.every(num => num % 2 === 0);
console.log(dataEvery1);
// Console: false
const dataEvery2 = data.every(num => num % 1 === 0);
console.log(dataEvery2);
// Console: true
Reduce
Reduce関数は配列の要素を一つずつ足したり引いたり、描けたりといった配列の中身を一つずつ処理することができる関数です。第一引数にaccumulatorを指定し、第二引数に処理する要素を指定します。
最後の「0」はinitialValueとして最初の実引数として渡される値を指定します。
const data = [1, 2, 3, 4, 5];
const dataReduce = data.reduce((num1, num2) => num1 + num2, 0);
console.log(dataReduce);
// Console: 15
Sort
Sort関数は、配列内の要素を並べ替える場合に利用します。
aとbの二つの要素を比較し、a > b の場合は「1」を返し、bの要素をaの要素の前のインデックスにします。a < bの場合は「-1」を返しaの要素をbの要素の前のインデックスにします。等しい場合は「0」を返し、処理は何もしません。
規定は、文字列比較として昇順となります。
const data = [1, 2, 3, 4, 5];
const dataSort = data.sort((a, b) => b - a);
console.log(dataSort);
// Console: [5, 4, 3, 2, 1]
Some
Some関数は、対象配列に対して、一つでも条件にマッチしている要素が存在した場合は「true」を返し、すべての要素にマッチしない場合は「false」を返します。
const data = [1, 2, 3, 4, 5];
const dataSome1 = data.some(num => num % 2 === 0);
console.log(dataSome1);
// Console: true
const dataSome2 = data.some(num => num % 6 === 0);
console.log(dataSome2);
// Console: false
Includes
Include関数はシンプルに配列内の要素に指定した値が含まれているかどうかをチェックします。(includes関数はECMAScript 2015（ECMAScript 6）から追加された関数なので、古いブラウザでは動作しない場合はあります。)
const data = [1, 2, 3, 4, 5];
const dataInclude1 = data.includes(1);
console.log(dataInclude1);
// Console: true
const dataInclude2 = data.includes(6);
console.log(dataInclude2);
// Console: false
Flat
Flat関数は、配列内に入れ子となっている配列をフラットな状態に変換する関数です。
引数に配列の入れ子の深さを指定することで、その深さまでの配列をフラットな配列に変換してくれます。
const arrInArrData = [[1,2],[[3,4],[5,6]]];
const dataFlat1 = arrInArrData.flat(1);
console.log(dataFlat1);
// Console: [1, 2, Array(2), Array(2)]
const dataFlat2 = arrInArrData.flat(2);
console.log(dataFlat2);
// Console: [1, 2, 3, 4, 5, 6]
Reverse
Reverse関数は単純に配列内の要素の順番を反転させます。
const data = [1, 2, 3, 4, 5];
const dataReverse = data.reverse();
console.log(dataReverse);
// Console: [5, 4, 3, 2, 1]
At
At関数は、配列内の要素に対して指定されたインデックスの要素を返します。
普通に “arr[1]” のように記載するのと変わらないですが、Atの場合は、負のインデックスもサポートしています。
const data = [1, 2, 3, 4, 5];
const dataReverse = data.reverse();
console.log(dataReverse);
// Console: [5, 4, 3, 2, 1]
Concat
Concat関数は、２つの配列を結合する関数です。
const data1 = [1, 2, 3, 4, 5];
const data2 = [6, 7, 8, 9, 10];
const dataConcat = data1.concat(data2);
console.log(dataConcat);
// Console: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Fill
Fill関数は、配列の要素を指定した値にすべて設定します。
const emptyArr = new Array(3);
const dataFill = emptyArr.fill(1);
console.log(dataFill);
// Console: [1, 1, 1]
最後に
配列オブジェクトの扱いは必ず覚えておいて損はないと思います。保存版として是非ご利用ください。
