簡介

初心

本文檔是一份 JavaScript 速查表，你在現(xiàn)代項目中會經(jīng)常遇到，以及最新的代碼示例。

本指南不是為了教你從頭開始學習 JavaScript ，而是為了幫助那些可能不熟悉當前代碼庫（例如 React）所用到 JavaScript 概念的開發(fā)人員。

此外，我有時還會提供一些個人的建議，這些建議可能是有爭議的，但我也會注意到，當我這么做的時候，這是我個人的建議。

注意： 這里介紹的大多數(shù)概念來自于最新的 JavaScript 語言（ ES2015，通常稱為 ES6）。你可以在 這里 找到新增的特性，網(wǎng)站做得很棒。

補充資源

當您努力了解一個新概念時，我建議你在以下資源網(wǎng)站上尋找相關(guān)的答案：

• MDN (Mozilla Developer Network)
• 你所不知道的JS (書)
• ES6 新特性和例子
• WesBos 的博客 (ES6)
• Reddit (JavaScript)
• 用 Google 來查找特定的博客和資源
• StackOverflow

目錄

• 現(xiàn)代 JavaScript 速查
  • 簡介
  • 初心
  • 參考資料
  • 目錄
  • 概念
  • 變量聲明: var, const, let
    • 簡單說明
    • 簡單的示例
    • 詳細說明
    • 擴展閱讀
  • 箭頭函數(shù)
    • 簡單的示例
    • 詳細說明
    • 簡潔性
    • this 引用
    • 有用的資源
  • 函數(shù)參數(shù)默認值
    • 擴展閱讀
  • 解構(gòu)對象和數(shù)組
    • 用示例代碼說明
    • 有用的資源
  • 數(shù)組方法 – map / filter / reduce
    • 簡單的示例
    • 說明
    • Array.prototype.map()
    • Array.prototype.filter()
    • Array.prototype.reduce()
    • 擴展閱讀
  • 展開操作符 “…”
    • 簡單的代碼示例
    • 說明
    • 應用于迭代 (如數(shù)組)
    • 函數(shù)剩余參數(shù)
    • 對象屬性展開
    • 擴展閱讀
  • 對象屬性簡寫
    • 說明
    • 擴展閱讀
  • Promises
    • 簡單的代碼示例
    • 說明
    • 創(chuàng)建 promise
    • Promise 處理器的用法
    • 擴展閱讀
  • 模板字符串
    • 簡單的代碼示例
    • 擴展閱讀
  • 帶標簽(tag)的模板字符串
    • 擴展閱讀
  • ES6 模塊的導入 / 導出 (imports / exports)
    • 用示例代碼說明
    • 命名導出
    • 默認導入 / 導出 (imports / exports)
    • 擴展閱讀
  • JavaScript 中的 this
    • 擴展閱讀
  • 類(Class)
    • 簡單的示例
    • 擴展閱讀
  • Extends 和 super 關(guān)鍵字
    • 簡單的代碼示例
    • 擴展閱讀
  • 異步和等待(Async Await)
    • 簡單的代碼示例
    • 用示例代碼說明
    • 錯誤處理
    • 擴展閱讀
  • 真值/假值(Truthy / Falsy)
    • 擴展閱讀
  • 靜態(tài)方法
    • 簡單說明
    • 簡單的代碼示例
    • 詳細說明
    • 在靜態(tài)方法調(diào)用另一個靜態(tài)方法
    • 在非靜態(tài)方法調(diào)用靜態(tài)方法
    • 擴展閱讀
  • 詞匯表
  • 作用域(Scope)
  • 變量的可變性

概念

變量聲明: var, const, let

在 JavaScript 中，有 3 個關(guān)鍵字可用于聲明一個變量，他們之間有些差異。那些是 var ，let 和 const。

簡單說明

使用 const 關(guān)鍵字聲明的變量無法重新分配，而 let 和 var 可以。

我建議總是默認使用 const 來聲明你的變量，如果你需要改變它，或者稍后需要重新分配，那么實用 let 。

	作用域	可否重新分配	可變性	暫時性死區(qū)
const	Block	No	Yes	Yes
let	Block	Yes	Yes	Yes
var	Function	Yes	Yes	No

簡單的示例

const person = "Nick";
person = "John" // 將會引起錯誤，person 不能重新分配

let person = "Nick";
person = "John";
console.log(person) // "John", 使用 let 允許重新分配

詳細說明

變量的 作用域 大致意思是“在哪里可以訪問這個變量”。

var

var 聲明的變量是 函數(shù)作用域 ，這意味著當在函數(shù)中創(chuàng)建變量時，該函數(shù)中的所有內(nèi)容都可以訪問該變量。
此外，函數(shù)中創(chuàng)建的 函數(shù)作用域 變量無法在此函數(shù)外訪問。

我建議你把它看作一個 X 作用域 變量，意味著這個變量是 X 的屬性。

function myFunction() {
 var myVar = "Nick";
 console.log(myVar); // "Nick" - 在這個函數(shù)中 myVar 可被訪問到
}
console.log(myVar); // 拋出錯誤 ReferenceError, 在函數(shù)之外 myVar 則無法訪問

繼續(xù)關(guān)注變量的作用域，這里是一個更微妙的例子：

function myFunction() {
 var myVar = "Nick";
 if (true) {
 var myVar = "John";
 console.log(myVar); // "John"
 // 實際上，myVar是函數(shù)作用域，我們只是將之前 myVar 的值 "Nick" 抹去，重新聲明為 "John"
 }
 console.log(myVar); // "John" - 看看 if 語句塊中的指令是如何影響這個值的 
}
console.log(myVar); // 拋出錯誤 ReferenceError, 在函數(shù)之外 myVar 則無法訪問

此外，在執(zhí)行過程中，var聲明的變量被移動到范圍的頂部。這就是我們所說的變量聲明提升（var hoisting)。

這部分的代碼：

console.log(myVar) // undefined -- 不會報錯
var myVar = 2;

在執(zhí)行時，被解析為：

var myVar;
console.log(myVar) // undefined -- 不會報錯
myVar = 2;

愚人碼頭注：變量提升和函數(shù)聲明提升可以查看：JavaScript 中的 Hoisting (變量提升和函數(shù)聲明提升)

let

var 和 let 大致相同，但是用 let 聲明的變量時有以下幾個特性：

• 塊級作用域（ block scoped )
• 在被分配之前， 無法 訪問使用
• 在同一個作用域之下，不能重新聲明

我們來看看我們前面的例子，采用塊級作用域（ block scoping ）后的效果：

function myFunction() {
 let myVar = "Nick";
 if (true) {
 let myVar = "John";
 console.log(myVar); // "John"
 // 實際上 myVar 在塊級作用域中，（在 if 語句塊中）我們只是創(chuàng)建了一個新變量 myVar。
 // 此變量在 if 語句塊之外不可訪問，
 // 完全獨立于創(chuàng)建的第一個 myVar 變量！
 }
 console.log(myVar); // "Nick", 可以看到 if 語句塊中的指令不會影響這個值
}
console.log(myVar); // 拋出錯誤 ReferenceError，myVar 無法在函數(shù)外部被訪問。

現(xiàn)在，我們來看看 let（和 const）變量在被賦值之前不可訪問是什么意思：

console.log(myVar) // 拋出一個引用錯誤 ReferenceError !
let myVar = 2;

