摘要：結(jié)合工作中使用情況，簡(jiǎn)單對(duì)進(jìn)行一些復(fù)習(xí)總結(jié)，包括常用的語(yǔ)法，等，以及短時(shí)間內(nèi)要上手需要重點(diǎn)學(xué)習(xí)的知識(shí)點(diǎn)不同工作環(huán)境可能有一些差別，主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個(gè)博客簡(jiǎn)介先說(shuō)一下，是一個(gè)標(biāo)準(zhǔn)化組織，他們

結(jié)合工作中使用情況，簡(jiǎn)單對(duì)es6進(jìn)行一些復(fù)習(xí)總結(jié)，包括常用的語(yǔ)法，api等，以及短時(shí)間內(nèi)要上手需要重點(diǎn)學(xué)習(xí)的知識(shí)點(diǎn)（不同工作環(huán)境可能有一些差別），主要參考鏈接是阮一峰的博客以及外文博客（阮老師大部分文章是直接翻譯的這個(gè)博客） http://2ality.com/p/about.html

先說(shuō)一下ECMAScript，ECMA是一個(gè)標(biāo)準(zhǔn)化組織，他們制定了JavaScript的語(yǔ)言標(biāo)準(zhǔn)，所以之后一直稱為ECMAScript，廣泛的講，Javascript是其一種標(biāo)準(zhǔn)實(shí)現(xiàn)，包括ECMAScript，dom，bom等

ECMA組織每年都會(huì)有新標(biāo)準(zhǔn)發(fā)布，標(biāo)準(zhǔn)名為ES+年份，所以我們會(huì)聽(tīng)到ES2015，ES2016，ES2017等，ES6其實(shí)就是ES2015，表示在15年發(fā)布的最新版本，相應(yīng)的ES2016，ES2017分別稱為ES7和ES8，依次往后對(duì)應(yīng)。

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

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

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

…

關(guān)于語(yǔ)法提案的流程，簡(jiǎn)單了解一下：一個(gè)新的語(yǔ)法從提案到成為標(biāo)準(zhǔn)需要經(jīng)過(guò)五個(gè)階段，每個(gè)階段都需要標(biāo)準(zhǔn)委員會(huì)TC39定時(shí)開(kāi)會(huì)進(jìn)行批準(zhǔn)

流程見(jiàn)鏈接：http://exploringjs.com/es2016...

需要注意的一點(diǎn)，所有的標(biāo)準(zhǔn)都是基于實(shí)現(xiàn)的，幾大廠商瀏覽器對(duì)提案的實(shí)現(xiàn)必須先于標(biāo)準(zhǔn)才會(huì)進(jìn)入定稿階段，包括Babel

我們常用的async和await，就是因?yàn)?6年開(kāi)會(huì)的時(shí)候沒(méi)有達(dá)到可定案的標(biāo)準(zhǔn)，而沒(méi)有進(jìn)入ES2016標(biāo)準(zhǔn)，最后添加在2017標(biāo)準(zhǔn)中

可參考該鏈接，有每年發(fā)布標(biāo)準(zhǔn)中新增的特性：http://2ality.com/2017/02/ecm...

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

不過(guò)我標(biāo)注了實(shí)際工程中的使用頻率，可以參考，針對(duì)性的學(xué)習(xí)，快速上手

提示：實(shí)際開(kāi)發(fā)中結(jié)合eslint可以幫助自己寫出更規(guī)范的代碼

使用頻率極高（為方便一起介紹，會(huì)將一些不常用的語(yǔ)法也列出來(lái)，標(biāo)題括號(hào)中也為大量使用）：

這是最基礎(chǔ)的兩個(gè)命令，都是聲明變量，要強(qiáng)制所有的聲明都使用他們兩個(gè)

與var的區(qū)別：

作用域

var作用域在全局

let與const作用域?yàn)榇a塊

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

暫時(shí)性死區(qū)，表示在一個(gè)塊級(jí)作用域內(nèi)，只要使用let聲明一個(gè)變量，聲明前將不能使用該變量

不允許重復(fù)聲明

與頂層對(duì)象window或者global的關(guān)系，var聲明的全局變量與頂層變量掛鉤，而let const聲明的全局變量不掛鉤

const與let區(qū)別：

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

我們可以直接在通過(guò) param = 1 的形式設(shè)置默認(rèn)值
包括為函數(shù)參數(shù)設(shè)置，為解構(gòu)設(shè)置（見(jiàn)下面介紹）
避免了以前的這種寫法：

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

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

需要注意的是：默認(rèn)值生效的條件是，嚴(yán)格等于 undefined，如果值為null，不會(huì)使用默認(rèn)值

