JavaScriptに再入門しようと思った 基本構文編

目次

基本構文編
オブジェクト編
関数編

はじめ

　そういえばES6とかあんまりわからんし、ここ最近基礎がおざなりになっていたのでまとめて行こうかなと。
　いろいろな言語をやると似通った文法が多いのでここでJSの基本記法をまとめておきたいと思ったのでここから始めたいと思います。

基本記法

変数/定数宣言

var   test1 //代入も再宣言も可
let   test2 //代入は可 再宣言は不可
const test3 //代入も再宣言も不可

var : いつでも使える入れ物

　JSで最も使われる変数宣言で、代入はもちろん再宣言も許されている。

let : 再宣言できない入れ物

　letは重複の許可はしていない。
　let自体は主にローカル変数代わりとして利用されることもある(今後のスコープで触れる)

　＊ES2015ではletとconstが利用される

定数 : 数値の名前

　途中で中身の変更をしない(してはならない)物には定数を利用し宣言をする。
　例えば消費税を定数にする場合

const tax   = 1.08;
var   price = 200;

となる。

配列を定数にした場合

const data = [1, 10, 20];
data       = [2, 9, 10];//1,これはできない
data[0]    = 2;//2,これはできる

この理由は1は配列そのものの再代入なので命令違反
2は配列内部の書き換えなので違反にはならない

おまけ命名規則

　ごく一般的に変数はcamelCase記法(単語の接続箇所は大文字)、定数はアンダースコア記法、クラスやコンストラクターはPascal記法(単語の初めは大文字)で使われる。

データの型

分類	型名	概要
基本型	Number	整数型と浮動小数点型のあいのこ
基本型	String	文字型
基本型	boolean	真偽値
基本型	symbol	symbol型(今後触れる)
基本型	特殊	からの値であることを表す
参照型	配列	データの集合体でいつもの配列と同じ
参照型	オブジェクト	データの集合体だが配列とは違いJSONに近い扱い アクセスには要素名を利用する
参照型	関数	一連の処理の集合

リテラル

numberリテラル

整数型

名前	例
16進数	0x1, 0x1A, 0xFFF
10進数	10, 12, 20
8進数	0o1, 0o12, 0o7
2進数	0b1, 0b10110

浮動小数点型

名前	例
浮動小数	10.5, 3.14e5

文字列リテラル

"ダブルと'シングルの違いは基本的に前後関係が一致していれば問われないが、内部で同じコーテーションを利用する場合やそれ以外の文字を利用する場合はエスケープシーケンスを利用する。

基本的には\を利用してエスケープすることとなっており、改ページなら\fを改行なら\nをシングルなら\'などを利用する。
ほかにもUnicode参照の際の\u[xxxx]なども存在する。

テンプレート文字列

