JavaScript #1 変数と定数、配列
変数と定数
JavaScirptの変数は、ES5までは「var hoge」のように書いていましたが、ES6以降は、以下のように記述します。もちろんJavaSciriptは動的型付け言語なので、数値、文字などの型指定することはなく、実行時によしなに処理してくれます。
変数とは中身の更新が可能なデータの入れ物。定数とは中身の更新ができないデータの入れ物。
変数、定数名の命名規則は英語、「_」、「$」をにする必要がある。
//変数の定義
//数値はそのまま、文字列はシングルクォートで囲む。ダブルクォートでも大丈夫。
let hoge = 100;
let hoge2 = 'あいうえお';
let hoge3 = "かきくけこ";
//定数の定義
Const hoge4 = 10;
Const hoge5 = 'あいうえお';
//だめな例
let 1st = 1;
Const @mail = "hoge@hoge.com"
ここでの注意点は、ES6以降では以下のような書き方はNG。２回以上変数宣言はできなくなっています。そもそも２回以上宣言なんてしないけど。。
// ES5までの書き方ならOK。
//結果はhogeに200が入っている。
var hoge = 100;
var hoge = 200;
console.log(hoge)
//ES6以降はNG。
//実行エラーとなってしまうので注意。
let hoge = 1000;
let hoge = 2000;
console.log(hoge)
//当然、これはOK。
let hoge = 10;
hoge = 20;
varでよくない？って気もしますが、今後はlet,constを使うようにしよう。
配列
配列とは変数の集まりのようなデータの入れ物のこと。配列は1行でデータを持つ1次元配列と、2行以上でデータをもつ2次元配列があります。
1次元配列の場合はこんな感じ。
//配列の定義
let number = [1,2,3]
//配列の全部の値を見る場合
//(3) [1, 2, 3] と表示される
console.log(number);
//配列の2番目のを見る場合(配列は０番から始まるため、3番目の値を取るときは１引いた2を指定する)
//3と表示される
console.log(number[2]);
//配列の中身の値を更新することができる
//5と表示される
number[1]=5
console.log(number[1]);
2次元配列だとこんな感じ
//配列の定義
//1行ずつ、[]で括って書く。
let fruits = [
['りんご','みかん','ぶどう'],
['もも','かき','さくらんぼ'],
['ラフランス','パイナップル','マンゴー'],
]
//2行目の3番目の値を取り出したいとき
//さくらんぼと表示される。
console.log(fruits[1][2]);
連想配列
連想配列は、配列を順番で管理するのではなく、キーで管理する配列もの（key・value）。
ES5までは連想配列はなく、オブジェクトとして実装していました。
ES6からはmapという連想配列が追加されました。
オブジェクトだとこんな感じ
//オブジェクトで定義する。
//要素は、キー：バリューで記述する
let book ={
'name':'ドラゴンボール',
'sakusya':'鳥山明',
'rensai':'週間少年ジャンプ'
}
// オブジェクト（book）のキー（name）のデータの中身（バリュー）を取りたいときは
//オブジェクト.キーと指定する。この場合は「book.name」
//ドラゴンボールが表示される
console.log(book.name);
mapを使うとこんな感じ
//連想配列の定義はmap関数を使う。
let book2 = new Map(
[
['name','ドラゴンボール'],
['sakusya','鳥山明'],
['rensai','週間少年ジャンプ']
]
);
//値を取り出すときはgetを使う。
console.log(book2.get('name'));
オブジェクトを使うなってことではなくて、mapができましたという理解でよいのかなあ。
mapとオブジェクトの違いは少し整理してみます。