摘要：結合工作中使用情況，簡單對進行一些復習總結，包括常用的語法，等，以及短時間內要上手需要重點學習的知識點不同工作環境可能有一些差別，主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個博客簡介先說一下，是一個標準化組織，他們

結合工作中使用情況，簡單對es6進行一些復習總結，包括常用的語法，api等，以及短時間內要上手需要重點學習的知識點（不同工作環境可能有一些差別），主要參考鏈接是阮一峰的博客以及外文博客（阮老師大部分文章是直接翻譯的這個博客） http://2ality.com/p/about.html

先說一下ECMAScript，ECMA是一個標準化組織，他們制定了JavaScript的語言標準，所以之后一直稱為ECMAScript，廣泛的講，Javascript是其一種標準實現，包括ECMAScript，dom，bom等

ECMA組織每年都會有新標準發布，標準名為ES+年份，所以我們會聽到ES2015，ES2016，ES2017等，ES6其實就是ES2015，表示在15年發布的最新版本，相應的ES2016，ES2017分別稱為ES7和ES8，依次往后對應。

現在大部分博客，文章，分享中提到的ES6其實也可以理解為ES6+，只不過因為2015年之前，ECMAScript有很多年沒有發版（也有歷史原因：ES4的夭折），積累了大量的新語法，api，所以在2015年一次性加在了ES6版本中發布，之后每年都只有很少的一些新增，比如：

ES7: http://2ality.com/2016/01/ecm... (只有很少的兩個屬性)

ES8：http://2ality.com/2016/02/ecm...

…

關于語法提案的流程，簡單了解一下：一個新的語法從提案到成為標準需要經過五個階段，每個階段都需要標準委員會TC39定時開會進行批準

流程見鏈接：http://exploringjs.com/es2016...

需要注意的一點，所有的標準都是基于實現的，幾大廠商瀏覽器對提案的實現必須先于標準才會進入定稿階段，包括Babel

我們常用的async和await，就是因為16年開會的時候沒有達到可定案的標準，而沒有進入ES2016標準，最后添加在2017標準中

可參考該鏈接，有每年發布標準中新增的特性：http://2ality.com/2017/02/ecm...

下面主要就是結合平時工作，簡單介紹最常用的語法，類方法以及實例方法等，下面主要是一些列舉，大部分知識點想深入學習的話，還是得到阮老師博客或者外文博客上學習

不過我標注了實際工程中的使用頻率，可以參考，針對性的學習，快速上手

提示：實際開發中結合eslint可以幫助自己寫出更規范的代碼

使用頻率極高（為方便一起介紹，會將一些不常用的語法也列出來，標題括號中也為大量使用）：

這是最基礎的兩個命令，都是聲明變量，要強制所有的聲明都使用他們兩個

與var的區別：

作用域

var作用域在全局

let與const作用域為代碼塊

變量提升 （https://www.jianshu.com/p/68a...）

暫時性死區，表示在一個塊級作用域內，只要使用let聲明一個變量，聲明前將不能使用該變量

不允許重復聲明

與頂層對象window或者global的關系，var聲明的全局變量與頂層變量掛鉤，而let const聲明的全局變量不掛鉤

const與let區別：

const定義一個只讀的常量，一旦聲明不可改變，但需要注意的是，不可改變的是變量指向的那個內存地址，如果使用const聲明一個對象，對象內部是可以改變的，如果要強制一個對象不可改變，那么可以使用Object.freeze來凍結（該方法只凍結該對象，不會凍結其屬性，所以可考慮遞歸）

我們可以直接在通過 param = 1 的形式設置默認值
包括為函數參數設置，為解構設置（見下面介紹）
避免了以前的這種寫法：

function test(data) {
    data = data || {};
    ...
}

// 可以直接寫為
function test(data = {}) {
    ...
}

需要注意的是：默認值生效的條件是，嚴格等于 undefined，如果值為null，不會使用默認值

解構賦值其實就是為了更方便的從數組或者對象中通過屬性名取數據，熟練使用之后，配合默認值，rest操作符可以很大程度提高效率，簡化代碼

下面是一些簡單的使用對比

var a = 1, b = 2, c = 3;
// 或者
var param = { a: 1, b: 2, c: 3 };
var a = param.a || 1; // 默認值
var b = param.b;
var c = param.c;
// 或者
function add(param) {
    param = param || {};
    var v1 = param.v1 || 0;
    var v2 = param.v2 || 0;
    return v1 + v2;
}

