【JavaScript】今更だけどArrayメソッドを整理する

## はじめに
最近JavaScriptを書くことが増えた。個人的に使ったものを整理する。
随時更新予定。

## forEach
配列の取り出し。
indexとarrayは省略可能。

```.js
const lang = ['JavaScript', 'Python', 'Ruby']

lang.forEach((item, index, array) => {
  console.log(item, index)
// JavaScript 0
// Python 1
// Ruby 2
})
```

## filter
条件にあうもの抽出して新しい配列を作成。

```.js
const number = [10, 20, 30, 40, 50]

cont new_number = number.filter((item, index, array) => {
   return item > 30
})

console.log(new_number)
// [40, 50]
``` 

## map
処理をして新しい配列を作成。

```.js
const number = [10, 20, 30, 40, 50]

const new_number = number.map((item, index, array) => {
    return item + 1
})

console.log(new_number)
// [11, 21, 31, 41, 51]
```

## reduce
元となる配列の累積した単一の値を返す。

```.js
const number = [1, 2, 3, 4, 5]

const result = number.reduce((previous, current, index, array) {
    return previous + current
})

console.log(result)
// 15

// 1回目
// previous = 1, current = 2
// 累積値: 3

// 2回目
// previous = 3（累積値）, current = 3
// 累積値: 6

// 3回目
// previous = 6（累積値）, current = 4
// 累積値: 10

// 4回目
// previous = 10（累積値）, current = 5
// 累積値: 15
```

少々癖のある挙動をするが最大値を取得する時等に便利。

```.js
const number = [1, 2, 3, 4, 5]

const maxNumber = number.reduce((a, b) => {
    return a > b ? a : b
})

console.log(maxNumber)
// 5

```

## slice
第一引数に指定してたインデックスの位置から、第二引数に指定したインデックスの直前までの要素を取り出して、取り出した要素を配列として返す。

```.js
const number = [1, 2, 3, 4, 5]

new_number = number.slice(1, 4)
console.log(new_number)
// [2, 3, 4]
// 2番目から5番目未満の要素を取り出す

console.log(number)
[1, 2, 3, 4, 5]
// 元の配列は変化しない

new_number2 = number.slice()
console.log(new_number2)
// [1, 2, 3, 4, 5]
// 元の配列は変化しないので配列のコピーにも使える

```


## splice
配列の任意の場所の要素を削除して、削除された要素を取りだす。

```.js
const number = [1, 2, 3, 4, 5]

const new_number = number.splice(3)

console.log(new_number)
// [4, 5]
// 4番目から最後までの要素を削除
console.log(number)
// [1, 2, 3]
// 元の配列自身も変化する

const number2 = [1, 2, 3, 4, 5]

const new_number2 = number2.splice(1, 3)

console.log(new_number2)
// [2, 3, 4]
// 2番目から3つの要素を削除
console.log(number2)
// [1, 5]

const number3 = [1, 2, 3, 4, 5]

cosnt new_number3 = number3.splice(2, 2, 6)

console.log(new_number3)
// [3 ,4]
// 3番目から2つの要素を削除
console.log(number3)
// [1, 2, 6, 5]

```


## find
指定した関数を満たす、配列中の要素の値を返す。当てはまらない場合はundefinedを返す。

```.js
const cityList = [
    { name: '東京', value: 1 },
    { name: '神奈川', value: 2 },
    { name: '群馬', value: 3 },
    { name: '埼玉', value: 4 }
]

const targetCity = cityList.find(city => {
    return city.name === '群馬'
})

console.log(targetCity)
// { name: '群馬', value: 3 }

const targetCity2 = cityList.find(city => {
    return city.value > 0
})

console.log(targetCity2)
// { name: '東京', value: 1 }
// 関数を満たす要素が複数ある場合は、最初に合致した要素を返す。

```

## findIndex
指定した関数を満たす、配列中の要素のインデックスを返す。当てはまらない場合は-1を返す。

```.js
const number = [1, 2, 3, 4, 5]
new_number = number.findIndex((item, index, array) => {
    return item * 3 > 9
})

console.log(new_number)
// 3

```

## shift
配列の先頭の要素を削除する。

```.js
const words = ['a', 'b', 'c']

new_words = words.shift()

console.log(new_words)
// a

console.log(words)
// ['b', 'c']

```


## unshift
配列の先頭に要素を追加する。

```.js
const words = ['a', 'b', 'c']

new_words = words.unShift('d')

console.log(new_words)
// 4

console.log(words)
// ['d', 'a', 'b', 'c']
```


## every
全ての条件を満たすか判定する。

```.js
const number = [1, 2, 3, 4, 5]

const judgment = number.every((item, index, array) => {
    return item > 3
}) 

console.log(judgment)
// false
```


## some
一つでも条件を満たすものがあるか判定する。

```.js
const number = [1, 2, 3, 4, 5]

const judgment = number.some((item, index, array) => {
    return item >= 5
}) 

console.log(judgment)
// true
```


## sort
引数の関数に基づいた並び順で配列をソートする。引数に何も指定しない場合はアルファベット順にソートする。

```.js
const number = [3, 4, 2, 5,1]

const asc = number.sort((a, b) => {
    return a - b
})
console.log(asc)
// [1, 2, 3, 4, 5] （昇順）

const desc = number.sort((a, b) => {
    return b - a
})
// [5, 4, 3, 2, 1] （降順）
```


## indexOf
前方方向から一致する要素のインデックスを検索する。一致するものがない場合は-1を返す。

```.js
const number = [1, 2, 3, 4, 5]

const target = number.indexOf(4)
console.log(target)
// 3

console.log(number)

const target2 = number.indexOf(5, 2)
console.log(target2)
// 4
// 3番目以降で5と一致するものを検索
```

[参考：MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)