與 var 變量不同的是，如果你在 let 或者 const 變量被賦值之前讀寫，那么將會出現(xiàn)錯誤。這種現(xiàn)象通常被稱為暫存死區(qū)（Temporal dead zone）或者 TDZ。

注意： 從技術(shù)上講，let 和 const 變量聲明時也存在提升，但并不代表它們的賦值也會被提升。但由于它被設計成了賦值之前無法使用，所以我們直觀感覺上它沒有被提升，但其實是存在提升的。如果想了解更多細節(jié)，請看這篇文章。

此外，您不能重新聲明一個 let 變量：

let myVar = 2;
let myVar = 3; // 拋出語法錯誤 SyntaxError

const

const 聲明的變量很像 let ，但它不能被重新賦值。

總結(jié)一下 const 變量：

• 塊級作用域
• 分配之前無法訪問
• 在同一個作用域內(nèi)部，不能重新聲明
• 不能被重新分配

const myVar = "Nick";
myVar = "John" // 拋出一個錯誤， 不允許重新分配

const myVar = "Nick";
const myVar = "John" // 拋出一個錯誤， 不允許重新聲明

但這里有一個小細節(jié)：const 變量并不是不可變，具體來說，如果 const 聲明的變量是 object 和 array 類型的值，那它是 可變的 。

對于對象：

const person = {
 name: 'Nick'
};
person.name = 'John' // 這是有效的！person 變量并非完全重新分配，只是值被改變
console.log(person.name) // "John"
person = "Sandra" // 拋出一個錯誤， 因為用 const 聲明的變量不能被重新分配

對于數(shù)組：

const person = [];
person.push('John'); // 這是有效的！person 變量并非完全重新分配，只是值被改變
console.log(person[0]) // "John"
person = ["Nick"] // 拋出一個錯誤， 因為用 const 聲明的變量不能被重新分配

擴展閱讀

• How let and const are scoped in JavaScript – WesBos
• Temporal Dead Zone (TDZ) Demystified

箭頭函數(shù)

ES6 JavaScript 更新引入了 箭頭函數(shù) ，這是另一種聲明和使用函數(shù)的方法。以下是他們帶來的好處：

• 更簡潔
• this 的值繼承自外圍的作用域
• 隱式返回

簡單的示例

• 簡潔性和隱式返回

function double(x) { return x * 2; } // 傳統(tǒng)的方法
console.log(double(2)) // 4

const double = x => x * 2; // 相同的函數(shù)寫成帶有隱式返回的箭頭函數(shù)
console.log(double(2)) // 4

• this 的引用

在箭頭函數(shù)中， this 意味著封閉執(zhí)行上下文的 this 值?；旧希褂眉^函數(shù)，在函數(shù)中調(diào)用函數(shù)之前，您不需要執(zhí)行 “that = this” 這樣的的技巧。

function myFunc() {
 this.myVar = 0;
 setTimeout(() => {
 this.myVar++;
 console.log(this.myVar) // 1
 }, 0);
}

詳細說明

簡潔性

箭頭函數(shù)在許多方面比傳統(tǒng)函數(shù)更簡潔。讓我們來看看所有可能的情況：

• 隱式 VS 顯式返回

顯式返回 (explicit return) 是指在函數(shù)體中明確的使用 return 這個關(guān)鍵字。

 function double(x) {
 return x * 2; // 這個函數(shù)顯示返回 x * 2, 并且使用了 *return* 關(guān)鍵字
 }

在函數(shù)傳統(tǒng)的寫法中，返回總是顯式的。但是如果是使用箭頭函數(shù)，你可以執(zhí)行 隱式返回(implicit return)，這表示你不需要使用關(guān)鍵字 return 來返回一個值。

要做隱式回傳，代碼必須用一行語句寫完。

 const double = (x) => {
 return x * 2; // 這里是顯式返回
 }

由于這里只有一個返回值，我們可以做一個隱式的返回。

 const double = (x) => x * 2;

這樣做，我們只需要 移除括號 以及 return 關(guān)鍵字。這就是為什么它會被稱為 隱式 返回，return 關(guān)鍵字不在了，但是這個函數(shù)確實會返回 x * 2。

注意： 如果你的函數(shù)沒有回傳一個值 (這種作法有 副作用)，那么它將不會做顯式或隱式返回。

另外，如果你想隱式地返回一個 對象(object)，你必須用括號包裹，否則它將與塊大括號沖突：

const getPerson = () => ({ name: "Nick", age: 24 })
console.log(getPerson()) // { name: "Nick", age: 24 } -- 箭頭函數(shù)隱式地返回一個對象

• 只有一個參數(shù)

如果你的函數(shù)只接受一個參數(shù)，你可以省略包裹它的括號。如果我們拿上述的 double 代碼做為舉例：

 const double = (x) => x * 2; // 這個箭頭函數(shù)只接受一個參數(shù)

包裹參數(shù)的括號是可以被省略：

 const double = x => x * 2; // 這個箭頭函數(shù)只接受一個參數(shù)

• 沒有參數(shù)

當沒有為箭頭函數(shù)提供任何參數(shù)時，你就必須加上括號，否則將會拋出語法錯誤。

 () => { // 提供括號，一切都能正常運行
 const x = 2;
 return x;
 }

 => { // 沒有括號，這不能正常運行！
 const x = 2;
 return x;
 }

this 引用

要理解箭頭函數(shù)的精妙之處，你就必須知道 this 在 JavaScript 中是如何運作的。

在一個箭頭函數(shù)中，this 等同于封閉執(zhí)行上下文的 this 值。這意味著，一個箭頭函數(shù)并不會創(chuàng)造一個新的 this，而是從它的外圍作用域中抓取的。

如果沒有箭頭函數(shù)，你想在一個函數(shù)內(nèi)部的函數(shù)中通過 this 訪問變量，你就只能使用 that = this 或者是 self = this 這樣的技巧。

舉例來說，你在 myFunc 中使用 setTimeout 函數(shù)：

function myFunc() {
 this.myVar = 0;
 var that = this; // that = this 技巧
 setTimeout(
 function() { // 在這個函數(shù)作用域中，一個新的 *this* 被創(chuàng)建
  that.myVar++;
  console.log(that.myVar) // 1

  console.log(this.myVar) // undefined -- 見上訴函數(shù)聲明
 },
 0
 );
}

但是如果你使用箭頭函數(shù)，this 是從它的外圍作用域中抓取的：

function myFunc() {
 this.myVar = 0;
 setTimeout(
 () => { // this 值來自它的外圍作用域, 在這個示例中，也就是 myFunc 函數(shù)
  this.myVar++;
  console.log(this.myVar) // 1
 },
 0
 );
}

有用的資源

• Arrow functions introduction – WesBos
• JavaScript arrow function – MDN
• Arrow function and lexical this

函數(shù)參數(shù)默認值

從 ES2015 JavaScript 更新之后開始，你可以通過下列的語法為函數(shù)的參數(shù)設定默認值：

function myFunc(x = 10) {
 return x;
}
console.log(myFunc()) // 10 -- 沒有提供任何值，所以在 myFunc 中 10 做為默認值分配給 x
console.log(myFunc(5)) // 5 -- 有提供一個參數(shù)值，所以在 myFunc 中 x 等于 5 

