JavaScript 配列とループで使うメソッド一覧

# ループとは
**決まった回数や条件を満たしている間、同じ処理を繰り返し行う場合に使う構文のこと**

##`Array(配列)`

* `push`
    * 引数の値を配列の末尾に代入
* `pop`
    * 配列末尾の値を削除
       * 削除された値は戻り値として返却する
* `shift`
    * 配列先頭の値を削除
* `unshift`
    * 引数の値を配列先頭に代入
* `splice`
    * 第一引数の設定値から第二引数の設定値の長さ分だけ配列を切り取る
    * 第二引数以降に設定の引数は、第一、第二引数で切り取られた場所に代入される
* `concat`
    * 配列の結合
    * ES6からスプレット演算子が使用可能

```javascript
const arry = [1, 2, 3, 4, 5];

arry.push(6)
console.log(arry); // (6) [1, 2, 3, 4, 5, 6]

const result = arry.pop();
console.log(arry, result); // (5) [1, 2, 3, 4, 5] 6

arry.shift();
console.log(arry); // (4) [2, 3, 4, 5]
arry.unshift(1);
console.log(arry); // (5) [1, 2, 3, 4, 5]

// 0番目から1つ配列を切り取る設定
arry.splice(0, 1, 2);
console.log(arry); // (5) [2, 2, 3, 4, 5]

const arry2 = arry.concat([6,7,8]);
console.log(arry2); // (8) [2, 2, 3, 4, 5, 6, 7, 8]
```

##`forEach`
**配列を繰り返し処理するメソッド**

`配列.forEach(functioned (要素, インデックス, 配列) {})`

```javascript
const arry = [1, 2, 3, 4, 5];

arry.forEach(function(value, index) {
  console.log(value); // 1...5までが出力
})
```

##`map`
**元となる配列から新しい配列を生成するためのメソッド**

`配列.map(functioned (要素, インデックス, 配列) {})`

```javascript
const arry = [1, 2, 3, 4, 5];
const newArry = arry.map(function (value, index, array) {
  console.log(value); // 1...5までを繰り返し出力
  console.log(array); // (5) [1, 2, 3, 4, 5]
  return value * 2;
});
console.log(newArry); // (5) [2, 4, 6, 8, 10]
```

- **オブジェクトをループさせる場合**
 - `keys`メソッドでオブジェクトを配列に変換してからループを行う必要がある
 
```javascript
const fruits = { banana: 2, apple: 3, orange: 1 };

const newData = Object.keys(fruits).map((value, index, array) => {
  return value + "s";
});

console.log(Object.keys(fruits)); // (3) ['banana', 'apple', 'orange']
console.log(newData); // (3) ['bananas', 'apples', 'oranges']
```


##`filter`
- 与えられた関数によって実装された処理が`true`の場合、その結果を新しい配列にして返すメソッド
 - `false`の場合、**空の配列`[]`**が返却される

`配列.filter(functioned (要素, インデックス, 配列) {})`

- **配列から奇数の値のみ返却して新しい配列を作成する場合**

```javascript
const arry = [1, 2, 3, 4, 5];
const filterArry = arry.filter((value, index, array) => {
  return value % 2 === 1;
});

console.log(filterArry); // (3) [1, 3, 5]
```

- **`1`以外の要素を格納する場合**

```javascript
const arry = [1, 2, 3, 4, 5];
const filterArry = arry.filter((value) => {
  return value !== 1;
});

console.log(filterArry); // (4) [2, 3, 4, 5]
```

##`reduce`

**配列のすべての要素に対して関数を実行し、単一の値にするメソッド**

- **二次元配列を一次元配列にしたり、オブジェクトの値のインスタンスを返したりと利用範囲が広い**

構文 -> `配列.reduce(functioned (累計値, 要素) {})`

- **配列に格納されている数値の合計値を算出する場合**

```javascript
const arry = [1, 2, 3, 4, 5];

const result = arry.reduce(function(accu, curr) {
  console.log(accu, curr);
  return accu + curr;
})
console.log(result);

// 出力結果
// 1 2
// 3 3
// 6 4
// 10 5
// 15
```

##`sort`
**配列要素の並び順を変更するメソッド**

:::note alert
破壊的メソッドのため、元の配列データを変更してしまう点に注意！
:::

- **昇順にする場合**

```javascript
const data = [1, 4, 2, 5, 3];
const newData = data.sort((a, b) => {
  return a - b;
});

console.log(data);    // (5) [1, 2, 3, 4, 5]
console.log(newData); // (5) [1, 2, 3, 4, 5]
```

- **降順にする場合**

```javascript
const data = [1, 4, 2, 5, 3];
const newData = data.sort((a, b) => {
  return b - a;
});

console.log(data);    // (5) [5, 4, 3, 2, 1]
console.log(newData); // (5) [5, 4, 3, 2, 1]
```

- **元の配列データを残しておきたい場合**
 - `slice`メソッドを間に挟み、配列をコピーしてから作成する

```javascript
const data = [1, 4, 2, 5, 3];
const newData = data.slice().sort((a, b) => {
  return a - b
});

console.log(data);
console.log(newData);
```

##参考教材

https://www.udemy.com/course/javascript-essence