可以看出來，如果參數比較多的話，代碼很臃腫
如果用解構賦值，我們可以寫成這樣，很簡潔

let [a, b, c] = [1, 2, 3]
// 或者
let {a = 1, b, c} = {a: 1, b: 2, c: 3}
// 或者
function add({v1 = 0, v2 = 0} = {}){
    return v1 + v2;
}
// 類比上面代碼，其中 {v1 = 0, v2 = 0} 這個對象接收param參數，如果param未傳入，設置默認值為{}，進而，v1，v2從param或者默認值{}中取值，取不到的話也設置默認值

解構的核心是，=號左邊通過屬性名直接獲取=號右邊對象相應的屬性

并且所有類型的數據都可以被解構，即出現在=號右邊，只不過字符串，數字，布爾值出現在等號右邊時會先轉化為對象
使用解構可以大大改善代碼的可讀性，減少的冗余的代碼，更靈活簡潔的獲取屬性，設置默認值，尤其是配合rest操作符時。

使用在函數參數中（取代arguments）或者解構賦值時，方便我們批量的獲取設置數據，大量用在數組和對象中，見下面 數組部分

該語法在ES2018中成為規范，但是工作中早已大量使用，參考博客 http://2ality.com/2016/10/res...

注意：...只能出現一次并且必須出現在結尾

下面是錯誤的用法：

const {...rest, foo} = obj; // SyntaxError
const {foo, ...rest1, ...rest2} = obj; // SyntaxError

ES6對函數進行了很多擴展，其中最常用的是箭頭函數以及rest參數和默認值，rest參數與默認值都與解構關系密切

一般在函數中設置默認值的參數應該是尾參數

如果指定了默認值，函數的length值為默認值參數前面未使用默認值的參數個數

注意：函數參數值會形成一個新的作用域，區別于函數內作用域

這個使用頻率極高，大大簡潔了代碼，尤其作為回調傳入的時候
與es5函數區別：

自動綁定函數定義時作用域this，替換bind寫法（在需要手動綁定this時，使用箭頭函數）

不能作為構造函數

沒有arguments，使用rest代替

可能用到的，使用bind綁定之后，name屬性前會加bound前綴

2.3.4 函數式編程中尾調用和尾遞歸，大大優化內存，待深入

常用的主要是以下幾點
最常用的是支持模板寫法，使用反引號``和${} 取代字符串拼接

// 比如：
const a = ‘222’, b = ‘333’;
const c = a + ‘444’ + b;

const c = `${a}444$`

剩下的選擇性了解：

加強對unicode支持，使用頻率很小

支持for of 遍歷，使用頻率小，可使用split或者rest代替

增加搜索方法，includes，startsWith，endsWith，之前只有一個indexOf

repeat，padStart，padEnd 循環或者補全字符串，偶爾使用

主要是增加以下常用點

…操作符，類rest

替代apply寫法，如下，還有很多比如max，min求值，push一個數組等等

替代concat

clone

結合解構賦值等

string -> array，替換split寫法，并且可識別4字節的unicode

將iterator接口的對象轉化為數組，比如dom獲取到的列表，任何部署了Iterator接口的類數組對象都可以，map，set對象等

實例方法，比如coryWithin，find，findIndex，fill，entries，keys，values，includes等

find，findIndex，includes相比indexOf，可以識別NaN，并且更語義化

let a = [1, 2, 3], b = [2, 3, 4];
let merge = […a, …b] // [1, 2, 3, 2, 3, 4]

// 替換apply
function func (a, b, c) {…}
//  如果需要傳入一個數組，es5就要這樣寫
func.apply(null, [1, 2, 3])
// es6
func(…[1, 2, 3])