console.log(myFunc(undefined)) // 10 -- 提供 undefined 值，所以默認值被分配給 x 
console.log(myFunc(null)) // null -- 提供一個值 (null)，詳細資料請見下文 

默認參數(shù)應用于兩種且僅兩種情況：

• 沒有提供參數(shù)
• 提供 undefined 未定義參數(shù)

換句話說，如果您傳入 null ，則不會應用默認參數(shù)。

注意： 默認值分配也可以與解構(gòu)參數(shù)一起使用（參見下一個概念以查看示例）。

擴展閱讀

• Default parameter value – ES6 Features
• Default parameters – MDN

解構(gòu)對象和數(shù)組

解構(gòu) (destructuring) 是通過從存儲在對象或數(shù)組中的數(shù)據(jù)中提取一些值來創(chuàng)建新變量的簡便方法。

舉個簡單的實例，destructuring 可以被用來解構(gòu)函數(shù)中的參數(shù)，或者像是 React 項目中 this.props 這樣的用法。

用示例代碼說明

• Object

我們考慮一下以下對象的所有屬性：

const person = {
 firstName: "Nick",
 lastName: "Anderson",
 age: 35,
 sex: "M"
}

不使用解構(gòu)：

const first = person.firstName;
const age = person.age;
const city = person.city || "Paris";

使用解構(gòu)，只需要 1 行代碼：

const { firstName: first, age, city = "Paris" } = person; // 就是這么簡單！

console.log(age) // 35 -- 一個新變量 age 被創(chuàng)建，并且其值等同于 person.age
console.log(first) // "Nick" -- 一個新變量 first 被創(chuàng)建，并且其值等同于 person.firstName A new variable first is created and is equal to person.firstName
console.log(firstName) // Undefined -- person.firstName 雖然存在，但是新變量名為 first
console.log(city) // "Paris" -- 一個新變量 city 被創(chuàng)建，并且因為 person.city 為 undefined(未定義) ，所以 city 將等同于默認值也就是 "Paris"。

注意： 在 const { age } = person; 中, const 關(guān)鍵字后的括號不是用于聲明對象或代碼塊，而是 解構(gòu)(structuring) 語法。

• 函數(shù)參數(shù)

解構(gòu)(structuring) 經(jīng)常被用來解構(gòu)函數(shù)中的對象參數(shù)。

不使用解構(gòu)：

