記事の目的
ども、N予備校でプログラミングを勉強中のふーちんです！
この記事ではJavaScript配列関係のメソッドの使い方、7つ紹介・説明しまーす。
push・pop・unshift・shift・join・split・reverseです！
初心者にもわかりやすく（自分も初心者ですが）説明したつもりです。
目次
push
《 おもなメソッドの役割 》
◎ 配列の末尾に要素を追加する。
まさにpushされている（押されている）感じ。
呼び出された元の配列は変更される。
const users = ['太郎', '次郎', '三郎'];
// ↓で追加されます
users.push('寝太郎');
console.log(users); // ['太郎', '次郎', '三郎', '寝太郎'] ← 元々最後だった三郎の次に寝太郎が入った！
また、一度にいくつでも要素は追加できます。
その際、要素はコンマで連結します。
const users = ['太郎', '次郎', '三郎'];
// ↓で追加されます
users.push('寝太郎', '銀次郎', '太一');
console.log(users); // ['太郎', '次郎', '三郎', '寝太郎', '銀次郎', '太一'] ← pushのかっこの中全部の要素が入った！
pop
《 おもなメソッドの役割 》
◎ 配列の末尾の要素を削除する。
呼び出された元の配列は変更される。
const users = ['太郎', '次郎', '三郎', '寝太郎'];
// ↓で追加されます
users.pop();
console.log(users); // ['太郎', '次郎', '三郎'] ← 元々最後にあった寝太郎が消えた！
unshift
《 おもなメソッドの役割 》
◎ 配列の先頭に要素を追加する。
呼び出された元の配列は変更される。
const users = ['太郎', '次郎', '三郎'];
// ↓で追加されます
users.unshift('寝太郎');
console.log(users); // ['寝太郎', '太郎', '次郎', '三郎'] ← 先頭に寝太郎が追加された！
shift
《 おもなメソッドの役割 》
◎ 配列の先頭の要素を削除する。
shiftメソッドの反対がunshiftメソッドみたいですね。
呼び出された元の配列は変更される。
const users = ['寝太郎', '太郎', '次郎', '三郎'];
// ↓で追加されます
users.shift();
console.log(users); // ['太郎', '次郎', '三郎'] ← 先頭の寝太郎が削除された！
join
《 おもなメソッドの役割 》
◎ 配列の要素を引数（join()の()に入れる文字列）で結合させる。
呼び出された元の配列は変更されない。使われるだけ。
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
《 おもなメソッドの役割 》
◎ 文字列を引数（split()の()に入れる文字列）のところで分割させる。
これも呼び出された元の配列は変更されない。使われるだけ。
※'文字列'.split()という風に使うので、配列のメソッドではなく、文字列のメソッドです。（たぶん 間違ってたら教えてください）
サンプルコードは3つ用意しました。
const text = 'あアAa1一#=';
// 一文字一文字を配列にしまーす
const splitedText = text.split('');
console.log(splitedText); // ['あ', 'ア', 'A', 'a', '1', '一', '#', '='] ← 空文字列渡すことで、一文字ずつ分割された！
const text = 'あああああああ';
const splitedText = text.split();
console.log(splitedText); // ['あああああああ'] ← 分割されないが、配列の状態になった！
const text = 'I studied programming last night';
// スペースで分割
const splitedText = text.split(' ');
console.log(splitedText); // ['I', 'studied', 'programming', 'last', 'night'] ← 文字列にスペースがあるところで切れた！
reverse
《 おもなメソッドの役割 》
◎ 配列の要素の順序を反転させる。
カードゲームのUNOでもリバースってありますよね、カードを出す順番が逆になるんですよね。
呼び出された元の配列が変更される。
const text = ['あ', 'い', 'う', 'え', 'お'];
// 要素を逆順にするよ
text.reverse();
console.log(text); // ['お', 'え', 'う', 'い', 'あ'] ← 元の配列が逆順になった！
最後に
ほかのメソッドもまた別の記事などに追加していこうと思います。
↓の関連する記事も是非見てほしいです。
https://qiita.com/fuuchin/items/8c14164cb4ef886f09e0
ありがとうございました～