JavaScriptにおいて配列の取扱説明書

JavaScriptでの配列は？？

結論から言うと、Rubyとほとんど一緒です。
実際のコードをみながら説明していきます。

実際にconsole.log()で確かめてみた

console.log()って何？って思った人は以下の記事を必ず読んでください。
console.log()って何なの？
必要なファイルは以下の２つ
index.html
script.js
そしてscript.jsに以下の記述をしましょう。

let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
console.log(list);

index.htmlをブラウザ上で開き、検証画面のコンソールで以下のように出力されてるはずです。

ここから取り出してみたり色々遊んでいきます。
##配列から要素を取り出す方法
Rubyと一緒なのですが、復習もかねて。
ここでさっきの検証画面でもっと詳細に配列の中身をみてみましょう。

それぞれ番号がふられています。
０から振られているのに気づきましたか？１から始まるのではなく、０から始まります。
以下のように要素を取り出してみます。
作業はscript.js

let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
console.log(list[1]);

記述できたら検証画面をみていきましょう。

Hanakoが出てくるはずです。ポイントは０から始まることです。
##配列の要素数を調べる
これもRubyと一緒です。
lengthメソッドを使います。
script.jsに、以下記述。

let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
console.log(list.length);

そうすると、検証画面に以下のように出てくるはずです。

##配列に要素を追加する
これもRubyと一緒です！
pushメソッドを使います。
作業はscript.jsで

let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
list.push("Sato")
console.log(list);

一番最後にSatoが追加されているのが確認できます。 ##配列から要素を削除する。 これはRubyとちょっと違います。 Rubyでは要素番号を指定して、指定の要素が取り消せたかと思いますが ~~JavaScriptではそれが**できません。**~~ spliceを使えばできます。

let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
list.splice(2, 1);
console.log(list);

popメソッドを使いましょう。
作業はscript.jsで。

let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
list.pop()
console.log(list);

**一番最後のKatoがコンソール上では反映されていない**のが分かります。 **今度はshiftメソッド**を使ってみましょう。

let list = ['Yamada', 'Hanako', 'Taro', 'Suzuki', 'Kato'];
list.shift()
console.log(list);

今度は一番最初のYamadaがコンソール上では反映されていないのが分かります。

さあ、これで配列を恐れなくて大丈夫！次回はオブジェクトでも書こうかな。

※本記事に登場する文字列は意図的な文字列ではなく、ジャストアイディアで生まれたものです。