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

# はじめに
今回は配列の要素を効率よく操作するための<font color="DodgerBlue">**ループ処理**</font>について、アウトプットの為に書いて詳しく書いていきたいと思います。
# 配列要素を繰り返し処理する（forEach）
`forEachは`、<font color="DodgerBlue">**配列データ**</font>に対してのみ実行することが可能で、**各要素1つずつ**に任意の処理を実行させることができます。

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

(書き方の例)

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


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

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

（例）

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

```
イヌ 
オオカミ
ハムスター
キリン
ネズミ
```
 このプログラムは、配列を使い、それぞれの名称をコンソールログで表示するという内容です。コールバック関数の引数としてvalueを設定していますが、この変数に配列の値となる名称が１つずつ代入されるようになります。
###コールバック関数の使い方
コールバック関数の引数として<font color="DodgerBlue">**3つの値**</font>を受け取ることができます。

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

```javascript
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 ]`に格納し直しています。

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

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

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

（例）

```javascript
//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`とよく似ていますが、<font color="DodgerBlue">**最終的に新しい配列**</font>として生成してくれる点が<font color="DodgerBlue">**大きく異なります**</font>。
- またコールバック関数の引数は上2つと同様、【 `value`(配列の値)`index`(配列のインデックス番号)`array`(現在処理) 】の3つがあります

（例）

```javascript
//各要素を二乗した配列を作る
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 ]
```
<font color="DodgerBlue">**returnされたものが新しい配列の要素一つ**</font>になっていることが分かります。
#配列を並び替えする方法（sort)
- 配列要素は`sort()`メソッドを利用することで、**効率よく並び替え**を行うことができます。
- <font color="DodgerBlue">**文字列順や数字の大小などによる昇順・降順で対象の値を並び替える**</font>ことができるようになるので、データの操作などでよく使われます。
- 数値やオブジェクト構造などの場合だと、`sort()`をそのまま実行しても<font color="Red">**上手く行かないので**</font>**比較関数(`function compareFunc`)**を使う必要があります。
- 「比較関数」は、2つの値を比較しながら1つずつ順番を入れ替えていく手法をとっています。

(例)

```javascript

//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`の中身を変えることで応用させることもできます。
<font color="Red">**しかしsort()は元の配列データを変更してしまう破壊的メソッドでもあるので注意が必要です**</font>
#最後に
今回は`forEach` `filter` `map` `sort`についてご説明しました。4つともうまく使い分けれたらとても便利だなと思いました！

#参考リンク
[JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法](https://www.sejuku.net/blog/62904"JavaScript入門】sort()による配列・文字列・オブジェクトのソート方法")
[【JavaScript】map関数を用いたおしゃれな配列処理](https://qiita.com/codeship_tech/items/a4c8ba5d26a09dc79e6a"【JavaScript】map関数を用いたおしゃれな配列処理")
[JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）](https://www.sejuku.net/blog/31746"JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）")