解構(gòu)賦值其實(shí)就是為了更方便的從數(shù)組或者對(duì)象中通過(guò)屬性名取數(shù)據(jù)，熟練使用之后，配合默認(rèn)值，rest操作符可以很大程度提高效率，簡(jiǎn)化代碼

下面是一些簡(jiǎn)單的使用對(duì)比

var a = 1, b = 2, c = 3;
// 或者
var param = { a: 1, b: 2, c: 3 };
var a = param.a || 1; // 默認(rèn)值
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;
}

可以看出來(lái)，如果參數(shù)比較多的話，代碼很臃腫
如果用解構(gòu)賦值，我們可以寫成這樣，很簡(jiǎn)潔

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} 這個(gè)對(duì)象接收param參數(shù)，如果param未傳入，設(shè)置默認(rèn)值為{}，進(jìn)而，v1，v2從param或者默認(rèn)值{}中取值，取不到的話也設(shè)置默認(rèn)值

解構(gòu)的核心是，=號(hào)左邊通過(guò)屬性名直接獲取=號(hào)右邊對(duì)象相應(yīng)的屬性

并且所有類型的數(shù)據(jù)都可以被解構(gòu)，即出現(xiàn)在=號(hào)右邊，只不過(guò)字符串，數(shù)字，布爾值出現(xiàn)在等號(hào)右邊時(shí)會(huì)先轉(zhuǎn)化為對(duì)象
使用解構(gòu)可以大大改善代碼的可讀性，減少的冗余的代碼，更靈活簡(jiǎn)潔的獲取屬性，設(shè)置默認(rèn)值，尤其是配合rest操作符時(shí)。

使用在函數(shù)參數(shù)中（取代arguments）或者解構(gòu)賦值時(shí)，方便我們批量的獲取設(shè)置數(shù)據(jù)，大量用在數(shù)組和對(duì)象中，見(jiàn)下面 數(shù)組部分

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

注意：...只能出現(xiàn)一次并且必須出現(xiàn)在結(jié)尾

下面是錯(cuò)誤的用法：

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

ES6對(duì)函數(shù)進(jìn)行了很多擴(kuò)展，其中最常用的是箭頭函數(shù)以及rest參數(shù)和默認(rèn)值，rest參數(shù)與默認(rèn)值都與解構(gòu)關(guān)系密切

一般在函數(shù)中設(shè)置默認(rèn)值的參數(shù)應(yīng)該是尾參數(shù)

如果指定了默認(rèn)值，函數(shù)的length值為默認(rèn)值參數(shù)前面未使用默認(rèn)值的參數(shù)個(gè)數(shù)

注意：函數(shù)參數(shù)值會(huì)形成一個(gè)新的作用域，區(qū)別于函數(shù)內(nèi)作用域

這個(gè)使用頻率極高，大大簡(jiǎn)潔了代碼，尤其作為回調(diào)傳入的時(shí)候
與es5函數(shù)區(qū)別：

自動(dòng)綁定函數(shù)定義時(shí)作用域this，替換bind寫法（在需要手動(dòng)綁定this時(shí)，使用箭頭函數(shù)）

不能作為構(gòu)造函數(shù)

沒(méi)有arguments，使用rest代替

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

2.3.4 函數(shù)式編程中尾調(diào)用和尾遞歸，大大優(yōu)化內(nèi)存，待深入

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

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

const c = `${a}444${b}`

剩下的選擇性了解：

加強(qiáng)對(duì)unicode支持，使用頻率很小

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

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

repeat，padStart，padEnd 循環(huán)或者補(bǔ)全字符串，偶爾使用

主要是增加以下常用點(diǎn)

…操作符，類rest

替代apply寫法，如下，還有很多比如max，min求值，push一個(gè)數(shù)組等等

替代concat

clone

結(jié)合解構(gòu)賦值等

string -> array，替換split寫法，并且可識(shí)別4字節(jié)的unicode

將iterator接口的對(duì)象轉(zhuǎn)化為數(shù)組，比如dom獲取到的列表，任何部署了Iterator接口的類數(shù)組對(duì)象都可以，map，set對(duì)象等

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

find，findIndex，includes相比indexOf，可以識(shí)別NaN，并且更語(yǔ)義化

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) {…}
//  如果需要傳入一個(gè)數(shù)組，es5就要這樣寫
func.apply(null, [1, 2, 3])
// es6
func(…[1, 2, 3])

