JS 備忘錄

Number

js 數值只有 Number,唯一能判斷NaN的方法是通過 isNaN() 函數：

isNaN(NaN); // true

null和undefined

在其他語言中，也有類似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，還有一個和null類似的undefined，它表示“未定義”。

JavaScript的設計者希望用null表示一個空的值，而undefined表示值未定義。事實證明，這並沒有什麼卵用，區分兩者的意義不大。大多數情況下，我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。

數組

數組是一組按順序排列的集合，集合的每個值稱爲元素。JavaScript的數組可以包括任意數據類型。例如：

var a = [1, 2, 3.14, 'Hello', null, true];

上述數組包含6個元素。數組用[]表示，元素之間用,分隔。

另一種創建數組的方法是通過Array()數組構造函數實現，調用item()方法來獲取數據：

new Array(1, 2, 3); // 創建了數組[1, 2, 3]

push()向Array的末尾添加若干元素，pop()則把Array的最後一個元素刪除掉：
如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉.

splice
splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若干元素，然後再從該位置添加若干元素.

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然後再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因爲沒有刪除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

對象

JavaScript的對象是一組由鍵-值組成的無序集合，例如：

var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

JavaScript對象的鍵都是字符串類型，值可以是任意數據類型。上述person對象一共定義了6個鍵值對，其中每個鍵又稱爲對象的屬性，例如，person的name屬性爲’Bob’，zipcode屬性爲null。

要獲取一個對象的屬性，我們用對象變量.屬性名的方式：

person.name; // 'Bob'
person.zipcode; // null

判斷有沒有屬性，用in來判斷
要判斷一個屬性是否是自身擁有的，而不是繼承得到的，可以用hasOwnProperty()方法。

刪除屬性，用delete關鍵字

delete person.zipcode；

模板字符串

要把多個字符串連接起來，可以用+號連接.
ES6新增了一種模板字符串，表示方法和上面的多行字符串一樣，但是它會自動替換字符串中的變量，用反引號｀｀表示：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
alert(message);

函數

javaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起作用，並且永遠指向當前函數的調用者傳入的所有參數。arguments類似Array但它不是一個Array。

function foo(x) {
    console.log('x = ' + x); // 10
    for (var i=0; i<arguments.length; i++) {
        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
    }
}

由於JavaScript函數允許接收任意個參數，於是我們就不得不用arguments來獲取所有參數，還用rest來處理多餘參數

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 結果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 結果:
// a = 1
// b = undefined
// Array []

使用數組，函數可以返回多個值。

function getSize（width，height，depth）{
    var area = width * height;
    var volume = width * height * depth;
    var sizes = [area  , volume];
    return sizes;
}

立即調用函數表達式稱作IIFE，通常用作一組代碼的封裝期。在此匿名函數種聲明的任何變量能夠非常有效的保護變量，防止其他腳本中可能出現同名變量。其中最後一對括號告訴解釋器馬上調用此函數。

var area = (function(){
    var width = 3;
    var height = 2;
    return width * height;
})();

方法

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年調用是25,明年調用就變成26了

map

var fn = x => x * x; // 箭頭函數

function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);

reduce

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x * 10 + y;
}); // 13579

返回函數而不是結果的寫法：

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}

var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
f(); // 15

generator

generator和函數不同的是，generator由function*定義（注意多出的*號），並且，除了return語句，還可以用yield返回多次。

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}

調用generator對象有兩個方法，一是不斷地調用generator對象的next()方法

var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}

第二個方法是直接用for … of循環迭代generator對象，這種方式不需要我們自己判斷done：

for (var x of fib(10)) {
    console.log(x); // 依次輸出0, 1, 1, 2, 3, ...
}

generator可以在執行過程中多次返回,還有另一個巨大的好處，就是把異步回調代碼變成“同步”代碼

window對象

window 對象的 location 屬性標記了當前頁面的 URL

document對象

在每個窗口種載入的當前web頁面使用document對象建模，可以訪問或修改用戶在頁面上看到的內容，並根據用戶與頁面的交互方式進行響應。html通過