LoginSignup
0
0

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-10

間違っているところや気になるところがあれば、コメント欄でガンガンご指摘ください: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 は保証なし

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0