配列について【 forEach .filter .map .sort 偏】

はじめに

今回は配列の要素を効率よく操作するためのループ処理について、アウトプットの為に書いて詳しく書いていきたいと思います。

配列要素を繰り返し処理する（forEach）

forEachは、配列データに対してのみ実行することが可能で、各要素1つずつに任意の処理を実行させることができます。

###基本的な構文と使い方

• 一般的な使い方としては、配列.forEach( 処理 )のように配列データに対してforEachを実行します。
• forEach文は、配列データの値1つずつに対してコールバック関数に記述した処理を実行できます。
• コールバック関数は、いくつか引数を受けとることが可能で、これにより簡単な繰り返し処理を実現しています。

(書き方の例)

const array = [配列データ];
array.forEach( コールバック関数 )

###配列の中身を取得する
まず一つ目はvalueを使って、配列をループさせながら中身の要素を取得する書き方を説明します。

• for文と違って、繰り返し回数やカウンタ変数などをまったく意識せずに扱えるので、非常にシンプルにコードが書けるのが特徴です。

（例）

const animals = ['イヌ', 'オオカミ', 'ハムスター','キリン','ネズミ'];
animals.forEach(function( value ) {
     console.log( value );
});

実行結果

イヌ 
オオカミ
ハムスター
キリン
ネズミ

このプログラムは、配列を使い、それぞれの名称をコンソールログで表示するという内容です。コールバック関数の引数としてvalueを設定していますが、この変数に配列の値となる名称が１つずつ代入されるようになります。
###コールバック関数の使い方
コールバック関数の引数として3つの値を受け取ることができます。

1. value：配列データの値
2. index：配列のインデックス番号
3. array：現在処理している配列
があります。
例として、配列の元データをすべて2倍にして上書きするプログラムを書いてみます。

const numbers = [ 1, 2, 3, 4, 5, 6, 7, 8 ]; 
numbers.forEach( function( value, index, array ) {
  array[ index ] = value * 2;
});
console.log( numbers );

出力結果

[ 2,  4,  6,  8, 10, 12, 14, 16 ]

このプログラムは「value」を倍にしてから、「array」で、現在処理している配列の元データからarray[ index ]に格納し直しています。

###forEach文ではbreakやcontinueは使えない！
forEachはfor文と違い、繰り返し処理を中断するbreakやcontinueが使えません。
もし使った場合、繰り返し処理を中断しようとしますが利用できないため出力出来ずはエラーとなってしまいます。

#配列要素を抽出する(filter)
次にfilterについて説明します

• 「filter」は、特定の条件を与えて配列データを取得したい内容を「コールバック関数」に書きます。
• またfilterのコールバック関数の引数も**【 value(配列の値)index(配列のインデックス番号)array(現在処理) 】**の3つがあります。
• 任意のデータを抽出して新しい配列を生成することができます。

（例）

//5よりも小さい数値だけを抽出する場合
const items = [5,2,7,8,3,1,6,8,4];
const result = items.filter( function( value ){
  return value < 5;
})
console.log( result );

出力結果

[2, 3, 1, 4]

結果を見るとさまざまな数値が格納されている配列の中から、5より小さい数値だけを新しい配列データとして出力することが出来ています。
文字列の場合も同じで、任意の文字列を抽出することができます。

処理した要素を新しい配列で作成する(map)

今度は、mapによる配列処理について見ていきます。

• map関数は各要素に対して決まった繰り返し処理をして、新しい配列を生成するのに使える便利な関数です
• mapはforEachとよく似ていますが、最終的に新しい配列として生成してくれる点が大きく異なります。
• またコールバック関数の引数は上2つと同様、【 value(配列の値)index(配列のインデックス番号)array(現在処理) 】の3つがあります

（例）

//各要素を二乗した配列を作る
const list = [1,2,3,4,5,6];
const newList = list.map(function(item){
    return item**2;
});
console.log(newList);

出力結果

[ 1, 4, 9, 16, 25, 36 ]

returnされたものが新しい配列の要素一つになっていることが分かります。
#配列を並び替えする方法（sort)

• 配列要素はsort()メソッドを利用することで、効率よく並び替えを行うことができます。
• 文字列順や数字の大小などによる昇順・降順で対象の値を並び替えることができるようになるので、データの操作などでよく使われます。
• 数値やオブジェクト構造などの場合だと、sort()をそのまま実行しても上手く行かないので**比較関数(function compareFunc)**を使う必要があります。
• 「比較関数」は、2つの値を比較しながら1つずつ順番を入れ替えていく手法をとっています。

(例)

//1.文字の場合
const array = ['c', 'a', 'b', 'd'];
array.sort();
console.log(array);

//2.数字を降順でソートする方法
function compareFunc(a, b) {
  return b - a;
}
const numbers = [5, 3, 10, 6, 55];
numbers.sort(compareFunc);
console.log(numbers);

出力結果

//1.文字の場合
[ 'a', 'b', 'c', 'd' ]
//2.数字を降順でソートする方法
[ 55, 10, 6, 5, 3 ]

2.ではreturn b - aとすることで降順でソートすることができています。
**昇順の場合はreturn a - b**とすることができreturnの中身を変えることで応用させることもできます。
しかしsort()は元の配列データを変更してしまう破壊的メソッドでもあるので注意が必要です
#最後に
今回はforEach filter map sortについてご説明しました。4つともうまく使い分けれたらとても便利だなと思いました！

#参考リンク
JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法
【JavaScript】map関数を用いたおしゃれな配列処理
JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）