【JavaScript】配列でよく使用する関数まとめ


# 概要
JavaScriptを使用して開発をしている際に、配列でよく使用する関数を項目ごとにまとめました。
各例のトップレベルで下記のコードが定義されている事を前提とします。

```javascript
var arr = [1, 2, 3, 4, 5];
```

# 要素の追加・削除

## pop()/push()

`pop()`: 配列の最後の要素を削除し、その要素を返します。
`push()`: 配列の最後に要素を追加し、新しい配列の要素数を返します。

```javascript
arr.push(6);
console.log(arr); //=> [1, 2, 3, 4, 5, 6]

arr.pop(6);
console.log(arr); //=>  [1, 2, 3, 4, 5]
```

## shift()/unshift()

`shift()`: 配列の先頭の要素を削除し、その要素を返します。
`unshift()`: 配列の先頭に要素を追加し、新しい配列の要素数を返します。

```javascript
arr.unshift(0);
console.log(arr); //=> [0, 1, 2, 3, 4, 5]

arr.shift();
console.log(arr); //=>  [1, 2, 3, 4, 5]
```

## slice()

配列内の一部を切り取り、新しい配列として返します。

```javascript
let a4 = arr.slice(0, 3);
console.log(a4); //=>  [1, 2, 3]
```

## splice()

古い要素の削除しながら、新しい要素を追加することで、配列の内容を変更します。

```JS:基本Syntax
array.splice(index, howMany, Elements)
/**
 index: 配列の変更を開始するインデックスを指定します。
 howMany: 削除する古い配列要素の数を指定します。
 Elements: 追加する要素、または配列を指定します。
**/
```

```javascript
var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');
// インデックス1の0個の要素を入れ替える(インデックス1の場所に要素を追加)
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// インデックス4つ目の1つの要素を入れ替える。
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
```

- [JavaScript - Array splice() Method - Tutorialspoint](https://www.tutorialspoint.com/javascript/array_splice.htm)

## concat()

2つ以上の配列を組み合わせ、組み合わせた配列を返します。

```javascript
let a1 = arr.concat([6, 7]);
console.log(a1); //=> [1, 2, 3, 4, 5, 6, 7]
```

# 要素の繰り返し

## forEach()

与えられた関数を、配列の各要素に対して一度ずつ実行します。

```javascript
function repeat(ele) {
  console.log(ele);
}
arr.forEach(repeat); //=> 1 2 3 4 5
```

# 配列内での検索

## indexOf()

指定されたインデックスの位置にある要素を返す。
見つからなければ`-1`を返します。

```javascript
console.log(arr.indexOf(0)) //=> 1
console.log(arr.indexOf(10)) //=> -1
```

## find()/findIndex()

提供されたテスト関数を満たす配列内の 最初の要素の 
値を返します。

```javascript
console.log(arr.find(num => num > 2)); //=> 3
console.log(arr.findIndex(num => num > 2)); //=> 2
```

## includes()

配列が渡された要素を持つかどうか判定します。

```javascript
console.log(arr.includes(2)); //=> true
```

## filter()

テスト関数を配列の各要素に対して実行し、それに合格した全ての要素からなる新しい配列を返します。

```javascript
let a2 = arr.filter(num => num > 3);
console.log(a2); //=> [4, 5]
```

# 配列を変換する

## map()

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

```javascript
a3 = arr.map(ele => ele - 1);
console.log(a3); //=> [0, 1, 2, 3, 4]
```

## sort()

配列内の要素を並び替えます。

```javascript
let array = [4, 2, 3, 4, 5, 6, 7];
console.log(array.sort()); //=> [2, 3, 4, 4, 5, 6, 7]
```

## reverse()

配列内の要素の順序を反対にします。

```javascript
console.log(arr.reverse()) //=> [5, 4, 3, 2, 1];
```

## reduce()

配列の各要素に対して（引数で与えられた）関数を実行して、単一の値にします。

```javascript:基本Syntax
let value = arr.reduce(function(accumulator, currentItem, index, array) {
  // ...
}, initial);
```

- `accumulator`: それまでの値の累積値
- `currentItem`: 現在値
- `index`: 現在のインデックス
- `array`: ソースの配列


```javascript
let result = arr.reduce((sum, current) => sum + current, 0);

console.log(result); //=> 15
```

# 参考
- [JavaScript Basic Array Functions - DEV Community 👩‍💻👨‍💻](https://dev.to/k_penguin_sato/javascript-array-functions-10ge)
- [w3schools.com](https://www.w3schools.com/jsref/jsref_obj_array.asp)
- [javascript.info](https://javascript.info/array-methods#searching-in-array)