サイトアイコン 上尾市のWEBプログラマーによるブログ

「脱初心者のJavaScript力を底上げするための本」の感想・備忘録2

「脱初心者のJavaScript力を底上げするための本」の感想・忘備録1の続き

strictモード

ファイルや関数の先頭に'use strict';と書くと、Strictモードとなる。
(宣言されていない変数への代入 、引数名やプロパティ名の重複、などがエラーとなる)
基本的には積極的に利用するべきだが、利用しているライブラリなどが対応していない場合がある。
よって、Strictモードは関数単位で適用するのがお作法。

function func1() {
    'use strict';
    // 以下、処理
}

typeof演算子

typeof演算子を使って判定を行う場合は、プリミティブ型(文字列・数値・真偽値)に対してのみ使うべき。
なぜなら、nullはobject、関数オブジェクトはfunction、という不思議な結果を返却するから。

console.log(typeof null); // object
var func = function(){};
console.log(typeof func); // function

instanceof演算子

instanceof演算子はどのコンストラクタから生成されたかを判断するための演算子。
new Object() はObjectコンストラクタから生成されたインスタンス。
new Array(100) はObjectコンストラクタとArrayコンストラクタから生成されたインスタンス。

console.log(new Object() instanceof Object); // true
console.log(new Array(100) instanceof Array); // true
console.log(new Array(100) instanceof Object); // true

Mapオブジェクト(ES2015)

連想配列は{}で表すのが常識だったが、ES2015でMapオブジェクトがサポートされたことにより、この常識は過去のものとなった。
Mapを使うと「キーを任意の型で指定できる」「専用のメンバが用意されている」というメリットがある。

var m = new Map();
m.set('name', 'taro');
m.set(123, true);
console.log(m.get('name'));

// 主なメンバ
console.log(m.size);
console.log(m.has('name'));
console.log(m.keys()); // キー:戻り値はfor of構文で回すことができる
console.log(m.values()); // 値:戻り値はfor of構文で回すことができる
console.log(m.entries()); // キーと値:戻り値はfor of構文で回すことができる

Promise(ES2015)

PromiseはES2015で実装された「連続した非同期処理を効率よくするためのデザインパターン。
従来のJavaScriptでの非同期処理はコールバック地獄に陥ることで有名だった。 それを解消するのがPromise。
あくまでデザインパターンなのでPromiseという記述自体は出てこない。

func1()
  .then(function(result1) {
    return func2();
  }).then(function(result2) {
    // 処理
  });

for…of(ES2015)

Javaの拡張for文と同じことを行うことができる。
for…inにイライラしていた人にとってはかなり嬉しい機能

テンプレート文字列(ES2015)

値をバッククォートで括ると、PHPのヒアドキュメントと同じように機能する。 変数を埋め込む場合は${hoge}のように記述する。

let name = 'okada';
let val = `hoge
fuga
${name}`;
console.log(val);

アロー関数(ES2015)

アロー=>を使って関数リテラルを記述することができる。
(引数,...)=>{...関数の本体...}
functionを書かなくて済むため、今までより短く関数を記述することができる。

let getTriangle = function(base,height){
 return base * height / 2;
};
// 上記をアロー関数を使うと下記のようになります。
let getTriangle = (base, height) => {
  return base * height / 2;
};
モバイルバージョンを終了