// 反轉(zhuǎn)字符串的實(shí)現(xiàn)
[…str].reverse().join(‘")

// 類數(shù)組對(duì)象
{
    ‘0’: ’12’,
    ‘1’: ‘123’,
  length: ‘2"
}

下面的選擇性學(xué)習(xí)：

Array.form 將類數(shù)組對(duì)象或者實(shí)現(xiàn)了iterator接口對(duì)象轉(zhuǎn)化為數(shù)組，常見(jiàn)的有dom集合，arguments，map，set等，使用頻率一般

區(qū)別于…操作符的是，不僅能轉(zhuǎn)化iterator，還能轉(zhuǎn)化類數(shù)組對(duì)象，如上代碼

可傳入第二個(gè)參數(shù)，類似于map方法

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

簡(jiǎn)化對(duì)象寫法，新增一些Object類方法，使用頻率極高

主要更新

簡(jiǎn)化對(duì)象寫法，工作中應(yīng)該全面改寫

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

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

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

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

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

屬性的遍歷：

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

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

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

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

Reflect.ownKeys 所有的自身屬性

下面的選擇性學(xué)習(xí)：

屬性名可以用表達(dá)式

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

新增super字段，區(qū)別于this，this指向該對(duì)象，super指向原型對(duì)象

對(duì)上面使用頻率高的知識(shí)點(diǎn)進(jìn)行了解學(xué)習(xí)以后便可以進(jìn)行基本開(kāi)發(fā)了，熟練使用后自然會(huì)體會(huì)到es6的美
但是實(shí)際工作中，不可能都是這些基礎(chǔ)語(yǔ)法，api，需要用到更多的高級(jí)知識(shí)點(diǎn)

目前我們?cè)诖罅渴褂玫挠校?br>這兒做簡(jiǎn)單介紹，工作之余可以自己去深入，其中Class好理解，Module和Decorate相對(duì)也好上手
主要是Promise與Async，簡(jiǎn)單了解之后也可以快速寫代碼，但是當(dāng)應(yīng)用復(fù)雜時(shí)，還是需要你深入了解其工作原理

推薦首學(xué)Promise，Decorator可在用到時(shí)再學(xué)

這是重中之重，ES6提出的異步的一種解決方案，要深入學(xué)習(xí)

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

ES6提供的語(yǔ)法糖，內(nèi)部使用prototype實(shí)現(xiàn)，以面向?qū)ο蟮姆绞綄?shí)現(xiàn)JS

裝飾器，可以對(duì)類或者類方法進(jìn)行裝飾，增加一些額外的行為

模塊化的實(shí)現(xiàn)，幫助我們拆分組合代碼，模塊化開(kāi)發(fā)
此處還有兩個(gè)概念，CommonJS和AMD模塊

除了前面介紹的，剩下就是一些工作中用到比較少的特性，包括一些你常用但是并不知道的底層技術(shù)，比如Iterator，當(dāng)你使用 … 或者for of時(shí)都會(huì)用到該知識(shí)點(diǎn)，建議學(xué)習(xí)

新增的數(shù)據(jù)結(jié)構(gòu)，與Java中類似，目前來(lái)看，習(xí)慣未養(yǎng)成，使用比較少，但是建議學(xué)習(xí)

工作中會(huì)常用的正則語(yǔ)法便可以了，推薦一個(gè)鏈接，幫助你更好的學(xué)習(xí)使用正則：https://regexper.com/#%2Fabc%...
有時(shí)候可以用先行斷言和后行斷言實(shí)現(xiàn)一些復(fù)雜的判斷

字符串可使用正則的方法：match，replace，search，split，在es6環(huán)境下內(nèi)部都是使用正則的方法來(lái)進(jìn)行匹配，可以將replace第二個(gè)參數(shù)傳入函數(shù)來(lái)觀察函數(shù)參數(shù)，比如

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

新增y修飾符，類似于g，但是下次匹配必須從剩余字符串的頭部開(kāi)始，對(duì)應(yīng)屬性為sticky

新增flags屬性，返回修飾符

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

支持后行斷言，介紹見(jiàn)筆記本->正則

新增具名組匹配，同上

matchAll一次性返回所有的匹配，返回結(jié)果是一個(gè)遍歷器

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

現(xiàn)在有string boolean，number，undefined，null，symbol六種，JS語(yǔ)言內(nèi)部大量使用，工作中偶爾會(huì)用，比如定義私有屬性的時(shí)候

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

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

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

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

新增 0b 0o表示二進(jìn)制和八進(jìn)制，es5八進(jìn)制表示為0開(kāi)頭（嚴(yán)格模式下不可用）

Number新增類方法，

isFinite與isNaN，與掛載在全局的兩個(gè)方法區(qū)別是參數(shù)只能是數(shù)值，方法內(nèi)部不會(huì)調(diào)用Number()轉(zhuǎn)化

parseInt與parseFloat，與全局保持一致

isInteger，參數(shù)只能為數(shù)值并且 25與25.0一樣，并且不在js精度范圍內(nèi)時(shí)會(huì)誤判

常量EPSILON，js能夠識(shí)別的最小誤差

Math對(duì)象新增大量方法，很少用

** 指數(shù)運(yùn)算，與Math.pow類似，對(duì)于特大運(yùn)算，可能有誤差