`を利用することで開業を挟んだテンプレート文字列の使用ができるほか${変数名}のような形で変数の埋め込みも可能にする。

配列リテラル

他言語の配列同様に

var lang = ['java', 'javascript', ['Vue.js', 'angular.js'], '.NET'];
console.log(lang[2][0]);
// Vue.js

のように利用できる

オブジェクトリテラル

var obj = {
    name : "name",
    age  : 21,
    key  : "ABC",
    hey  : function () {
        return alert("Wow");
    }
}
console.log(obj.name);
console.log(obj['name']);

と利用できる。

演算

いつも通りの四則演算+, -. /, *と存在するほかインクリメントなど存在する

インクリメント

インクリメントには前置演算と後置演算とが存在する。

y = ++x
y = x++

のようなもの

この場合、前者はインクリメントごにｙに代入、後者は代入後にインクリメントになる。

小数点の計算

小数点の計算において無限小数点になる可能性があるため、演算結果が正しく求められない可能性が存在する。そのため浮動小数点同士を計算する際は初めに整数化を行い次に演算を行うことで求められる場合がある

代入演算

四則演算の代入演算のほかに論理演算(&, |, ^)やシフト演算(<<=, >>=, >>>= (符号なしシフト) )などがある

基本型と参照型の違い

先ほどの型で参照型や基本型といった話をしたが、基本型では別変数への代入の際、片方が更新された場合でも影響はない。参照型は配列のアドレスが直接代入(参照代入)されるため影響を及ぼしてしまいます。

分割代入

配列

今までであれば配列は逐一

var data = [1, 1, 2, 3, 5, 8, 13]
var a = data[0]
var b = data[1]
var c = data[2]
//---略---

のように代入しなくてはいけなかったが

var data = [1, 1, 2, 3, 5, 8, 13]
var [a, b, c, d, e, f, g] = data
var [h, i, ...z] = data
console.log(a);
console.log(z);

のような形で代入ができる。この際に...変数のように分割代入末に入れることで残りの配列を代入できる。

オブジェクト

let vegetable = {name : '人参', price: 100, super: 'SEYU'};
let {name, price: nedan, memo = 'おいしいよ' } = vegetable ;
console.log(name);
console.log(price);
console.log(memo);

こんな感じでオブジェクトで定義している名前などを取り出したり、宣言することもできる。
ほかに、代入先の変数名の変更もできる。

比較演算子

比較演算子	例え
==	等価
!=	否等価
<	右辺が左辺超
<=	右辺が左辺以上
>	右辺が左辺未満
>=	右辺が左辺以下
===	同値
!==	否同値
? :	式 ? true : false

論理演算子

論理演算子	例え
&&	AND
｜｜	OR
!	NOT

ビット演算子

演算子	例
&	AND
｜	OR
^	XOR
~	NAND
>>	右シフト
<<	左シフト
>>>	右シフトかつ0うめ

その他演算子

演算子	概要
,	左右の式を連続実行
delete	削除
instanceof	インスタンス判定
new	インスタンスの作成
typeof	オペランドのデータ型取得
void	未定義地を返却

Delete 演算子

var ary = [1, 3, 5, 7, 11]
console.log(delete ary[0]);//=>true
console.log(ary);//=>[3, 5, 7, 11]

var obj = {data1 : 1, data2 : 3};
console.log(delete obj.data1);//=>true
console.log(obj.data1);//=>undefined

制御構文

if

いつも通りのIF文

var data = 'num';
//正規的な書き方
if (data == 'num') {
    //コード
} else if (data == 'nem') {
    //コード
}
//省略記法
if (data == 'num')
    //コード
else if (data == 'nem')
    //コード

switch

var data2 = 4
switch (data2){
    case 1:
        // コード
        break;
    case 2:
        // コード
        break;
    case 3:
        // コード
        break;
    case 4:
        // コード
        break;
    default:
        //コード
        break;
}

breakがない場合はそのまま継続してしまう。

while & Do While

//while
var data3 = true;
var i = 0;
while (data3) {
    if (i > 20) {
        break;
    }
    i++;
}
//do while
do {
    i--;
} while (i > 0);

for

for (var i = 0, j = 0; i < 10; i++,j++) {
    console.log(i);
}
//カンマでいつも通り複数代入

for in (key)

var ary = [1, 2, 3, 4, 5];
for (var key in ary) {
    console.log(key);
    console.log(ary[key]);
}

for of (value)

var ary = [1, 2, 3, 4, 5];
for (var value of ary) {
    console.log(value);
}

スキップとブレイク

var breakNum = 97;
for (var i=0; i < 100; i++){
    if (i == breakNum) {break;}//中断
    if (i % 8 == 0){continue;}//スキップ
    console.log(i);
}

例外処理

var i = 1;
try {
    i = i * k;//ここではkが宣言されていないのでエラーが出る
} catch (e) {
    console.log('warn');//例外処理
    console.log(e.message);//エラーメッセージ表示
} finally {
    console.log('処理を終了します。');//最終処理
}

例外処理はすごくオーバーヘッドが大きいのでループの外に出すことが奨励されている。

throw

throw命令を用いて制御構造での例外処理も可になる

strict

危険な構文を禁止するモード

'use strict';
//有効範囲はファイル内全体
function hoge () {
    'use strict';
    //有効範囲は関数内のみ
}

参考資料

学習に利用している本
改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
mozilla