// 反轉字符串的實現
[…str].reverse().join(‘")

// 類數組對象
{
    ‘0’: ’12’,
    ‘1’: ‘123’,
  length: ‘2"
}

下面的選擇性學習：

Array.form 將類數組對象或者實現了iterator接口對象轉化為數組，常見的有dom集合，arguments，map，set等，使用頻率一般

區別于…操作符的是，不僅能轉化iterator，還能轉化類數組對象，如上代碼

可傳入第二個參數，類似于map方法

Array.of 將一組值轉化為數組，替代 Array() 或者 new Array()，使用頻率一般

簡化對象寫法，新增一些Object類方法，使用頻率極高

主要更新

簡化對象寫法，工作中應該全面改寫

比如{x, y} 等同于{x: x, y: y}

函數類似 {func() {}} 等同于 {func: function() {}}

新增keys，values，entris方法，獲取對象的屬性名數組，值數組或者鍵值對，使用較多，可配合for of使用（必須是可遍歷對象）

Object.is 類似于 ===，但是可識別 isNaN === isNaN // true 與+0 === -0 // false，與我們主觀意識一致

Object.assign 合并對象的可枚舉屬性，后者會覆蓋前者，屬于淺拷貝

屬性的遍歷：

for in 遍歷自身以及繼承的可枚舉屬性

Object.keys 自身的可枚舉屬性鍵名

getOwnPropertyNames 自身所有屬性，包括不可枚舉

getOwnPropertySymbols 獲取自身所有symbol屬性鍵名，前三者都不包括symbol

Reflect.ownKeys 所有的自身屬性

下面的選擇性學習：

屬性名可以用表達式

提供一些對原型鏈的操作，使用極少，有興趣可研究

新增super字段，區別于this，this指向該對象，super指向原型對象

對上面使用頻率高的知識點進行了解學習以后便可以進行基本開發了，熟練使用后自然會體會到es6的美
但是實際工作中，不可能都是這些基礎語法，api，需要用到更多的高級知識點

目前我們在大量使用的有：
這兒做簡單介紹，工作之余可以自己去深入，其中Class好理解，Module和Decorate相對也好上手
主要是Promise與Async，簡單了解之后也可以快速寫代碼，但是當應用復雜時，還是需要你深入了解其工作原理

推薦首學Promise，Decorator可在用到時再學

這是重中之重，ES6提出的異步的一種解決方案，要深入學習

也是異步的解決方案，代替Generator，更友好，語義化的使用

ES6提供的語法糖，內部使用prototype實現，以面向對象的方式實現JS

裝飾器，可以對類或者類方法進行裝飾，增加一些額外的行為

模塊化的實現，幫助我們拆分組合代碼，模塊化開發
此處還有兩個概念，CommonJS和AMD模塊

除了前面介紹的，剩下就是一些工作中用到比較少的特性，包括一些你常用但是并不知道的底層技術，比如Iterator，當你使用 … 或者for of時都會用到該知識點，建議學習

新增的數據結構，與Java中類似，目前來看，習慣未養成，使用比較少，但是建議學習

工作中會常用的正則語法便可以了，推薦一個鏈接，幫助你更好的學習使用正則：https://regexper.com/#%2Fabc%...
有時候可以用先行斷言和后行斷言實現一些復雜的判斷

字符串可使用正則的方法：match，replace，search，split，在es6環境下內部都是使用正則的方法來進行匹配，可以將replace第二個參數傳入函數來觀察函數參數，比如

新增u修飾符，可識別大于uffff的unicode字符

新增y修飾符，類似于g，但是下次匹配必須從剩余字符串的頭部開始，對應屬性為sticky

新增flags屬性，返回修飾符

新增dotAll模式，見鏈接http://2ality.com/2017/07/reg...，.可以匹配任意單個字符，之前不匹配終止符，n r 等

支持后行斷言，介紹見筆記本->正則

新增具名組匹配，同上

matchAll一次性返回所有的匹配，返回結果是一個遍歷器

es6新增的原始數據類型，表示獨一無二的值，一般使用為直接Symbol(str)，Symbol.for(str)，Symbol.keyFor(str)

現在有string boolean，number，undefined，null，symbol六種，JS語言內部大量使用，工作中偶爾會用，比如定義私有屬性的時候

const FETCH = Symbol("fetch");
import fetch from "./lib/fetch";

module.exports = {
  get fetch() {
    if (!this[FETCH]) {
      this[FETCH] = fetch;
    }
    return this[FETCH;
  },
}

Proxy即在目標對象外設置一層代理，外界真正訪問到該對象時必須先訪問代理
Reflect類似Proxy，是ES6為了操作對象而新增的Api，將一些Object上的對象放在了Reflect對象上，并修改了一些行為

這部分主要是新增方法，使用頻率總體不高

新增 0b 0o表示二進制和八進制，es5八進制表示為0開頭（嚴格模式下不可用）

Number新增類方法，

isFinite與isNaN，與掛載在全局的兩個方法區別是參數只能是數值，方法內部不會調用Number()轉化

parseInt與parseFloat，與全局保持一致

isInteger，參數只能為數值并且 25與25.0一樣，并且不在js精度范圍內時會誤判

常量EPSILON，js能夠識別的最小誤差

Math對象新增大量方法，很少用

** 指數運算，與Math.pow類似，對于特大運算，可能有誤差