function joinFirstLastName(person) {
 const firstName = person.firstName;
 const lastName = person.lastName;
 return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Nick-Anderson"

在解構(gòu)對象參數(shù) person 這個參數(shù)時，我們可以得到一個更簡潔的函數(shù)：

function joinFirstLastName({ firstName, lastName }) { // 通過解構(gòu) person 參數(shù)，我們分別創(chuàng)建了 firstName 和 lastName 這兩個變數(shù)
 return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Nick-Anderson"

箭頭函數(shù)中使用解構(gòu)，使得開發(fā)過程更加愉快：

const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;

joinFirstLastName(person); // "Nick-Anderson"

• Array

我們考慮一下以下數(shù)組：

const myArray = ["a", "b", "c"];

不使用解構(gòu)：

const x = myArray[0];
const y = myArray[1];

使用解構(gòu)：

const [x, y] = myArray; // 就是這么簡單！

console.log(x) // "a"
console.log(y) // "b"

有用的資源

• ES6 Features – Destructuring Assignment
• Destructuring Objects – WesBos
• ExploringJS – Destructuring

數(shù)組方法 – map / filter / reduce

map，filter 和 reduce 都是數(shù)組提供的方法，它們源自于 函數(shù)式編程 。

總結(jié)一下：

• Array.prototype.map() 接受一組數(shù)組，在其元素上執(zhí)行某些操作，并返回具有轉(zhuǎn)換后的元素數(shù)組。
• Array.prototype.filter() 接受一組數(shù)組，依照元素本身決定是否保留，并返回一個僅包含保留元素的數(shù)組。
• Array.prototype.reduce() 接受一組數(shù)組，將這些元素合并成單個值（并返回）。

我建議盡可能地使用它們來遵循函數(shù)式編程 (functional programming) 的原則，因為它們是可組合的，簡潔的且優(yōu)雅的。

通過這三種方法，您可以避免在大多數(shù)情況下使用 for 和 forEach 。當你試圖做一個 for 循環(huán)時，嘗試用 map，filter 和 reduce 來組合試試。起初你可能很難做到這一點，因為它需要你學習一種新的思維方式，但一旦你得到它，事情會變得更容易。

愚人碼頭注：JavaScript 函數(shù)式編程建議看看以下幾篇文章

• JavaScript 中的 Currying(柯里化) 和 Partial Application(偏函數(shù)應用)
• 一步一步教你 JavaScript 函數(shù)式編程（第一部分）
• 一步一步教你 JavaScript 函數(shù)式編程（第二部分）
• 一步一步教你 JavaScript 函數(shù)式編程（第三部分）
• JavaScript 函數(shù)式編程術(shù)語大全

簡單的示例

const numbers = [0, 1, 2, 3, 4, 5, 6];
const doubledNumbers = numbers.map(n => n * 2); // [0, 2, 4, 6, 8, 10, 12]
const evenNumbers = numbers.filter(n => n % 2 === 0); // [0, 2, 4, 6]
const sum = numbers.reduce((prev, next) => prev + next, 0); // 21

通過組合 map，filter 和 reduce 來計算 10 分以上的學生成績總和 sum ：

const students = [
 { name: "Nick", grade: 10 },
 { name: "John", grade: 15 },
 { name: "Julia", grade: 19 },
 { name: "Nathalie", grade: 9 },
];

const aboveTenSum = students
 .map(student => student.grade) // 我們將學生數(shù)組映射到他們成績的數(shù)組中
 .filter(grade => grade >= 10) // 我們過濾成績數(shù)組以保持10分以上的元素
 .reduce((prev, next) => prev + next, 0); // 我們將合計所有10分以上的成績

console.log(aboveTenSum) // 44 -- 10 (Nick) + 15 (John) + 19 (Julia), 低于10的 Nathalie 被忽略 

說明

讓我們考慮一下下列數(shù)組：

const numbers = [0, 1, 2, 3, 4, 5, 6];

Array.prototype.map()

const doubledNumbers = numbers.map(function(n) {
 return n * 2;
});
console.log(doubledNumbers); // [0, 2, 4, 6, 8, 10, 12]

這里發(fā)生了什么？我們在 numbers 這個數(shù)組中使用 .map 方法，map 將會迭代數(shù)組的每個元素，并傳遞給我們的函數(shù)。該函數(shù)的目標是生成并返回一個新的值，以便 map 可以替換掉原本的數(shù)組。

我們來解釋一下這個函數(shù)，使之更清楚一點：

const doubleN = function(n) { return n * 2; };
const doubledNumbers = numbers.map(doubleN);
console.log(doubledNumbers); // [0, 2, 4, 6, 8, 10, 12]

numbers.map(doubleN) 將會產(chǎn)生 [doubleN(0), doubleN(1), doubleN(2), doubleN(3), doubleN(4), doubleN(5), doubleN(6)] 而它們分別等同于 [0, 2, 4, 6, 8, 10, 12]。

注意： 如果你不需要返回一個新的數(shù)組， 且只想執(zhí)行一個帶有副作用的循環(huán)，使用 for / forEach 循環(huán)會更為符合你的需求。

Array.prototype.filter()

const evenNumbers = numbers.filter(function(n) {
 return n % 2 === 0; // 如果 "n" 符合條件返回 true , 如果 "n" 不符合條件則 false 。
});
console.log(evenNumbers); // [0, 2, 4, 6]

我們在 numbers 數(shù)組中使用 .filter 方法，過濾器遍歷數(shù)組中的每個元素，并將其傳遞給我們的函數(shù)。函數(shù)的目標是返回一個布爾值，它將確定當前值是否被保留。過濾之后返回的數(shù)組將只包含保留值。

Array.prototype.reduce()

reduce 方法的目標是將迭代數(shù)組中的所有元素，減少 到只留下單一值。如何聚合這些元素取決于你。

const sum = numbers.reduce(
 function(acc, n) {
 return acc + n;
 },
 0 // 累加器迭代變量的初始值
);

console.log(sum) //21

就像 .map 和 .filter 方法一樣， .reduce 方法被應用在數(shù)組上并接收一個函數(shù)做為第一個參數(shù)。

下面是一些差異：

• .reduce 接受兩個參數(shù)

第一個參數(shù)是一個函數(shù)，將在每個迭代步驟中被調(diào)用。

第二個參數(shù)是在第一個迭代步驟（讀取下一個用的）的累加器變量的值（此處是 acc）。

• 函數(shù)參數(shù)

作為 .reduce 的第一個參數(shù)傳遞的函數(shù)需要兩個參數(shù)。第一個（此處是 acc）是累加器變量，而第二個參數(shù)（n）則是當前元素。

累加器變量的值等于 上一次 迭代步驟中函數(shù)的返回值。在迭代過程的第一步，acc 等于你做為 .reduce 時第二個參數(shù)所傳遞的值（愚人碼頭注：也就是累加器初始值）。

進行第一次迭代

acc = 0 因為我們把 0 做為 reduce 的第二個參數(shù)

n = 0 number 數(shù)組的第一個元素

函數(shù)返回 acc + n –> 0 + 0 –> 0

進行第二次迭代

acc = 0 因為它是上次迭代所返回的值

n = 1 number 數(shù)組的第二個元素

函數(shù)返回 acc + n –> 0 + 1 –> 1

進行第三次迭代

acc = 1 因為它是上次迭代所返回的值

n = 2 number 數(shù)組的第三個元素

函數(shù)返回 acc + n –> 1 + 2 –> 3

進行第四次迭代

acc = 3 因為它是上次迭代所返回的值

n = 3 number 數(shù)組的第四個元素

函數(shù)返回 acc + n –> 3 + 3 –> 6

[…] 進行最后一次迭代

acc = 15 因為它是上次迭代所返回的值

n = 6 number 數(shù)組的最后一個元素

函數(shù)返回 acc + n –> 15 + 6 –> 21

因為它是最后一個迭代步驟了， .reduce 將返回 21 。

擴展閱讀

• Understanding map / filter / reduce in JS

展開操作符 “…”

ES2015 已經(jīng)引入了展開操作符 ... ，可以將可迭代多個元素（如數(shù)組）展開到適合的位置。

簡單的代碼示例

const arr1 = ["a", "b", "c"];
const arr2 = [...arr1, "d", "e", "f"]; // ["a", "b", "c", "d", "e", "f"]

function myFunc(x, y, ...params) {
 console.log(x);
 console.log(y);
 console.log(params)
}

myFunc("a", "b", "c", "d", "e", "f")
// "a"
// "b"
// ["c", "d", "e", "f"]

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

const n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

說明

應用于迭代 (如數(shù)組)

如果我們有以下兩個數(shù)組:

const arr1 = ["a", "b", "c"];
const arr2 = [arr1, "d", "e", "f"]; // [["a", "b", "c"], "d", "e", "f"]

arr2 的第一個元素是一個數(shù)組 ，因為 arr1 是被注入到 arr2 之中的。但我們真正想要得到的 arr2 是一個純字母的數(shù)組。為了做到這點，我們可以將 arr1 展開(spread) 到 arr2。

通過展開操作符：

const arr1 = ["a", "b", "c"];
const arr2 = [...arr1, "d", "e", "f"]; // ["a", "b", "c", "d", "e", "f"]

函數(shù)剩余參數(shù)

在函數(shù)參數(shù)中，我們可以使用 rest 操作符將參數(shù)注入到我們可以循環(huán)的數(shù)組中。這里已經(jīng)有一個 argument 對象綁定到每個函數(shù)上，等同于把數(shù)組中的所有參數(shù)都傳遞給函數(shù)。

function myFunc() {
 for (var i = 0; i < arguments.length; i++) {
 console.log(arguments[i]);
 }
}

myFunc("Nick", "Anderson", 10, 12, 6);
// "Nick"
// "Anderson"
// 10
// 12
// 6

但是如果說，我們希望創(chuàng)造的是一個包含各科成績和平均成績的新學生。將前兩個參數(shù)提取為兩個單獨的變量，并把剩下的元素生成一個可迭代的數(shù)組是不是更加方便呢？

這正是 rest 操作符允許我們做的事情！

function createStudent(firstName, lastName, ...grades) {
 // firstName = "Nick"
 // lastName = "Anderson"
 // [10, 12, 6] -- "..." 將傳遞所有剩余參數(shù)，并創(chuàng)建一個包含它們的 "grades" 數(shù)組變量

 const avgGrade = grades.reduce((acc, curr) => acc + curr, 0) / grades.length; // 根據(jù) grade 計算平均成績

 return {
 firstName: firstName,
 lastName: lastName,
 grades: grades,
 avgGrade: avgGrade
 }
}

const student = createStudent("Nick", "Anderson", 10, 12, 6);
console.log(student);
// {
// firstName: "Nick",
// lastName: "Anderson",
// grades: [10, 12, 6],
// avgGrade: 9.333333333333334
// }

注意： 在這個示例中， createStudent 函數(shù)其實并不太好，因為我們并沒有去檢查 grades.length 是否存在又或者它等于 0 的情況。但是這個例子現(xiàn)在這樣寫，能夠更好的幫助我們理解剩余參數(shù)的運作，所以我沒有處理上述的這種情況。

對象屬性展開

對于這一點，我建議你閱讀有關(guān) rest 操作符以前的有關(guān)迭代和函數(shù)參數(shù)的相關(guān)說明。

const myObj = { x: 1, y: 2, a: 3, b: 4 };
const { x, y, ...z } = myObj; // 這里是對象被解構(gòu)
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

// z是對象解構(gòu)后的剩余部分：myObj 對象除去 x 和 y 屬性后剩余部分被解構(gòu)

const n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

// 這里 z 對象的屬性展開到 n 中

擴展資源

• TC39 – Object rest/spread
• Spread operator introduction – WesBos
• JavaScript & the spread operator
• 6 Great uses of the spread operator

對象屬性簡寫

將變量分配給一個對象屬性時，如果變量名稱和屬性名稱相同，你可以執(zhí)行以下操作：

const x = 10;
const myObj = { x };
console.log(myObj.x) // 10

說明

通常（ES2015之前）當你聲明一個新的 對象字面量 并且想要使用變量作為對象屬性值時，你會寫這樣類似的代碼：

const x = 10;
const y = 20;

const myObj = {
 x: x, // 將 x 分配給 myObj.x
 y: y // 將 y 變量給 myObj.y
};

console.log(myObj.x) // 10
console.log(myObj.y) // 20

如您所見，這樣的作法其實相當重復，因為 myObj 的屬性名稱與要分配給這些屬性的變量名相同。

使用ES2015，當變量名與屬性名稱相同時，您可以進行以下簡寫：

const x = 10;
const y = 20;

const myObj = {
 x,
 y
};

console.log(myObj.x) // 10
console.log(myObj.y) // 20

擴展資源

• Property shorthand – ES6 Features

Promises

Promises 是一個可以從異步函數(shù) (參考) 同步返回的對象。

可以使用 Promises 來避免 回調(diào)地獄 (callback hell) ，而且它們在現(xiàn)代 JavaScript 項目中越來越頻繁地遇到。

簡單的代碼示例

const fetchingPosts = new Promise((res, rej) => {
 $.get("/posts")
 .done(posts => res(posts))
 .fail(err => rej(err));
});

fetchingPosts
 .then(posts => console.log(posts))
 .catch(err => console.log(err));

說明

當你在執(zhí)行 Ajax 請求 時，響應不是同步的，因為資源請求需要時間。如果你要的資源由于某些原因 (404) 不可用，甚至可能永遠都不會請求到。

為了處理這類情況，ES2015 為我們提供了 promises。 Promises 可以有三種不同的狀態(tài)：

• 等待中 (Pending)
• 達成 (Fulfilled)
• 拒絕 (Rejected)

假設我們希望使用 promises 去進行 Ajax 請求以獲取 X 資源。

創(chuàng)建 promise

我們首先要創(chuàng)建一個 promise。我們將會使用 jQuery 的 get 方法對 X 資源執(zhí)行 Ajax 請求。

const xFetcherPromise = new Promise( // 使用 "new" 關(guān)鍵字創(chuàng)建promise，并把它保存至一個變量
 function(resolve, reject) { // Promise 構(gòu)造函數(shù)需要一個帶有著 resolve 和 reject 這兩個參數(shù)的函數(shù)作為參數(shù)
 $.get("X") // 執(zhí)行 Ajax 請求
  .done(function(X) { // 一旦請求完成...
  resolve(X); // ... 把 X 值做為參數(shù)去 resolve promise
  })
  .fail(function(error) { // 如果請求失敗...
  reject(error); // ... 把 error 做為參數(shù)去 reject promise
  });
 }
)

如上示例所示，Promise 對象需要一個帶有兩個參數(shù) ( resolve 和 reject ) 的執(zhí)行函數(shù)。這兩個參數(shù)會把 pending 狀態(tài)的 promise 分別進行 fulfilled 和 rejected 的處理。

Promise 在實例創(chuàng)建后處于待處理狀態(tài)，并且它的執(zhí)行器函數(shù)立即執(zhí)行。一旦在執(zhí)行函數(shù)中調(diào)用了 resolve 或 reject 函數(shù)，Promise 將調(diào)用相關(guān)的處理程序。

Promise 處理器的用法

為了獲得 promise 結(jié)果（或錯誤），我們必須通過執(zhí)行以下操作來附加處理程序：

xFetcherPromise
 .then(function(X) {
 console.log(X);
 })
 .catch(function(err) {
 console.log(err)
 })

如果 promise 成功，則執(zhí)行 resolve ，并執(zhí)行 .then 參數(shù)所傳遞的函數(shù)。

如果失敗，則執(zhí)行 reject ，并執(zhí)行 .catch 參數(shù)所傳遞的函數(shù)。

注意： 如果 promise 在相應的處理程序附加時已經(jīng) fulfilled 或 rejected，處理程序?qū)⒈徽{(diào)用，
因此在異步操作完成和其處理程序被附加之間沒有競爭條件。 (參考： MDN)（MDN）。

擴展閱讀

• JavaScript Promises for dummies – Jecelyn Yeen
• JavaScript Promise API – David Walsh
• Using promises – MDN
• What is a promise – Eric Elliott
• JavaScript Promises: an Introduction – Jake Archibald
• Promise documentation – MDN

模板字符串

模板字符串是一種單行和多行字符串的 表達式插值 (expression interpolation)。

換句話說，它是一種新的字符串語法，你可以更方便地在 JavaScript 表達式中使用 (例如變量)。

簡單的代碼示例

const name = "Nick";
`Hello ${name}, the following expression is equal to four : ${2+2}`;

// Hello Nick, the following expression is equal to four: 4

擴展閱讀

• String interpolation – ES6 Features
• ES6 Template Strings – Addy Osmani

帶標簽(tag)的模板字符串

模板標簽是可以作為模板字符串(template literal)的前綴函數(shù)。當一個函數(shù)被這鐘方式調(diào)用時，第一個參數(shù)是出現(xiàn)在模板插值變量之間的字符串數(shù)組，并且隨后的參數(shù)是插值變量的值。可以使用展開運算符 ... 捕獲所有這些參數(shù)。 (參考: MDN)。

注意： 名為styled-components的著名庫很大程度上依賴于此功能。

以下是他們工作的玩具示例。

function highlight(strings, ...values) {
 // 愚人碼頭注：為了更好的理解函數(shù)的參數(shù)，我增加了這樣兩行代碼，特殊說明見示例代碼下面的說明；
 console.log(strings);//(3) ["I like ", " on ", ".", raw: Array(3)]
 console.log(values);//(2) ["jam", "toast"]

 const interpolation = strings.reduce((prev, current) => {
 return prev + current + (values.length ? "<mark>" + values.shift() + "</mark>" : "");
 }, "");

 return interpolation;
}

const condiment = "jam";
const meal = "toast";

highlight`I like ${condiment} on ${meal}.`;
// "I like <mark>jam</mark> on <mark>toast</mark>."

——-愚人碼頭注開始——-

愚人碼頭注，關(guān)于第一個參數(shù)：

標簽函數(shù)的第一個參數(shù)是一個包含了字符串字面值的數(shù)組（在本例中分別為”I like “,” on “和”.”）。如果我們這樣調(diào)用 highlight`I like ${condiment} on ${meal}` (注意最后面沒”.”)，那么第一個參數(shù)還是一個 3 個元素的數(shù)組：[“I like “, ” on “, “”]，特別注意最后一個元素是的空字符串””；

字符串的 raw 屬性

strings 確實是一個數(shù)組，但是它還有一個 raw 屬性。其屬性值 strings.raw 也是一個數(shù)組，其元素分別表示 strings 中對應的，經(jīng)過轉(zhuǎn)義之前在 模板字符串(Template literals) 中由用戶輸入的字符串。我們來看一個例子：

const myTag = (strs, ...exprs) => {
 console.log(strs);     //(3) ["x", "\y", "", raw: Array(3)]
 console.log(strs.raw);    //(3) ["x", "\\y", ""
 console.log(exprs);     //[1, 2]
};

const obj = { a: 1, b: 2 };
const result = myTag`x${obj.a}\\y${obj.b}`;

上例中 "\y" 未轉(zhuǎn)義之前對應的字符串為 "\\y" ，顯然這兩個字符串長度是不同的。

String.raw 是ES2015，內(nèi)置對象 String 的一個靜態(tài)方法，把它作為Tag，可以做到只替換嵌入表達式而不轉(zhuǎn)義字符。

const raw = String.raw`1\\2\\${1+2}`;

console.log(raw);   //1\\2\\3
console.log(raw.length); //7

const x = `1\\2\\${1+2}`;
console.log(x);    //1\2\3
console.log(x.length);  //5

規(guī)避問題

Template literals遵從字符串的轉(zhuǎn)義規(guī)則：

（1）以 \u 開頭，后跟4個16進制數(shù)字，例如，\u00B1表示±
（2）以 \u 開頭，使用大括號括起來的16進制數(shù)字，例如，\u{2F804} 表示 你
（3）以 \x 開頭，后跟2個16進制數(shù)字，例如，\xB1 表示 ±
（4）以 \ 開頭，后跟10進制數(shù)字，用來表示八進制字面量（注：strict mode下不支持）

解釋器遇到 \u 和 \x ，如果發(fā)現(xiàn)后面的字符不滿足以上條件，就會報語法錯。例如，

> latex`\unicode`
> Uncaught SyntaxError: Invalid Unicode escape sequence

不再展開，具體參考:Template literals。

愚人碼頭注，關(guān)于后面的剩余參數(shù)：

在第一個參數(shù)后的每一個參數(shù)，都是已經(jīng)求值后的替換表達式。 看下面這個例子：

var a = 5;
var b = 10;
function tag(strings, ...values) {
 console.log(values[0]);  // 15
 console.log(values[1]);  // 50

 return values[0]+values[1]; //65
}

tag`Hello ${ a + b } world ${ a * b}`;

上例中，剩余的2個參數(shù)值分別是 15 和 50;

——-愚人碼頭注結(jié)束——-

一個更有趣的例子：

function comma(strings, ...values) {
 return strings.reduce((prev, next) => {
 let value = values.shift() || [];
 value = value.join(", ");
 return prev + next + value;
 }, "");
}

const snacks = ['apples', 'bananas', 'cherries'];
comma`I like ${snacks} to snack on.`;
// "I like apples, bananas, cherries to snack on."

擴展閱讀

• Wes Bos on Tagged Template Literals
• Library of common template tags

ES6 模塊的導入 / 導出 (imports / exports)

ES6模塊用于訪問模塊中顯式導出的模塊中的變量或函數(shù)。

我強烈建議您查看 MDN 上有關(guān) import/export（請參閱下面的擴展閱讀資源），它們寫的既簡潔又完整。

用示例代碼說明

命名導出

命名導出用于從一個模塊導出多個值。

注意： 您命名導出的變量是一等公民(first-class citizens)。

// mathConstants.js
export const pi = 3.14;
export const exp = 2.7;
export const alpha = 0.35;

// -------------

// myFile.js
import { pi, exp } from './mathConstants.js'; // 命名導入 -- 類似于解構(gòu)語法
console.log(pi) // 3.14
console.log(exp) // 2.7

// -------------

// mySecondFile.js
import * as constants from './mathConstants.js'; // 將所有導出的值注入到 constants 變量中
console.log(constants.pi) // 3.14
console.log(constants.exp) // 2.7

雖然命名導入看起來像是 解構(gòu)(destructuring)，但它們具有不同的語法，并且不一樣。 他們不支持默認值，也不支持深層次的解構(gòu)。

此外，您可以使用別名，但語法不同于解構(gòu)中使用的語法：

import { foo as bar } from 'myFile.js'; // foo 被導入并注入到一個新的 bar 變量中

默認導入 / 導出 (imports / exports)

關(guān)于默認導出，每個模塊只能有一個默認導出。默認導出可以是函數(shù)，類，對象或其他任何東西。這個值被認為是“主要”的導出值，因為它將是最簡單的導入。 參考： MDN。

// coolNumber.js
const ultimateNumber = 42;
export default ultimateNumber;

// ------------

// myFile.js
import number from './coolNumber.js';
// 默認導出，將獨立于其名稱，自動注入到 number 這個變量; 
console.log(number) // 42

函數(shù)導出：

// sum.js
export default function sum(x, y) {
 return x + y;
}
// -------------

// myFile.js
import sum from './sum.js';
const result = sum(1, 2);
console.log(result) // 3

擴展閱讀

• ECMAScript 6 Modules(模塊)系統(tǒng)及語法詳解
• ES6 Modules in bulletpoints
• Export – MDN
• Import – MDN
• Understanding ES6 Modules
• Destructuring special case – import statements
• Misunderstanding ES6 Modules – Kent C. Dodds
• Modules in JavaScript

JavaScript 中的 this

this 操作符的行為與其他語言不同，在大多數(shù)情況之下是由函數(shù)的調(diào)用方式?jīng)Q定。 (參考： MDN)。

this 概念有很多細節(jié)，并不是那么容易理解，我強烈建議你深入了解下面的擴展閱讀。因此，我會提供我個人對于 this 的一點理解和想法。我是從 Yehuda Katz 寫的這篇文章 學到了這個提示。

function myFunc() {
 ...
}

// 在每個述句后面，你都可以在 myFunc 中找到 this 的值

myFunc.call("myString", "hello") // "myString" -- 首先， .call的參數(shù)值被注入到 *this*

// 在非嚴格模式下（non-strict-mode）
myFunc("hello") // window -- myFunc() 是 myFunc.call(window, "hello") 的語法糖

// 在嚴格模式下（strict-mode）
myFunc("hello") // undefined -- myFunc() 是 myFunc.call(undefined, "hello") 的語法糖

var person = {
 myFunc: function() { ... }
}

person.myFunc.call(person, "test") // person 對象 -- 首先， .call的參數(shù)值被注入到 *this*
person.myFunc("test") // person 對象 -- person.myFunc() 是 person.myFunc.call(person, "test") 的語法糖

var myBoundFunc = person.myFunc.bind("hello") // 創(chuàng)造了一個函數(shù)，并且把 "hello" 注入到 *this* 
person.myFunc("test") // person 對象 -- bind 方法對原有方法并無造成影響
myBoundFunc("test") // "hello" -- myBoundFunc 是把帶有 "hello" 的 person.myFunc 綁定到 *this*

擴展閱讀

• Understanding JavaScript Function Invocation and “this” – Yehuda Katz
• JavaScript this – MDN

類(Class)

JavaScript 是一個基于原型 的語言(然而Java 是基于類別 的語言)。 ES6 引入了 JavaScript 類，它們是用于基于原型的繼承的語法糖，而 不是 一種新的基于類繼承的模型(參考).

如果您熟悉其他語言的類，那么 類 (class) 這個詞的確容易理解出錯。 如果真的有此困擾，請避免在這樣的認知下思考 JavaScript 類的行為，并將其視為完全不同的新概念。

由于本文檔不是從根本上教你 JavaScript 語言，我會相信你知道什么是原型，以及它們的行為。 如果沒有，請參閱示例代碼下面列出的擴展閱讀，以方便你去理解這些概念：

• Understanding Prototypes in JS – Yehuda Katz
• A plain English guide to JS prototypes – Sebastian Porto
• Inheritance and the prototype chain – MDN

簡單的示例

ES6 之前，原型語法:

var Person = function(name, age) {
 this.name = name;
 this.age = age;
}
Person.prototype.stringSentence = function() {
 return "Hello, my name is " + this.name + " and I'm " + this.age;
}

使用 ES6 類(class)* 語法:

class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }

 stringSentence() {
 return "Hello, my name is " + this.name + " and I'm " + this.age;
 }
}

