JavaScriptの配列のメソッドの使い方～push・pop・unshift・shift・join・split・reverse～

# 記事の目的

ども、[N予備校](https://www.nnn.ed.nico/)でプログラミングを勉強中のふーちんです！
この記事ではJavaScript配列関係のメソッドの使い方、7つ紹介・説明しまーす。
`push`・`pop`・`unshift`・`shift`・`join`・`split`・`reverse`です！
初心者にもわかりやすく（自分も初心者ですが）説明したつもりです。

# 目次

- [1つ目、pushメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172/#push)
- [2つ目、popメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172/#pop)
- [3つ目、unshiftメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172/#unshift)
- [4つ目、shiftメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172/#shift)
- [5つ目、joinメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172/#join)
- [6つ目、splitメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172/#split)
- [7つ目、reverseメソッド](https://qiita.com/fuuchin/items/1367a59a93dab3755172/#reverse)

# push

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

##### 《 おもなメソッドの役割 》

◎ 配列の`末尾`に要素を`追加`する。

まさに`push`されている（押されている）感じ。

呼び出された`元の配列は変更される`。

```javascript: サンプルコード：寝太郎を追加
const users = ['太郎', '次郎', '三郎'];

// ↓で追加されます
users.push('寝太郎');
console.log(users); // ['太郎', '次郎', '三郎', '寝太郎'] ← 元々最後だった三郎の次に寝太郎が入った！
```

また、一度にいくつでも要素は追加できます。
その際、要素はコンマで連結します。
```javascript: サンプルコード：いろんな人を追加
const users = ['太郎', '次郎', '三郎'];

// ↓で追加されます
users.push('寝太郎', '銀次郎', '太一');
console.log(users); // ['太郎', '次郎', '三郎', '寝太郎', '銀次郎', '太一'] ← pushのかっこの中全部の要素が入った！
```

# pop

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)

##### 《 おもなメソッドの役割 》

◎ 配列の`末尾`の要素を`削除`する。

呼び出された`元の配列は変更される`。

```javascript: サンプルコード：末尾の寝太郎を削除
const users = ['太郎', '次郎', '三郎', '寝太郎'];

// ↓で追加されます
users.pop();
console.log(users); // ['太郎', '次郎', '三郎'] ← 元々最後にあった寝太郎が消えた！
```

# unshift

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)

##### 《 おもなメソッドの役割 》

◎ 配列の`先頭`に要素を`追加`する。

呼び出された`元の配列は変更される`。

```javascript: サンプルコード：先頭に寝太郎を追加
const users = ['太郎', '次郎', '三郎'];

// ↓で追加されます
users.unshift('寝太郎');
console.log(users); // ['寝太郎', '太郎', '次郎', '三郎'] ← 先頭に寝太郎が追加された！
```

# shift

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)

##### 《 おもなメソッドの役割 》

◎ 配列の`先頭`の要素を`削除`する。

`shift`メソッドの反対が`unshift`メソッドみたいですね。

呼び出された`元の配列は変更される`。

```javascript: サンプルコード：先頭の寝太郎を削除
const users = ['寝太郎', '太郎', '次郎', '三郎'];

// ↓で追加されます
users.shift();
console.log(users); // ['太郎', '次郎', '三郎'] ← 先頭の寝太郎が削除された！
```

# join

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join)

##### 《 おもなメソッドの役割 》

◎ 配列の要素を引数（`join()`の`()`に入れる文字列）で結合させる。

呼び出された`元の配列は変更されない`。使われるだけ。

```javascript: サンプルコード：いろんな形で表示
const fruits = ['りんご', 'バナナ', 'かき', 'レモン'];

// パターン1
const join1 = fruits.join('と、');
console.log('好きな果物：' + join1); // 好きな果物：りんごと、バナナと、かきと、レモン ← 「と、」でつながれた！

// パターン2
const join2 = fruits.join();
console.log('好きな果物：' + join2); // 好きな果物：りんご,バナナ,かき,レモン ← 何も渡さなかったら、join(',')の結果と同じでコンマで結合された！

// パター3
const join3 = fruits.join('');
console.log('好きな果物：' + join3); // 好きな果物：りんごバナナかきレモン ← 空文字列を渡すと、そのまま合わさった！

console.log(fruits); // ['りんご', 'バナナ', 'かき', 'レモン'] ← 元の配列は何も変わらない！
```

# split

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split)

##### 《 おもなメソッドの役割 》

◎ 文字列を引数（`split()`の`()`に入れる文字列）のところで分割させる。

これも呼び出された`元の配列は変更されない`。使われるだけ。

※`'文字列'.split()`という風に使うので、配列のメソッドではなく、文字列のメソッドです。（たぶん　間違ってたら教えてください）

サンプルコードは3つ用意しました。

```javascript: サンプルコード1：一要素一文字の配列
const text = 'あアAa1一#=';

// 一文字一文字を配列にしまーす
const splitedText = text.split('');
console.log(splitedText); // ['あ', 'ア', 'A', 'a', '1', '一', '#', '='] ← 空文字列渡すことで、一文字ずつ分割された！
```

```javascript: サンプルコード2：もはや何も分割しない
const text = 'あああああああ';

const splitedText = text.split();
console.log(splitedText); // ['あああああああ'] ← 分割されないが、配列の状態になった！
```

```javascript: サンプルコード3：一単語ごとに配列
const text = 'I studied programming last night';

// スペースで分割
const splitedText = text.split(' ');
console.log(splitedText); // ['I', 'studied', 'programming', 'last', 'night'] ← 文字列にスペースがあるところで切れた！
```

# reverse

[MDNはこちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)

##### 《 おもなメソッドの役割 》

◎ 配列の要素の順序を反転させる。

カードゲームのUNOでもリバースってありますよね、カードを出す順番が逆になるんですよね。

呼び出された`元の配列が変更される`。

```javascript: サンプルコード：おえういあ
const text = ['あ', 'い', 'う', 'え', 'お'];

// 要素を逆順にするよ
text.reverse();

console.log(text); // ['お', 'え', 'う', 'い', 'あ'] ← 元の配列が逆順になった！
```

#### 最後に

ほかのメソッドもまた別の記事などに追加していこうと思います。
↓の関連する記事も是非見てほしいです。
https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0

ありがとうございました～