今回は、配列の使い方を解説していきます。
配列の基本
script.jsを以下のように書き換えてください。
const array = ['バナナ', 'りんご', 'みかん'];
console.log(array[0]);コンソールを確認すると、「バナナ」と表示されます。
角括弧[]の中に、コンマで区切られた複数の値が入っています。
このようなデータを配列（Array）と言います。
配列の中身は、[番号]の形で取り出すことができます。
最初のデータは1ではなく、0で取り出します。このようにJavaScriptでは連番は1ではなく0から始まります。
const array = ['バナナ', 'りんご', 'みかん'];
console.log(array[0]); // => バナナ
console.log(array[1]); // => りんご
console.log(array[2]); // => みかん各値は、このように取り出します。
配列の中身は以下のように書き換えることができます。
const array = ['バナナ', 'りんご', 'みかん'];
array[2] = 'スイカ';
console.log(array);コンソールで配列の中身を確認すると、みかんがスイカに変わっているのが確認できます。
ちなみにconstで宣言した定数は再代入できませんが、配列の中身を操作することは可能です。
値の追加
配列の中に、値を追加していきます。
追加には、いくつかの方法があります。
const array = ['バナナ', 'りんご', 'みかん'];
array[3] = 'スイカ';
console.log(array);['バナナ', 'りんご', 'みかん', 'スイカ']と表示されます。
また、以下の方法があります。
const array = ['バナナ', 'りんご', 'みかん'];
array.push('スイカ');
console.log(array);こちらも['バナナ', 'りんご', 'みかん', 'スイカ']と表示されます。
JavaScriptには、あらかじめメソッドというものが用意されており、.メソッド名()の形で使用できます。
使えるメソッドは型によって異なるのですが、配列（Array）であれば配列に値を追加するpushというメソッドが使えます。
pushは、配列の最後に値を追加します。
配列の最初に値を追加したい場合は、unshiftを使います。
const array = ['バナナ', 'りんご', 'みかん'];
array.unshift('スイカ');
console.log(array);コンソールには、['スイカ', 'バナナ', 'りんご', 'みかん']と表示されます。
[番号]='追加する値'の形で追加できますが、配列の数を把握する手間がないので、pushやunshiftを使って追加する方が一般的です。
ループで配列の値を全て取り出す
まずは、配列の中に何個データが入っているか調べる方法を解説します。
const array = ['バナナ', 'りんご', 'みかん'];
console.log(array.length);コンソールに、3が表示されます。
JavaScriptでは、あらかじめプロパティというものが用意されており、.プロパティ名の形で取得できます。
配列.lengthの中には、配列に格納されているデータの数が入ります。
これを使って、配列の中身を取り出してみましょう。
const array = ['バナナ', 'りんご', 'みかん'];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}コンソールを確認すると、バナナ、りんご、みかんが表示されます。
以前レクチャーしたfor文で、配列の数だけループをします。
最初のループではiの中身は0なので、array[0]となり、バナナが出力されます。
2回目のループではarray[1]、3回目のループではarray[2]が出力されます。
ちなみに、配列にはforEachというメソッドがあり、これで配列の数だけ処理を実行することができます。
const array = ['バナナ', 'りんご', 'みかん'];
array.forEach((item) => {
console.log(item);
});ただ、forEachの中には関数が入るのですが、関数はまだレクチャーしていないので、forEachというものがあることだけ覚えておいてください。
関数については別のレッスンでレクチャーします。