【JavaScript】配列系メソッドあれこれ

# **配列に値を追加**

## 末尾に追加（push）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.push('追加した要素');
console.log(array);

//【出力】
//[1, 2, 3, 4, 5, 6, '追加した要素']
```

## 先頭に追加（unshift）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.unshift("追加した要素");
console.log(array);

//【出力】
//['追加した要素', 1, 2, 3, 4, 5, 6]
```

# **配列の値を削除**

## 末尾を削除（pop）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.pop();
console.log(array);

//【出力】
//[1, 2, 3, 4, 5]
```

## 先頭を削除（shift）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.shift();
console.log(array);

//【出力】
//[2, 3, 4, 5, 6]
```

# **配列内部を検索**

## 検索して**最初にマッチしたデータを取り出す（find）**

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.find(v => {
	return v % 2 === 0;
});

//【出力】
//2
```

`find`メソッドは `true`を返すと検索が止まり、要素が見つからなければ `undefined`を返す。

> [Array.prototype.find()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find) 

## 検索してマッチしたデータで配列を作成（filter）

下記コードは `array` のインデックスが `2` より大きいものを抽出し、新たな配列を作成する。

```jsx
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
	return index > 2;
});
console.log(new_array);

//【出力】
//['奈良', '和歌山']
```

`filter` メソッドの各引数には

- 第一引数： `value` は配列の値
- 第二引数： `index`は配列のインデックス番号
- 第三引数： `list`は現在処理している配列

が渡ってくる。

```jsx
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
	console.log(value, index, list);
});

//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
```

> [Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

## ある条件の要素が存在するかどうか判定（some）

指定された条件に、配列内の要素が `１つでも当てはまるか`どうかを判定。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.some(function(item){
	return item === 2;
});
console.log(reslut);

//【出力】
//true
```

- 配列の要素が1つでも条件を満たしていれば`true`を返し、そうでなければ`false`を返す
- 引数`item`には配列の値が渡ってくる

> [Array.prototype.some()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

## ある条件の要素が存在するかどうか判定（every）

指定された条件に、配列内の要素が `全ての要素が当てはまるか`どうかを判定。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
	return item >= 2;
});
console.log(reslut);

//【出力】
//false

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
	return item >= 1;
});
console.log(reslut);

//【出力】
//true
```

- 配列要素の全てが条件を満たしていれば`true`を返し、そうでなければ`false`を返す

> [Array.prototype.every()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)

## ある条件の要素が含まれているかどうか判定（****includes****）

特定の要素が配列に含まれているかどうかを判定。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.includes(5);
console.log(reslut);

//【出力】
//true
```

- 1つでも要素が含まれていれば`true`を返し、そうでなければ`false`を返す

> [Array.prototype.includes()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

# 配列を順番に処理

## **配列を順番に処理（forEach）**

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let sum = 0;
array.forEach(function (v) {
	sum += v;
	console.log(sum);
});

//【出力】
//1
//3
//6
//10
//15
//21
//28
//36
```

`forEach` メソッドの各引数には

- 第一引数： `value` は配列の値
- 第二引数： `index`は配列のインデックス番号
- 第三引数： `list`は現在処理している配列

が渡ってくる。

```jsx
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
array.forEach(function (value, index, list) {
	console.log(value, index, list);
});

//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
```

> Array.prototype.forEach()


# **配列を作成**

## 処理行った要素で新しい配列を作成（map）

`map`メソッドは、`forEach`メソッドに似ているが、それぞれの要素になにかしらの処理をした値で再度、新しい配列を得ることができる。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let new_array = array.map(function(v){
	return v * 2;
});
console.log(new_array);

//【出力】
//[2, 4, 6, 8, 10, 12, 14, 16]
```

`map` メソッドの各引数には

- 第一引数： `value` は配列の値
- 第二引数： `index`は配列のインデックス番号
- 第三引数： `list`は現在処理している配列

が渡ってくる。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
array.map(function(value, index, list){
	console.log(value, index, list);
});

//【出力】
//0 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//1 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//2 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//3 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//4 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//5 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//6 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//7 (8) [1, 2, 3, 4, 5, 6, 7, 8]
```

# reduce()

```jsx
const array = [1, 2, 3, 4];
const result = array.reduce(function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
});

//【出力】
//10
```

- 第三引数`currentIndex`と第四引数、`array`は省略可能

## 処理の流れ

| 関数実行回数 | accumulator | currentValue | currentIndex |
| --- | --- | --- | --- |
| 1回目 | 1 | 2 | 1 |
| 2回目 | 3 | 3 | 2 |
| 3回目 | 6 | 4 | 3 |
- 初めは `accumulator` に `array` の0番目である `1` 、`currentValue` に`array` の1番目である `2` が入る
- `1 + 2` の結果である `3` が2回目の第一引数 `accumulator` に渡る
- 2回目は第一引数`accumulator` に 1回目の `1 + 2` の計算結果である `3` が入り、第二引数`currentValue`には `array` の2番目である `3` が入る
- `3 + 3` の結果である `6`が3回目の第一引数 `accumulator` に渡る
- 3回目は第一引数`accumulator` に 2回目の `3 + 3` の計算結果である `6` が入り、第二引数`currentValue`には `array` の3番目である `4` が入る
- `accumulator` の `6` と`currentValue`の `4` を足して出力は `10` となる

> [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)