ECMAScript新特性(上)

JavaScript VS ECMAScript

ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）經過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用普遍，它每每被稱爲JavaScript或JScript，因此它能夠理解爲是JavaScript的一個標準，但實際上後二者是ECMA-262標準（ES標準）的實現和擴展。

JavaScript：一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML網頁上使用，用來給HTML網頁增長動態功能。

JavaScript由ECMAScript、DOM、BOM三部分組成，以下圖：

• ECMAScript：描述了該語言的語法和基本對象。

• DOM：文檔對象模型（DOM），描述處理網頁內容的方法和接口，好比：document。

• BOM：瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口，好比：navigator、history、screen、location、window。

塊級做用域

let

• let 聲明的變量具備塊做用域的特徵。

• 在同一個塊級做用域，不能重複聲明變量。

• let 聲明的變量不存在變量提高，換一種說法，就是 let 聲明存在暫時性死區（TDZ）。

const

• const 聲明方式，除了具備 let 的上述特色外，其還具有一個特色，即 const 定義的變量，一旦定義後，就不能修改，即 const 聲明的爲常量。

模板字符串

定義

模板字符串至關於增強版的字符串，用反引號(`) 標識。它能夠看成普通普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量或表達式。

示例

特色

• 模板字符串中嵌入變量，須要將變量名寫在 ${ } 中。

• 全部模板字符串的空格和換行，都是被保留的。

• 模板字符串的大括號內部，就是執行Javascript代碼。

• 支持嵌套。

對象與數組的解構

對象解構

對象解構的語法形式是在一個賦值操做左邊放置一個對象字面量，如：

解構賦值

一樣能夠在給變量賦值時使用解構語法，以下，在定義變量以後想要修改他們的值，能夠這樣：

默認值

使用解構賦值表達式時，若是指定的局部變量名稱在對象中不存在，那麼這個局部變量會被賦值爲undefined，以下：

當指定的屬性不存在時，能夠隨意定義一個默認值，在屬性名稱後添加一個等號（=）和相應的默認值便可：

爲非同名局部變量賦值

若是你但願使用不一樣命名的局部變量來存儲對象屬性的值，ES6中的一個擴展語法能夠知足：

嵌套對象解構

數組解構

與對象解構的語法相比，數組解構就簡單多了，它使用的是數組字面量，且解構操做所有在數組內完成，而不是像對象字面量語法同樣使用對象的命名屬性：

數組解構賦值

數組解構也可用於賦值上下文，但不須要用小括號包裹表達式，這一點與對象解構的約定不一樣。

複製代碼

嵌套數組解構

不定元素

複製代碼

混合解構

能夠混合使用對象解構和數組解構來建立更多複雜的表達式，如此一來，能夠從任何混雜着對象和數組的數據解構中提取你想要的信息：

複製代碼

擴展運算符和rest運算符

擴展運算符

擴展運算符用三個點號表示，功能是把數組或類數組對象展開成一系列用逗號隔開的值。

• 拆分數組

複製代碼

複製代碼

• 數組深拷貝

複製代碼

複製代碼

• 數組合並

複製代碼

複製代碼

• 字符串轉數組

複製代碼

複製代碼

rest運算符

rest運算符也是三個點號，不過其功能與擴展運算符剛好相反，把逗號隔開的值序列組合成一個數組。

• 直接合併成數組

複製代碼

複製代碼

• 部分合併成數組

複製代碼

複製代碼

• 利用解構來合成數組

複製代碼

複製代碼

箭頭函數

• 不綁定this

  
  

• 不能夠做爲構造函數來使用

複製代碼

• 不綁定arguments（若是有要使用arguments的時候可使用rest參數代替）

複製代碼

• 不可使用yield命令，所以箭頭函數不能用做Generator函數

數組擴展

擴展運算符

擴展運算符是對具備Iterator 接口的對象，均可以使用擴展運算符。

Array.from()

用於將兩類對象轉化爲真正的數組 1.相似數組的對象(只要據有length屬性, 均可以被轉化爲數組) 2.可遍歷（iterable）的對象。

複製代碼

Array.of()

將一組值轉化爲數組。

複製代碼

find和findIndex

find方法，用於找出第一個符合條件的數組成員，沒有找到會返回undefiend,findIndex方法返回的是第一個符合條件成員的位置, 若是找不到返回-1， find和findIndex均可以接受第二個參數,用來綁定回調函數的this。

複製代碼

複製代碼

數組實例的fill()

fill方法使用給定值，填充一個數組。用於初始化數組值，接受第二個和第三個參數,用於指定開始和結束位置。

複製代碼

數組實例的方法entries() keys()和values()複製代碼

這三個方法提供新的方法,用於遍歷數組, 都返回一個遍歷器對象，能夠用for..of循環進行遍歷，keys是對鍵名的遍歷，values是對鍵值的遍歷，entries是對鍵值對的遍歷。

複製代碼

數組實例的includes()

表示某個數組是否包含給定的值, 是則返回true，不然返回false。

複製代碼

對象擴展

屬性的簡潔表示

es6容許直接寫入變量和函數，做爲對象的屬性和方法。主要使用：1.函數返回值；2. module.exports導出；3. 屬性的setter和getter。

複製代碼

複製代碼

屬性的遍歷

es6一共5種方法能夠遍歷對象的屬性。

• for..in: 循環遍歷對象自身和繼承的可枚舉變量 (不含Symbol屬性)

• Object.keys(obj): 返回一個數組，包含對象自身全部可枚舉屬性的鍵名

• Object.getOwnPropertyNames(obj): 返回一個數組,包含對象自身的全部屬性的鍵名

• Object.getOwnPropertySymbols(obj): 返回一個數組，包含自身全部的symbol屬性的鍵名

• Reflect.ownKeys(): 返回一個數組，包含對象自身的全部鍵名，無論鍵名是 Symbol 或字符串，也不論是否可枚舉

super關鍵字

js中this的關鍵字老是指向函數所在的當前對象，es6新增了另外一個相似的關鍵字super，指向當前對象的原型對象，super只能用在對象的方法中，並且是方法的簡寫屬性。

複製代碼

對象的新增方法

• Object.is()：同值相等的算法, 用來比較兩個值嚴格相等

• Object.assign(target, source)：對象的合併，將原對象全部的可枚舉屬性，複製到目標對象上

__proto__屬性，Object.setPrototypeOf() Object.getPrototypeOf()

js語言對象繼承是經過原型鏈實現的，ES6提供了更多的原型鏈方法 __proto__屬性，Object.getPrototypeOf() 獲取原型prototype屬性 Object.setPrototypeOf(obj, proto), Object.create() 設置原型屬性。

參考資料

1. https://blog.csdn.net/pan_junbiao/article/details/90316255

2. https://blog.csdn.net/qq_30216191/article/details/81042842

3. https://blog.csdn.net/weixin_43482353/article/details/100623408

4. https://blog.csdn.net/DFF1993/article/details/82951227

5. https://www.cnblogs.com/jin-zhe/p/10034259.html

6. https://www.cnblogs.com/innooo/p/10442911.html

7. https://www.cnblogs.com/kuishen/p/11113189.html

微信公衆號「前端那些事兒」