JavaScript
備忘録

【備忘録】『改訂新版JAVASCRIPT本格入門』の参考になった部分まとめ

間違っているところや気になるところがあれば、コメント欄でガンガンご指摘ください:joy:

基本データ型ではnewしない

ダメ絶対

var flag = new Boolean(false);

if (flag) {
 console.log('flag is true'); 
}
// result: flag is true

サロゲートペア?

'叱る'は4バイトで表現される。

var msg = '叱る';
console.log(msg.length); //result: 3

正しくカウントするには?

var msg = '叱る';
var len = msg.length;
var num = msg.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g).length - 1;
console.log(msg.length - num); // result: 2

NaNは自分自身を含め全ての値と等しくない

console.log(Number.Nan === Number.Nan) // result: false

が、しかしMapの世界では例外的に NaN === NaN

var m = new Map();
m.set(NaN, 'hoge');
console.log(m.get(NaN)); // result: hoge

eval is evil

eval関数は置き換えを検討する。

アロー関数

functionはいらない。

let getTriangle = (base, height) => {
  return base * height / 2;
}

console.log('三角形の面積:' + getTriangle(5, 2));

JavaScriptでは関数はデータ型の一種

varなしは全てグローバル変数になる

ローカル変数は関数の先頭で宣言する

letはブロックスコープに対応している

でもswitchで使うときには注意。

JavaScriptは引数の数をチェックしない

引数必須にするには?

function required() {
    throw new Error('引数が不足しています');
}

function hoge(value = required()) {
    return value;
}

hoge(); // result: Error: 引数が不足しています

argumentsオブジェクトはArrayではない

配列のように扱えるだけ。

引数に配列を入れるときは「...」を使う(ES2015)

console.log(Math.max(...[15,-3,78,1]));

オブジェクトから特定のプロパティだけを取り出す

オブジェクト丸ごと渡せる。

function show({name}) {
    console.log(name);
};

let member = {
    mid: 'Y0001';
    name: 'Yamada Taro';
    address: 't_yamada@example.com';
};

show(member); // result: Yamada Taro

匿名関数

function arrayWalk(data, f) {
    for (var key in data) {
        f(data[key], key);
    }
}

var ary = [1, 2, 4, 8, 16];
arrayWalk(
    ary,
    function (value, key) {
        console.log(key + ':' + value);
    }
);

プロパティを動的に生成する(Computed property names)

let i = 0;
let member = {
    name: 'YamadaTaro',
    birth: new Date(1970, 5, 25),
    ['memo' + ++i]: '正規会員',
    ['memo' + ++i]: '支部会長',
    ['memo' + ++i]: '関東'
};

console.log(member);

ページの初期化処理は DOMContentLoaded で表すのが基本

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('btn').addEventListener('click', function() {
        window.alert('clicked button.');
    }, false);
}, false);

アロー関数の場合、 this は固定される

setInterval/setTimeout は保証なし

  • あくまで指定された時間にキューに処理を登録するだけ。非同期で後続のコードを実行する。
  • 擬似的な並列処理。