const myPerson = new Person("Manu", 23);
console.log(myPerson.age) // 23
console.log(myPerson.stringSentence()) // "Hello, my name is Manu and I'm 23

擴展閱讀

更好的理解原型：

• Understanding Prototypes in JS – Yehuda Katz
• A plain English guide to JS prototypes – Sebastian Porto
• Inheritance and the prototype chain – MDN

更好的理解類：

• ES6 Classes in Depth – Nicolas Bevacqua
• ES6 Features – Classes
• JavaScript Classes – MDN

Extends 和 super 關(guān)鍵字

extends 關(guān)鍵字用于類聲明或類表達式中，以創(chuàng)建一個類，該類是另一個類的子類(參考: MDN)。 子類繼承超類的所有屬性，另外可以添加新屬性或修改繼承的屬性。

super 關(guān)鍵字用于調(diào)用對象的父對象的函數(shù)，包括其構(gòu)造函數(shù)。

• super 關(guān)鍵字必須在構(gòu)造函數(shù)中使用 this 關(guān)鍵字之前使用。
• 調(diào)用 super() 調(diào)用父類構(gòu)造函數(shù)。 如果要將類的構(gòu)造函數(shù)中的一些參數(shù)傳遞給其父構(gòu)造函數(shù)，則可以使用 super(arguments) 來調(diào)用它。
• 如果父類有一個 X 的方法（甚至靜態(tài)），可以使用 super.X() 在子類中調(diào)用。

