ECMAScript學習筆記

標籤：

let和const命令

• let聲明的範圍為代碼塊，不存在變數提升。
• let不允許在相同的範圍內，重複聲明同一個變數。
• const用法與let類似，區別是const聲明的變數是常量。

為什麼需要塊級範圍？

1. 內層變數可能會覆蓋外層變數
2. 用來計數的迴圈變數泄漏為全域變數

對象的解構賦值

預設值生效的條件是，對象的屬性值嚴格等於undefined。

以下三種解構賦值不得使用圓括弧

• 變數聲明語句中，不能帶有圓括弧
• 函數參數中，模式不能帶有圓括弧
• 指派陳述式中，不能將整個模式，或嵌套模式中的一層，放在圓括弧中

可以使用圓括弧的情況

• 指派陳述式的非模式部分，可以使用圓括弧

變數解構賦值的用途:

1. 交換變數的值
2. 從函數返回多個值
3. 函數參數的定義
4. 提取JSON資料
5. 函數參數的預設值
6. 遍曆Map結構
7. 輸入模組的指定方法

字串的擴充函數的擴充

什麼是尾遞迴（Tail Call）：就是指某個函數最後一步調用另一個函數。函數調用會在記憶體形成一個“調用記錄”，又稱“調用幀”，儲存調用位置和內部變數等資訊。尾調用由於是函數的最後一步操作，所以不需要保留外層函數的調用幀，因為調用位置、內部變數等資訊已經不會再用到了，只要直接用內層函數取代外層函數的調用幀就可以了。

fibonacci數列的例子說明如下：

 function Fibonacci(n) {
    if (n <= 1) {
        return 1;
    };
    return Fibonacci(n - 1) + Fibonacci(n - 2);
}
console.log(Fibonacci(10));
function FibonacciTailCall(n) {
    var ac1 = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
    var ac2 = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
    if (n <= 1) {
        return ac2;
    }
    return FibonacciTailCall(n - 1, ac2, ac1 + ac2);
}
console.log(FibonacciTailCall(1000));

對象的擴充

ES6允許在對象中唯寫屬性名稱，不寫屬性值，此時屬性值等於屬性名稱所代表的變數。

描述對象的 enumerable 屬性，成為“可枚舉性”，如果該屬性為 false ，就表示某些操作會忽略當前屬性。 ES5 有三個操作會忽略 enmerbale 為 false 的屬性。

• for...in 迴圈：只遍曆對象自身和繼承的可枚舉屬性
• Object.keys() ：返回對象自身的所有可枚舉屬性的鍵名
• JSON.stringify() ：只串化對象自身的可枚舉的屬性
  ES6 新增了一個操作 Object.assign() ，會忽略 enumerable 為 false 的屬性，只拷貝對象自身的可枚舉屬性。

Symbol

ES5 的對象屬性名稱都是字串，容易造成屬性名稱的衝突。如果有一種機制保證每個屬性的名字都是獨一無二，這樣就從根本上防止了屬性名稱的衝突，這就是ES6引入Symbol的原因。

Proxy和Reflect

Proxy用於修改某些操作的預設行為，等同於在語言層面做出修改，所以屬於一種“元編程（meta programming）”，即對程式設計語言進行編程。

位元組

由於WebGL是指瀏覽器與顯卡之間的通訊介面，需要滿足大量的、即時的資料交換，所以它們之間的通訊必須是二進位的。
位元組由三類對象組成：

• ArrayBuffer對象：代表記憶體之中的一段位元據，可以通過“視圖”進行操作。“視圖”部署了數組介面，這意味著，可以用數組的方法操作記憶體。
• TypeArray視圖：共包括9種類型的視圖，比如Uint8Array數組視圖、Int16Array數組視圖、Float32Array數組視圖
• DataView視圖：可以自訂符合格式的視圖，比如第一個位元組是Uint8、第二三個位元組是Int16、第四個位元組是Float32Array數組視圖等。

簡單來說，ArrayBuffer對象代表原始的位元據，TypeArray視圖用來讀寫簡單類型的位元據，DataView視圖用來讀寫複雜的位元據。ArrayBuffer對象代表格儲存體在位元據的一段記憶體，它不能直接讀寫，只能通過視圖讀寫，視圖的作用是以指定格式解讀位元據。

TypedArrary數組的建構函式，可以接受另一個TypedArray執行個體作為參數。此時產生的新數組，只是複製了參數數組的值，對應的底層記憶體是不一樣的。新數組會開闢一段新的記憶體儲存資料，不會在原數組的記憶體之上建立視圖。

如果想在遍曆操作中，同步改變原來的Set結構，目前並沒有直接的方法，但有兩種變通反覆。一種是利用原Set結構映射出一個新的結構，然後賦值給原來的Set結構；另一種是利用 Array.from 方法

Tips： Map中，只有對同一對象的引用，Map結構才將其視為同一個鍵。

Class

ES5的繼承，實質是先創造了子類的執行個體對象 this ，然後再將父類的方法添加到 this 上面（ Parent.apply(this) ）。ES6的繼承機制安全不同，實質是先創造父類的執行個體對象 this （所以必須先調用 super 方法），然後再用子類的建構函式修改 this 。

Class作為建構函式的文法糖，同時有prototype屬性和proto屬性，因此存在兩條繼承鏈。

1. 子類的proto屬性，表示建構函式的繼承，總是指向父類。
2. 子類 prototype 屬性的 proto 屬性，表示方法的繼承，總是指向父類的 prototype 屬性。

class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

來自為知筆記(Wiz)

ECMAScript學習筆記