【JavaScript】配列を操作する際よく使うメソッド８つ

## はじめに
JavaScriptで**配列**を操作するメソッドのうち、頻出のもの８つをまとめました。

見返しやすいように、操作する配列は各メソッド毎に記載しています。

## 環境
```yaml
OS: macOS Catalina 10.15.1
```
## 1.filter()
[Array.prototype.filter() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

> filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

```javascript
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//filterメソッド
const filterdItems = items.filter((item) => {
  return item.price <= 100
})
console.log(filterdItems)
```


```shell:出力
[ { name: 'Bike', price: 100 }, 
  { name: 'Album', price: 10 }, 
  { name: 'Book', price: 5 }, 
  { name: 'Keyboard', price: 25 } ]
```

## 2.map()
[Array.prototype.map() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

> map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

```javascript
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//mapメソッド
const itemNames = items.map((item) => {
  return item.name
})
console.log(itemNames)
```

```shell:出力
[ 'Bike', 'TV', 'Album', 'Book', 'Phone', 'Computer', 'Keyboard' ] 
```

##3.find()
[Array.prototype.find() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

> find() メソッドは、提供されたテスト関数を満たす配列内の 最初の要素 の 値 を返します。

```javascript
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//findメソッド
const foundItem = items.find((item) => {
  return item.name === 'Album'
})
console.log(foundItem)
```

```shell:出力
{ name: 'Album', price: 10 } 
```

## 4.forEach()
[Array.prototype.forEach() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

> forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

```javascript
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//forEachメソッド
items.forEach((item) => {
  console.log(item.price)
})
```

```shell:出力
100
200
10
5
500
1000
25
```

## 5.some
[Array.prototype.some() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

> some() メソッドは、配列の少なくとも 1 つの要素が、渡された関数によって実施されるテストに通るかどうかをテストします。

> 注: このメソッドは空の配列ではあらゆる条件式に対して false を返します。

```javascript
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]
//someメソッド
const hasInexpensiceItems = items.some((item) => {
  return item.price <= 100
})
console.log(hasInexpensiceItems)
```

```shell:出力
true
```
## 6.every
[Array.prototype.every() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)

> every() メソッドは、与えられた関数によって実行されるテストに、配列のすべての要素が通るかどうかをテストします。

> 注: このメソッドは空の配列ではあらゆる条件式に対して true を返します。

```javascript
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]
//everyメソッド
const hasExpensiceItems = items.every((item) => {
  return item.price > 100
})
console.log(hasExpensiceItems)
```

```shell:出力
false
```

## 7.reduce()
[Array.prototype.reduce() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

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

```javascript
const items = [
  { name: 'Bike', price: 100 },
  { name: 'TV', price: 200 },
  { name: 'Album', price: 10 },
  { name: 'Book', price: 5 },
  { name: 'Phone', price: 500 },
  { name: 'Computer', price: 1000 },
  { name: 'Keyboard', price: 25 },
]

//reduceメソッド
const total = items.reduce((currentTotal, item) => {
  return currentTotal + item.price
}, 100)
console.log(total)
```

```shell:出力
1940
```

## 8.includes()
[Array.prototype.includes() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

> includes() メソッドは、特定の要素が配列に含まれているかどうかを true または false で返します。与えられた要素が見つかるかどうかを計算するために、 SameValueZero (ゼロの同値) アルゴリズムを使用します。

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

// includesメソッド
const includesNumber = numbers.includes(7)
console.log(includesNumber)
```

```shell:出力
false
```

## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

どなたかの参考になれば幸いです:relaxed:

## 参考にさせて頂いたサイト（いつもありがとうございます）
- [8 Must Know JavaScript Array Methods - YouTube](https://www.youtube.com/watch?v=R8rmfD9Y5-c)