簡單的代碼示例

class Polygon {
 constructor(height, width) {
 this.name = 'Polygon';
 this.height = height;
 this.width = width;
 }

 getHelloPhrase() {
 return `Hi, I am a ${this.name}`;
 }
}

class Square extends Polygon {
 constructor(length) {
 // 這里，它調(diào)用父類的構(gòu)造函數(shù)的 length, 
 // 提供給 Polygon 的 width 和 height。
 super(length, length);
 // 注意: 在派生的類中, 在你可以使用 'this' 之前, 必須先調(diào)用 super() 。
 // 忽略這個, 這將導致引用錯誤。
 this.name = 'Square';
 this.length = length;
 }

 getCustomHelloPhrase() {
 const polygonPhrase = super.getHelloPhrase(); // 通過 super.X() 語法訪問父級方法
 return `${polygonPhrase} with a length of ${this.length}`;
 }

 get area() {
 return this.height * this.width;
 }
}

const mySquare = new Square(10);
console.log(mySquare.area) // 100
console.log(mySquare.getHelloPhrase()) // 'Hi, I am a Square' -- Square 繼承自 Polygon 并可以訪問其方法
console.log(mySquare.getCustomHelloPhrase()) // 'Hi, I am a Square with a length of 10'

注意 : 如果我們在 Square 類中調(diào)用 super() 之前嘗試使用 this，將引發(fā)一個引用錯誤：

