【厳選】実務で使うJavaScriptの配列メソッドまとめ

この記事ではJavaScriptの配列メソッドを、実務でよく使うものに絞ってご紹介します。

コードサンプルも用いて分かりやすく解説するので、少しでも参考になれば幸いです。

 

 

【厳選】実務で使うJavaScriptの配列メソッドまとめ

以下のJavaScriptの配列メソッドについてそれぞれまとめていきます。

 

 

map

mapは、与えられた関数（コールバック関数）を配列のすべての要素に対して呼び出し、その結果から新しい配列を生成するメソッドです。

 

以下のコードを実行すると、[ 2, 6, 8, 16 ]が出力されます。

const values = [1, 3, 4, 8];

const newValues = values.map((value) => {
  return 2 * value;
})

console.log(newValues);

 

mapは新しい配列を生成するためのメソッドなので、新しい配列を生成する必要がない場合は使う必要はありません。

代わりに forEach や for…of を使うと良いでしょう。

 

filter

filterは配列の中から、提供された関数で実装された条件に合格した要素のみを抽出したシャローコピーを作成するメソッドです。

以下のコードを実行すると、value > 3の条件に合格したvalueだけを格納した配列（[ 4, 8 ]）が出力されます。

const values = [1, 3, 4, 8];

const newValues = values.filter((value) => {
  return value > 3;
})

console.log(newValues);

 

find

findは、提供された関数の条件を満たす配列内の最初の要素を返し、条件を満たす値がない場合はundefinedが返却されます。

 

以下のコードの場合は最初にvalue > 3の条件を満たす4が出力されます。

const values = [1, 3, 4, 8];

const newValues = values.find((value) => {
  return value > 3;
})

console.log(newValues);

 

以下の場合は、条件に当てはまる要素がないため、undefinedが返却されます。

const values = [1, 3, 4, 8];

const newValues = values.find((value) => {
  return value > 8;
})

console.log(newValues);

 

reduce

reduceは、配列のそれぞれの要素に対して、ユーザーが提供したコールバック関数を呼び出します。

その際、直前の要素における計算結果の返り値を渡します。

配列のすべての要素に対して関数を実行した結果が、最終的に出力される値となります。

 

要は、配列の各要素に対して処理をして単一の値を生成したい場合に使えるメソッドです。

 

以下のコードを実行すると、initialValueと配列内の各要素を足し合わせた20が出力されます。

const values = [1, 3, 4, 8];
const initialValue = 4;

const newValues = values.reduce((previousValue, currentValue) => {
  return previousValue + currentValue;
}, initialValue)

console.log(newValues);

 

以下のようにinitialValueを設定しない場合は、配列の0番目の要素がinitialValueとなるため、配列の要素を全て足し合わせた16が出力されます。

const values = [1, 3, 4, 8];

const newValues = values.reduce((previousValue, currentValue) => {
  return previousValue + currentValue;
})

console.log(newValues);

 

flatMap

flatMapは、最初にマッピング関数を使用してそれぞれの要素をマップしたあと、結果を新しい配列内にフラット化します。

用は、map()をした後にreturnされる要素が配列だった場合は展開されるということです。

 

例えば、以下のコードの結果は[ 2, 6, 8, 16 ]になります。

const values = [1, 3, 4, 8];

const newValues = values.flatMap((value) => {
  return [value * 2];
});

console.log(newValues);

 

これをmapで実行した場合は、returnする配列が展開されないので、結果は[ [ 2 ], [ 6 ], [ 8 ], [ 16 ] ]になります。

const values = [1, 3, 4, 8];

const newValues = values.map((value) => {
  return [value * 2];
});

console.log(newValues);

 

また、flatMapを使うことで、以下のように配列の要素を増やすこともできます。

const values = [1, 3, 4, 8];

const newValues = values.flatMap((value) => {
  return [value * 2, value + 1];
});

console.log(newValues);

 

このコードを実行した結果は[ 2, 2, 6, 4, 8, 5, 16, 9 ]になります。

 

forEach

forEachは、与えられたコールバック関数を配列の各要素に対して一度ずつ実行するメソッドです。

以下のコードを実行すると、2,6,8,16がそれぞれ出力されます。

const values = [1, 3, 4, 8];

values.forEach((value) => {
  return console.log(value * 2);
});

 

また、forEachの返り値はundefinedのため、以下のように処理を実行しても、newValuesの値はundefinedとなります。

コールバック関数の結果を格納した新たな配列を得たい場合は、先ほど紹介したmapを使うと良いでしょう。

 

includes

includesは特定の要素が配列に含まれているかどうかを true または false で返却するメソッドです。

以下の処理の場合は配列に3を含むためtrueが出力されます。

const values = [1, 3, 4, 8];

const result = values.includes(3);

console.log(result);

 

以下の場合は配列に2を含まないためfalseが出力されます。

const values = [1, 3, 4, 8];

const result = values.includes(2);

console.log(result);

 

push

pushを使うことで、配列の末尾に1つ以上の要素を追加することができます。

また、戻り値では新しい配列の要素数が返却されます。

 

以下を実行すると、valuesの値は[ 1, 3, 4, 8, 10, 15 ]になり、numberには6が代入されます。

const values = [1, 3, 4, 8];

const number = values.push(10, 15);

console.log(values);
console.log(number);

 

every

everyは、列内のすべての要素が指定された関数で実装された条件に合格するかどうかをテストします。

結果はfalseまたはtrueで返ってきます。

 

例えば以下の実装の場合、配列内の全ての要素が「0より大きい」を満たすため、trueが返ってきます。

const values = [1, 3, 4, 8];

const result = values.every((value) => { 
    return value > 0; 
}); 

console.log(result);

 

以下の実装の場合は、配列内の1が条件を満たさないため、falseが返ってきます。

const values = [1, 3, 4, 8];

const result = values.every((value) => { 
    return value > 1; 
}); 

console.log(result);

 

pop

popは、配列から最後の要素を取り除き、その要素を返します。

以下の実装の場合は、resultには配列の最後の要素である8が入り、valuesは8が取り除かれた結果（[1, 3, 4]）が出力されます。

const values = [1, 3, 4, 8];

const result = values.pop();

console.log(result);
console.log(values);

 

isArray

Array.isArrayは、渡された値がArray（配列）かどうかを判定するメソッドです。

以下の場合は、isArrayの引数に配列が設定されているため、resultはtrueとなります。

const values = [1, 3, 4, 8];

const result = Array.isArray(values);

console.log(result);

 

逆に以下の場合は、isArrayの引数に配列でないものが設定されているためfalseとなります。

const values = 1;

const result = Array.isArray(values);

console.log(result);

 

【厳選】実務で使うJavaScriptの配列メソッドまとめ おわりに

今回は、JavaScriptの配列メソッドとして以下を解説しました。

これだけ押さえておけば、実務で困ることはないので、しっかりとマスターするようにしましょう。

 

今回は以上です。

最後まで読んでいただきありがとうございました。

 

この記事が、JavaScriptの配列メソッドを効率よく学ぶ上で少しでも役に立っていたら幸いです。