見出し画像

JS学習記録第3回 配列の使い方について

こんばんは。
学習記録3回です!
まだ3回目って感じですね。
今回は配列についてまとめます!

配列とは・・・


配列とは、値に順序をつけて格納できるオブジェクトです。
console.logの出力とは違って、格納、情報を持っておくということですね!
次の例を見たらわかりやすいかもしれません。

const hairethu = [1,2,3,4,5,6];
console.log(hairethu);

hairethuという変数に、[1,2,3,4,5,6]のように6個の数字(情報)を格納します。そしてconsole.logを使って出力するという感じです。

実行結果として、consoleを確認すると以下のような感じで出力されました!

スクリーンショット 2021-12-25 3.13.43

配列の書き方としては配列の情報を[  ]内に,(カンマ)で区切りながら記述するです。

ここで配列の使い方をいくつか説明します。

配列1:特定の場所を出力

配列の出力方法として、配列の何番目を出力することも可能です。

const hairethu = [1,2,3,4,5,6];
console.log(hairethu[0]);

スクリーンショット 2021-12-25 3.19.10

console.logの中に、hairethu[0]を記述しました。プログラミングでは数字は0から始まるので、上記の記述では初めの数字1が取得されることになります。因みに、hairethu[1]と記述すると数字の2が取れます。


配列2:jsのプロパティ length

const hairethu = [1,2,3,4,5,6];
console.log(hairethu.length);

スクリーンショット 2021-12-25 3.21.18

lengthは元々js内に用意されているプロパティです!
phpでループするときなどによくlength使いますよね。
lengthは配列内にどれだけ要素があるかを確認するものです。
ここでは、要素が6個あるので、console結果で6と表示されています。


配列3:配列内に要素を追加する

const hairethu = [1,2,3,4,5,6];
hairethu.push('7');
console.log(hairethu);

スクリーンショット 2021-12-25 3.24.39

hairethuという変数にpushというメゾットで一番後ろに追加することが可能です。


配列4:配列内に要素を追加する2

const hairethu = [1,2,3,4,5,6];
hairethu.unshift('7');
console.log(hairethu);

スクリーンショット 2021-12-25 3.27.06

hairethuという変数にunshiftというメゾットで一番前に追加することが可能です。


配列5:配列内の要素を削除する

const hairethu = [1,2,3,4,5,6];
hairethu.pop();
console.log(hairethu);

スクリーンショット 2021-12-25 3.28.25

hairethuという変数にpopというメゾットで一番後ろの要素を削除することが可能です。


配列6:配列内の要素を削除する2

const hairethu = [1,2,3,4,5,6];
hairethu.shift();
console.log(hairethu);

スクリーンショット 2021-12-25 3.31.26

hairethuという変数にshiftというメゾットで一番前の要素を削除することが可能です。


配列7:配列内の要素を入れ替える

const hairethu = [1,2,3,4,5,6];
hairethu[5] = 8;
console.log(hairethu)

スクリーンショット 2021-12-25 3.35.06

hairethu[5] = 8;
のように変数の何番目を入れ替えることも可能です。
ここでは配列の6番目(プログラミングでは0から)を8に入れ替えた記述です。


配列8:配列内の何番目かの要素を削除

const hairethu = [1,2,3,4,5,6];
hairethu.splice(3,1);
console.log(hairethu)

スクリーンショット 2021-12-25 3.40.29

hairethuという変数にspliceというメゾットで何番かの要素を削除することが可能です。
splice(3,1)←ここでは配列の4番目を1つだけ削除という形になります。
因みに、
splice(3,2)なら、配列の4番目から2つ削除という形になります。


配列9:配列内の何番目かの要素に追加

const hairethu = [1,2,3,4,5,6];
hairethu.splice(3,0,9);
console.log(hairethu)

スクリーンショット 2021-12-25 3.44.31

spliceというメゾットには要素を削除すること他に追加することも可能です。追加するときは2番目の引数に0、3番目の引数に追加したい要素を記述します。
splice(3,0,9)←配列の4番目に数字の9を追加という形になります。


まとめ


const hairethu = [1,2,3,4,5,6];
hairethu.splice(0,0,9);
const val = hairethu.shift();
console.log(val);

いくつか配列の使い方をまとめました!
では上記のconsoleでの出力は何になるでしょうか???

ぜひ考えてみてください!
正解は下に↓






数字の9が出力されます。

大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。