class Square extends Polygon {
 constructor(length) {
 this.height; // 引用錯誤, 必須首先調(diào)用 super() !

 // 這里，它調(diào)用父類的構(gòu)造函數(shù)的 length, 
 // 提供給 Polygon 的 width 和 height。
 super(length, length);

 // 注意: 在派生的類中, 在你可以使用 'this' 之前, 必須先調(diào)用 super() 。
 // 忽略這個, 這將導致引用錯誤。
 this.name = 'Square';
 }
}

擴展閱讀

• Extends – MDN
• Super operator – MDN
• Inheritance – MDN

異步和等待(Async Await)

除 promises 之外，還有一種新的語法可能會遇到，那就是異步的 async / await。

async / await 函數(shù)的目的是簡化同步使用 promise 的行為，并對一組 promises 執(zhí)行一些處理。正如 promises 類似于結(jié)構(gòu)化的回調(diào)，async / await 類似于組合生成器(combining generators) 和 promises。異步函數(shù) 總是 返回一個 Promise。 (參考: MDN)

注意： 您必須了解什么是 promises 以及它們是如何工作的，然后再嘗試了解 async / await ，因為它們依賴于 promises 。
注意2： [await 必須在async函數(shù)中使用](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial- c7ec10518dd9#f3f0)，這意味著你不能程式碼的頂部使用 await，因為它并不在異步函數(shù)之內(nèi)。

簡單的代碼示例

async function getGithubUser(username) { // async 關(guān)鍵字允許在函數(shù)中使用 await ，意味著函數(shù)返回一個 promise 
 const response = await fetch(`https://api.github.com/users/${username}`); // 執(zhí)行在這里暫停，直到fetch返回的 Promise 被 resolved 
 return response.json();
}

getGithubUser('mbeaudru')
 .then(user => console.log(user)) // 記錄用戶響應 - 不能使用 await 語法，因為此代碼不在 async 函數(shù)中 
 .catch(err => console.log(err)); // 如果在我們的異步函數(shù)中拋出一個錯誤，我們將在這里捕獲它 

用示例代碼說明

Async / Await 是建立在 promises 概念之上的，但它們允許更強制的代碼風格。

async 操作符將一個函數(shù)標記為異步，并將始終返回一個 Promise 。你可以在 async 函數(shù)中使用 await 操作符來暫停該行代碼的執(zhí)行，直到表達式中返回的 Promise resolves 或 rejects 。

async function myFunc() {
 // 我們可以使用 *await* 操作符 因為這個函數(shù)是 異步(async) 的 
 return "hello world";
}

myFunc().then(msg => console.log(msg)) // "hello world" -- 由于 async 操作符，myFunc 的返回值將變成了一個 promise 

當異步函數(shù)運行到 return 語句時，將會使用返回的值來 fulfilled Promise。 如果在 async 函數(shù)中拋出錯誤，則 Promise 狀態(tài)將轉(zhuǎn)為 rejected 。 如果沒有從 async 函數(shù)返回任何值，則在執(zhí)行 async 函數(shù)完成時，仍然會返回 Promise 并 resolves 為無值。

await 操作符用于等待 Promise fulfilled ，只能在 async 函數(shù)體內(nèi)使用。 遇到這種情況時，代碼執(zhí)行將暫停，直到 promise fulfilled。

注意： fetch 是一個允許執(zhí)行 AJAX 請求，返回一個 Promise 的函數(shù)。

首先，我們來看看如何通過 promises 來獲取一個 github 用戶：

function getGithubUser(username) {
 return fetch(`https://api.github.com/users/${username}`).then(response => response.json());
}

getGithubUser('mbeaudru')
 .then(user => console.log(user))
 .catch(err => console.log(err));

等價于這里 async / await :

async function getGithubUser(username) { // promise + await 關(guān)鍵字使用允許
 const response = await fetch(`https://api.github.com/users/${username}`); // 在此處執(zhí)行停止，直到 promise 獲得 fulfilled
 return response.json();
}

getGithubUser('mbeaudru')
 .then(user => console.log(user))
 .catch(err => console.log(err));

當你需要鏈接(chain)相互依賴的 promises 時，async / await 語法特別方便 。

例如，如果您需要獲取一個令牌(token) ，以便能夠在數(shù)據(jù)庫上獲取博客文章，然后獲取作者信息：

注意： await 表達式需要包含在括號中，這樣可以在同一行上調(diào)用其 resolved 值的方法和屬性。

async function fetchPostById(postId) {
 const token = (await fetch('token_url')).json().token;
 const post = (await fetch(`/posts/${postId}?token=${token}`)).json();
 const author = (await fetch(`/users/${post.authorId}`)).json();

 post.author = author;
 return post;
}

fetchPostById('gzIrzeo64')
 .then(post => console.log(post))
 .catch(err => console.log(err));

錯誤處理

除非我們在 await 表達式外面包裹 try / catch 語句塊，否則不會捕獲異常 – 不管它們是在你的異步函數(shù)中被拋出還是在 await 期間被暫停 – 他們將 reject async 函數(shù)返回的承諾。
在 async 函數(shù)中使用 throw 語句與返回 reject 的 Promise 是相同。 (參考: PonyFoo).

Note : Promises 的行為相同的!

下面是的示例顯示了 promises 是如何處理錯誤鏈的:

function getUser() { // 這個 promise 將被 rejected!
 return new Promise((res, rej) => rej("User not found !"));
}

function getAvatarByUsername(userId) {
 return getUser(userId).then(user => user.avatar);
}

function getUserAvatar(username) {
 return getAvatarByUsername(username).then(avatar => ({ username, avatar }));
}

getUserAvatar('mbeaudru')
 .then(res => console.log(res))
 .catch(err => console.log(err)); // "User not found !"

等價于實用 async / await ：

async function getUser() { // 這個 promise 將被 rejected!
 throw "User not found !";
}

async function getAvatarByUsername(userId) => {
 const user = await getUser(userId);
 return user.avatar;
}

async function getUserAvatar(username) {
 var avatar = await getAvatarByUsername(username);
 return { username, avatar };
}

getUserAvatar('mbeaudru')
 .then(res => console.log(res))
 .catch(err => console.log(err)); // "User not found !"

擴展閱讀

• 使用 ES2017 中的 Async(異步) 函數(shù) 和 Await(等待)
• ES2017 新特性：Async Functions (異步函數(shù))
• Async/Await – JavaScript.Info
• ES7 Async/Await
• 6 Reasons Why JavaScript's Async/Await Blows Promises Away
• JavaScript awaits
• Using Async Await in Express with Node 8
• Async Function
• Await
• Using async / await in express with node 8

真值/假值(Truthy / Falsy)

在 JavaScript 中，truthy 或 falsy 值是在布爾上下文中求值時被轉(zhuǎn)換為布爾值的值。布爾上下文的一個最常見的例子是求值 if 條件：

每個值將被轉(zhuǎn)換為true，除非它們等于以下值：

• false
• 0
• "" (空字符串)
• null
• undefined
• NaN

下面是 布爾上下文(boolean context) 的例子：

• if 條件求值

if (myVar) {}

myVar 可以是任何 一等公民(first-class citizen) (變量, 函數(shù), 布爾值) ，但它會被轉(zhuǎn)換成一個布爾值，因為它會在布爾上下文中進行就值。

• 邏輯非 ! 操作符后面

如果其單獨的操作數(shù)可以轉(zhuǎn)換為 true ，則此操作符返回 false ; 否則返回 true 。

!0 // true -- 0 是 falsy(假) 值，所以它返回 true
!!0 // false -- 0 是 falsy(假) 值， 所以 !0 返回 true ， 所以 !(!0) 返回 false
!!"" // false -- 空字符串是 falsy(假) 值， 所以 NOT (NOT false) 等于 false

• 通過 Boolean 對象構(gòu)造函數(shù)

new Boolean(0) // false
new Boolean(1) // true

• 在一個三元表達式求值時

myVar ? "truthy" : "falsy"

myVar 在布爾上下文中進行求值。

擴展閱讀

• Truthy (MDN)
• Falsy (MDN)
• Truthy and Falsy values in JS – Josh Clanton

靜態(tài)方法

簡單說明

static 關(guān)鍵字用于聲明靜態(tài)方法。靜態(tài)方法是屬于 class(類) 對象，而該類的任何實例都不可以訪問的方法。

簡單的代碼示例

class Repo{
 static getName() {
 return "Repo name is modern-js-cheatsheet"
 }
}

// 請注意，我們不必創(chuàng)建 Repo 類的實例 
console.log(Repo.getName()) //Repo name is modern-js-cheatsheet

let r = new Repo();
console.log(r.getName()) // 拋出一個 TypeError: repo.getName is not a function

詳細說明

靜態(tài)方法可以通過使用 this 關(guān)鍵字在另一個靜態(tài)方法中調(diào)用，這不適用于非靜態(tài)方法。非靜態(tài)方法無法使用 this 關(guān)鍵字直接訪問靜態(tài)方法。

在靜態(tài)方法調(diào)用另一個靜態(tài)方法。

要在在靜態(tài)方法調(diào)用另一個靜態(tài)方法，可以使用 this 關(guān)鍵字 ，像這樣;

class Repo{
 static getName() {
 return "Repo name is modern-js-cheatsheet"
 }

 static modifyName(){
 return this.getName() + '-added-this'
 }
}

console.log(Repo.modifyName()) //Repo name is modern-js-cheatsheet-added-this

在非靜態(tài)方法調(diào)用靜態(tài)方法。

非靜態(tài)方法可以通過2種方式調(diào)用靜態(tài)方法;

1. ###### 使用 class(類) 名

要在非靜態(tài)方法訪問靜態(tài)方法，我們可以使用類名，并像屬性一樣調(diào)用靜態(tài)方法就可以了。 例如ClassName.StaticMethodName：

class Repo{
 static getName() {
 return "Repo name is modern-js-cheatsheet"
 }

 useName(){
 return Repo.getName() + ' and it contains some really important stuff'
 }
}

// 我們需要實例化這個 class(類)，以使用非靜態(tài)方法
let r = new Repo()
console.log(r.useName()) //Repo name is modern-js-cheatsheet and it contains some really important stuff

1. ###### 實用構(gòu)造函數(shù)

靜態(tài)方法可以在構(gòu)造函數(shù)對象上作為屬性被調(diào)用。

class Repo{
 static getName() {
 return "Repo name is modern-js-cheatsheet"
 }

 useName(){
 //作為構(gòu)造函數(shù)的屬性來調(diào)用靜態(tài)方法
 return this.constructor.getName() + ' and it contains some really important stuff'
 }
}

// 我們需要實例化這個 class(類)，以使用非靜態(tài)方法 
let r = new Repo()
console.log(r.useName()) //Repo name is modern-js-cheatsheet and it contains some really important stuff

擴展閱讀

• static keyword- MDN
• Static Methods- Javascript.info
• Static Members in ES6- OdeToCode

詞匯表

作用域(Scope)

在上下文之中有著 “可見的 (visible)” 值和表達式，又或者是可以被引用的。如果變量或是表達式并不在 “當前作用域中”，那么它將會是不可用的。

來源: MDN

變量的可變性(Variable mutation)

如果變量在其初始值后發(fā)生變化時我們就稱其為可變的。

var myArray = [];
myArray.push("firstEl") // myArray 發(fā)生改變

如果一個變量不能被改變的話，我們會說這個變量是 不可變的 (immutable) 。

查看 MDN Mutable 文章 了解更多詳情。

原項目

mbeaudru / modern-js-cheatsheet
Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.
https://mbeaudru.github.io/modern-js-cheatsheet/