JS文檔歸納

在html中引入外部js文件,並調用帶參

• js文件
  

• html文件
  

ES6規範引入了新的數據類型Map，Set

Map是一組鍵值對的結構，具有極快的查找速度。

• 用JavaScript寫一個Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

• 例如：
  

• 初始化Map需要一個二維數組，或者直接初始化一個空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

• 注：由於一個key只能對應一個value，所以，多次對一個key放入value，後面的值會把前面的值沖掉(覆蓋)

Set和Map類似，也是一組key的集合，但不存儲value。由於key不能重複，所以，在Set中，沒有重複的key。重複元素在Set中自動被過濾

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

• 通過add(key)方法可以添加元素到Set中，可以重複添加，但不會有效果；
• 通過delete(key)方法可以刪除元素；

爲了統一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬於iterable類型。

• 具有iterable類型的集合可以通過新的for ... of循環來遍歷。

• for … of循環是ES6引入的新的語法

• 用for … of循環遍歷集合，用法如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍歷Array
    console.log(x);
}
for (var x of s) { // 遍歷Set
    console.log(x);
}
for (var x of m) { // 遍歷Map
    console.log(x[0] + '=' + x[1]);
}

• 更好的方式是直接使用iterable內置的forEach方法，它接收一個函數，每次迭代就自動回調該函數。

---

定義函數兩種方式

方式1：

function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

方式2：

var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};
// 在這種方式下，function (x) { ... }是一個匿名函數，它沒有函數名。
   但是，這個匿名函數賦值給了變量abs，所以，通過變量abs就可以調用該函數。

• 上述兩種定義完全等價，注意第二種方式按照完整語法需要在函數體末尾加一個;，表示賦值語句結束。

---

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

---

---

---

• 在JavaScript中，用var申明的變量實際上是有作用域的。
• 如果兩個不同的函數各自申明瞭同一個變量，那麼該變量只在各自的函數體內起作用。換句話說，不同函數內部的同名變量互相獨立，互不影響；
• 由於JavaScript的函數可以嵌套，此時，內部函數可以訪問外部函數定義的變量，反過來則不行；
• 如果內部函數和外部函數的變量名重名，JavaScript的函數在查找變量時從自身函數定義開始，從“內”向“外”查找。如果內部函數定義了與外部函數重名的變量，則內部函數的變量將“屏蔽”外部函數的變量。
• 不在任何函數內定義的變量就具有全局作用域。實際上，JavaScript默認有一個全局對象window，全局作用域的變量實際上被綁定到window的一個屬性（因此，直接訪問全局變量XXX和訪問window.XXX是完全一樣的）；
• 由於函數定義有兩種方式，以變量方式var foo = function () {}定義的函數實際上也是一個全局變量，因此，頂層函數的定義也被視爲一個全局變量，並綁定到window對象；

---

---

---

名字空間 ~重點~

• 減少衝突的一個方法是把自己的所有變量和函數全部綁定到一個全局變量中。例如：

// 唯一的全局變量MYAPP:
var MYAPP = {};

// 其他變量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函數:
MYAPP.foo = function () {
    return 'foo';
};

---

綁定到對象上的函數稱爲方法，和普通函數也沒啥區別

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

xiaoming.age(); // 25, 正常結果
getAge(); // NaN

拆開寫：

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};


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

• 在一個方法內部，this是一個特殊變量，它始終指向當前對象

• JavaScript的函數內部如果調用了this，那麼這個this到底指向誰？
  答案是，視情況而定！

• 如果以對象的方法形式調用，比如xiaoming.age()，該函數的this指向被調用的對象，也就是xiaoming，這是符合我們預期的。

• 如果單獨調用函數，比如getAge()，此時，該函數的this指向全局對象，也就是window。

• 用var that = this;，你就可以放心地在方法內部定義其他函數，而不是把所有語句都堆到一個方法中。

---

高階函數

• map函數

var f = function (x) {
    return x * x;
};

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
for (var i=0; i<arr.length; i++) {
    result.push(f(arr[i]));
}

等價於如下：

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]

---

• reduce函數

Array的reduce()把一個函數作用在這個Array的 [x1, x2, x3...]上，這個函數必須接收兩個參數，reduce()把結果繼續和序列的下一個元素做累積計算；

其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

例如：要把[1, 3, 5, 7, 9]變換成整數13579，reduce()也能派上用場

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

---