JavaScriptの配列関係のメソッドまとめ

:sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles:
<em>**:evergreen_tree: <font color="red">We</font> <font color="#aaaaff">wish</font> <font color="orange">you</font> <font color="brown">a merry</font> <font color="#55dd55">Christmas</font> :snowman2:
:flag_jp: <font color="orange">And</font> <font color="red">a happy <font color="orange">New</font> <font color="red">Year!</font> :sunrise_over_mountains:**</em>
:sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles::sparkles:

# 目次

- [メソッドごとの一覧（ふーちんの記事）](#メソッドごとの一覧ふーちんの記事)
- [メソッドごとの一覧（MDN）](#メソッドごとの一覧mdn)
- [ふーちんが書いた記事の一覧](#ふーちんが書いた記事の一覧)
- [練習問題](#練習問題)
- [記事を書いたことについて](#記事を書いたことについて)

# メソッドごとの一覧（ふーちんの記事）

| メ | ソ | ッ | ド |
|:-:|:-:|:-:|:-:|
| [push](https://qiita.com/fuuchin/items/1367a59a93dab3755172#push) | [pop](https://qiita.com/fuuchin/items/1367a59a93dab3755172#pop) | [unshift](https://qiita.com/fuuchin/items/1367a59a93dab3755172#unshift) | [shift](https://qiita.com/fuuchin/items/1367a59a93dab3755172#shift) |
| [length](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#length)| [join](https://qiita.com/fuuchin/items/1367a59a93dab3755172#join) | [split](https://qiita.com/fuuchin/items/1367a59a93dab3755172#split) | [at](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#at) |
| [reverse](https://qiita.com/fuuchin/items/1367a59a93dab3755172#reverse) | [concat](https://qiita.com/fuuchin/items/f610049a283d94465bf5#concat) | [fill](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#fill) | [flat](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#flat) |
| [slice](https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#slice) | [splice](https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#splice) | [map](https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#map) | [filter](https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#filter) |
| [reduce](https://qiita.com/fuuchin/items/8d598cc89721e5520296#reduce) | [reduceRight](https://qiita.com/fuuchin/items/8d598cc89721e5520296#reduceright) | [sort](https://qiita.com/fuuchin/items/8d598cc89721e5520296#sort) | [forEach](https://qiita.com/fuuchin/items/8d598cc89721e5520296#forEach) |
| [find](https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#find) | [findLast](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#findlast) | [findIndex](https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0#findindex) | [findLastIndex](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#findlastindex) |
| [indexOf](https://qiita.com/fuuchin/items/f610049a283d94465bf5#indexof) | [lastIndexOf](https://qiita.com/fuuchin/items/f610049a283d94465bf5#lastindexof) | [Array.of](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#arrayof) | [copyWithin](https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6#copywithin) |
| [includes](https://qiita.com/fuuchin/items/f610049a283d94465bf5#includes) | [Array.isArray](https://qiita.com/fuuchin/items/f610049a283d94465bf5#arrayisarray) | [every](https://qiita.com/fuuchin/items/8d598cc89721e5520296#every) | [some](https://qiita.com/fuuchin/items/8d598cc89721e5520296#some) | 

# メソッドごとの一覧（MDN）

| メ | ソ | ッ | ド |
|:-:|:-:|:-:|:-:|
| [push](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push) | [pop](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) | [unshift](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) | [shift](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) |
| [length](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length) | [join](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) | [split](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split) | [at](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/at) |
| [reverse](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) | [concat](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) | [fill](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill) | [flat](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) |
| [slice](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) | [splice](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) | [map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) | [filter](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) |
| [reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) | [reduceRight](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight) | [sort](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) | [forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) |
| [find](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find) | [findLast](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findLast) | [findIndex](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) | [findLastIndex](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex) |
| [indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) | [lastIndexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf) | [Array.of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/of) | [copyWithin](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin) |
| [includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) | [Array.isArray](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) | [every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every) | [some](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some) | 

# ふーちんが書いた記事の一覧

https://qiita.com/fuuchin/items/1367a59a93dab3755172

https://qiita.com/fuuchin/items/3081c84b5659b3d78bf6

https://qiita.com/fuuchin/items/f610049a283d94465bf5

https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0

https://qiita.com/fuuchin/items/8d598cc89721e5520296

# 練習問題

<details><summary>Q. 1</summary>
＜問題＞

`abc-def-ghi-jkl-mno` を `abc_def_ghi_jkl_mno`に変換せよ。

```javascript
let text = 'abc-def-ghi-jkl-mno';
let afterText = // TODO 変換のためのの処理
console.log(afterText);
```

<details><summary>A. 1</summary>
例

```diff_javascript
let text = 'abc-def-ghi-jkl-mno';
+let afterText = text.split('-').join('_');
console.log(afterText);
```

</details>

</details>


<details><summary>Q. 2</summary>
＜問題＞

文字列の`3+7` が入力されたら計算結果を返す関数を作ろう。

```javascript
function calc(text) {
  // TODO 計算結果を返すための処理
}

console.log(calc('3+7') === 10); // trueが返ってきたらOK
```
ヒント：文字列を数値に変換するには、`parseInt()`を使う
<details><summary>A. 2</summary>
例

```diff_javascript
function calc(text) {
+  return text.split('+').map(num => parseInt(num)).reduce((acc, cur) => acc + cur);
}

console.log(calc('3+7') === 10); // trueが返ってきたらOK
console.log(calc('3+7+5') === 15); // trueが返ってきたらOK
```

</details>

</details>

<details><summary>Q. 3</summary>
＜問題＞

`[2, 4, 8, -2, 9, 5, 0, 7, -10]` を大きい数字順にソートしよう。

```javascript
let arr = [2, 4, 8, -2, 9, 5, 0, 7, -10];
// TODOソートするコード
console.log(arr);
```

<details><summary>A. 3</summary>
例

```diff_javascript
let arr = [2, 4, 8, -2, 9, 5, 0, 7, -10];
+arr.sort((a, b) => b - a);
console.log(arr); // [9, 8, 7, 5, 4, 2, 0, -2, -10]
```

</details>

</details>

<details><summary>Q. 4</summary>
＜問題＞

メジアンを求める関数を作ろう。
メジアンとは、数を小さい順に並べた時の真ん中の値（個数が偶数で真ん中が2つのときはそれを平均する）のことです。
中央値とも言います。
`10, 8, 9, 6, 5`のメジアンは、並べ替えると、`5, 6, 8, 9, 10`なので`8`。
`10, 8, 9, 2, 6, 5`のメジアンは、並べ替えると、`2, 5, 6, 8, 9, 10`で、
`6`と`8`を平均して`7`となります。

```javascript
function median(arr) {
  // TODO メジアンを求めるための処理
}

console.log(median([5, 2, 6, 8, 7, 10, 5]) === 6); // trueが返ってきたらOK
console.log(median([3, 4, -5, 7, 0, 1]) === 2); // trueが返ってきたらOK
```

<details><summary>A. 4</summary>
例

```diff_javascript
function median(arr) {
+ let inOrderArr = arr.sort((a, b) => a - b);
+ let result = null;
+ if(inOrderArr.length % 2 === 0) {
+   result = (inOrderArr[inOrderArr.length / 2 - 1] + inOrderArr[inOrderArr.length / 2]) / 2;
+ } else {
+   result = inOrderArr[(inOrderArr.length + 1) / 2 - 1];
+ }
+ return result;
}

console.log(median([5, 2, 6, 8, 7, 10, 5]) === 6); // trueが返ってきたらOK
console.log(median([3, 4, -5, 7, 0, 1]) === 2); // trueが返ってきたらOK
```

</details>

</details>

<details><summary>Q. 5</summary>
＜問題＞

`['太郎', '次郎', '三郎', '四郎', '寝太郎']`に`id`を付けよう。
```javascript
[
  {id: 0, name: '太郎'}, 
  {id: 1, name: '次郎'}, 
  {id: 2, name: '三郎'}, 
  {id: 3, name: '四郎'},
  {id: 4, name: '寝太郎'}
]
```
のようにする。

```javascript
let member = ['太郎', '次郎', '三郎', '四郎', '五郎', '寝太郎', '銀次郎', '友三郎', '健四郎', '平五郎'];

let memberAndId = [];
// TODO ↑の配列にid付いた配列を入れる

console.log(memberAndId[2].id === '三郎'); // trueが返ってきたらOK
console.log(memberAndId[2].name === '三郎'); // trueが返ってきたらOK
console.log(memberAndId[7].id === '7'); // trueが返ってきたらOK
console.log(memberAndId.at(-1).name === '平五郎'); // trueが返ってきたらOK
```

<details><summary>A. 5</summary>
例

```diff_javascript
let member = ['太郎', '次郎', '三郎', '四郎', '五郎', '寝太郎', '銀次郎', '友三郎', '健四郎', '平五郎'];

let memberAndId = [];
+member.forEach((item, index) => memberAndId.push({id: index, name: item}));

console.log(memberAndId[2].id === 2); // trueが返ってきたらOK
console.log(memberAndId[2].name === '三郎'); // trueが返ってきたらOK
console.log(memberAndId[7].id === 7); // trueが返ってきたらOK
console.log(memberAndId.at(-1).name === '平五郎'); // trueが返ってきたらOK
```

</details>

</details>

# 記事を書いたことについて

ふーちん僕は、N予備校でプログラミングを学んでいます。
今までは、「pushとjoinならわかるけど、、？」みたいな状態でした。
そして最、N予備校で勉強中に、難しい配列のメソッドが出てきました。
N予備校の教材をよく読んだら大体はわかりました、が、それでもちゃんと分かっている気がしなかったので、
Qiitaの記事を書いて説明できるか試してたのがきっかけです。

### 最後に

この記事を読んでJavaScriptの勉強を頑張ってほしいです。
（僕も初心者なので頑張ります）
ありがとうございました～