講真，ECMAScript的ES6新特性彙總！！前端快來學習！！

時間  2020-08-18 標籤 講 真 ecmascript es6 es 6 新 特性 彙總 前端 快來 學習
以前看到同窗寫的前端代碼，沒看懂，通過我一番度娘，終於瞭解了ECMAScript的ES6新特性，接下來一塊兒看看吧(後附思惟導圖)！

1 、ES6 新特性

如今使用主流的前端框架中，如ReactJS、Vue.js、angularjs等，都會使用到ES6的新特性，做爲一名高級工程師而言，ES6也就成爲了必修課，因此本套課程先以ES6的新特性開始。前端

1.一、瞭解ES6

ES6，是ECMAScript 6的簡稱，它是 JavaScript 語言的下一代標準，己於 2015 年 6 月正式發 布。
它的目標是使 JavaScript語言能夠用於編寫複雜的大型應用程序，成爲企業級開發語言。java

1.1.1.什麼是ECMAScript？

來看下前端的發展歷程：
web1.0時代：
最初的網頁以 HTML爲主，是純靜態的網頁。網頁是隻讀的，信息流只能從服務的到客戶端單向流通。開發人員
也只關心頁面的樣式和內容便可。
web2.0時代：
1995 年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言。
1996 年，微軟發佈了JScript，實際上是JavaScript的逆向工程實現。
1997 年，爲了統一各類不一樣script腳本語言，ECMA（歐洲計算機制造商協會）以JavaScript爲基礎，制定了
ECMAscript 標準規範。JavaScript和JScript都是 ECMAScript 的標準實現者，隨後各大瀏覽器廠商紛紛實現了
ECMAScript 標準。
因此，ECMAScript是瀏覽器腳本語言的規範，而各類咱們熟知的js語言，如JavaScript則是規範的具體實現。angularjs

1.二、let 和 const 命令

var
以前，咱們寫js定義變量的時候，只有一個關鍵字： var
var 有一個問題，就是定義的變量有時會莫名奇妙的成爲全局變量。
例如這樣的一段代碼：
在這裏插入圖片描述
運行打印的結果是以下：
在這裏插入圖片描述這樣，就把變量的 i的做用域控制在了循環內部
constweb

const 聲明的變量是常量，不能被修改，相似於java中final關鍵字。
在這裏插入圖片描述編程

1.三、字符串擴展

在ES6中，爲字符串擴展了幾個新的API：
includes() ：返回布爾值，表示是否找到了參數字符串。
startsWith() ：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith() ：返回布爾值，表示參數字符串是否在原字符串的尾部。
實驗一下：
在這裏插入圖片描述
在兩個 `之間的部分都會被做爲字符串的值，能夠任意換行。數組

1.3 、解構表達式

什麼是解構？ – ES6中容許按照必定模式從數組和對象中提取值，而後對變量進行賦值，這被稱爲解構 (
Destructuring)。好比有一個數組：
在這裏插入圖片描述
在這裏插入圖片描述promise

1.3.二、對象解構

例若有個person對象：
在這裏插入圖片描述
在這裏插入圖片描述
如過想要用其它變量接收，須要額外指定別名：
在這裏插入圖片描述瀏覽器

{name:n} ：name是person中的屬性名，冒號後面的n是解構後要賦值給的變量。

1.四、函數優化

在ES6中，對函數的操做作了優化，使得咱們在操做函數時更加的便捷。前端框架

1.4.一、函數參數默認值

在ES6之前，咱們沒法給一個函數參數設置默認值，只能採用變通寫法：
在這裏插入圖片描述數據結構

1.4.二、箭頭函數

ES6中定義函數的簡寫方式：
一個參數時：
在這裏插入圖片描述
代碼不止一行，能夠用 {} 括起來。
在這裏插入圖片描述

1.4.三、對象的函數屬性簡寫

在這裏插入圖片描述

1.4.四、箭頭函數結合解構表達式

在這裏插入圖片描述

1.五、map和reduce

ES6中，數組新增了map和reduce方法。
在這裏插入圖片描述

1.5.一、reduce

reduce() ：接收一個函數（必須）和一個初始值（可選），該函數接收兩個參數：

第一個參數是上一次 reduce處理的結果
第二個參數是數組中要處理的下一個元素
reduce() 會從左到右依次把數組中的元素用reduce處理，並把處理的結果做爲下次reduce的第一個參數。若是是第一次，會把前兩個元素做爲計算參數，或者把用戶指定的初始值做爲起始參數
舉例：
在這裏插入圖片描述

1.6 、擴展運算符

擴展運算符(spread)是三個點(…)， 將一個數組轉爲用逗號分隔的參數序列 。
用法：

console.log (...[1, 2, 3]); //1 2 3
  console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
  function add(x, y) {
    return x + y;
 }
  var numbers = [1, 2];
  console.log(add(...numbers)); // 3
  // 數組合並
  let arr = [...[1,2,3],...[4,5,6]];
  console.log(arr); //[1, 2, 3, 4, 5, 6]
  // 與解構表達式結合
  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first, rest) //1 [2, 3, 4, 5]
  //將字符串轉成數組
  console.log([...'hello']) //["h", "e", "l", "l", "o"]

1.七、Promise

所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法
上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣
的方法進行處理。
咱們能夠經過Promise的構造函數來建立Promise對象，並在內部封裝一個異步執行的結果。
語法：
在這裏插入圖片描述
示例：

const p = new Promise(function (resolve, reject) {
  // 這裏咱們用定時任務模擬異步
  setTimeout(() => {
    const num = Math.random();
    // 隨機返回成功或失敗
    if (num < 0.5) {
      resolve("成功！num:" + num)
   } else {
      reject("出錯了！num:" + num)
   }
 }, 300)
})
// 調用promise
p.then(function (msg) {
  console.log(msg);
}).catch(function (msg) {
  console.log(msg);
})

在這裏插入圖片描述

1.8 、set和map

ES6提供了Set和Map的數據結構。
Set，本質與數組相似。不一樣在於Set中只能保存不一樣元素，若是元素相同會被忽略。和java中的Set集合很是類似。
構造函數：
在這裏插入圖片描述
map，本質是與Object相似的結構。不一樣在於，Object強制規定key只能是字符串。而Map結構的key能夠是任意對象。即：
object 是 <string,object>集合
map 是<object,object>集合
構造函數：在這裏插入圖片描述

1.九、class（類）的基本語法

JavaScript 語言的傳統方法是經過構造函數定義井生成新對象。ES6中引入了class的概念，經過class關鍵字自定義
類。
基本用法：
在這裏插入圖片描述
類的繼承：在這裏插入圖片描述

1.十、Generator函數

Generator 函數是 ES6 提供的 一種異步編程解決方案，語法行爲與傳統函數徹底不一樣 。
Generator函數有兩個特徵: 一是 function命令與函數名 之間有一個星號: 二是 函數體內部使用 yield吾句定義不一樣的
內部狀態。
用法：
在這裏插入圖片描述
能夠看到，經過hello()返回的h對象，每調用一次next()方法返回一個對象，該對象包含了value值和done狀態。直到遇到return關鍵字或者函數執行完畢，這個時候返回的狀態爲ture，表示已經執行結束了。

1.十一、for…of循環

經過for…of能夠循環遍歷Generator函數返回的迭代器。
用法：
在這裏插入圖片描述

1.十二、修飾器(Decorator)

修飾器(Decorator)是一個函數， 用來修改類的行爲。 ES2017 引入了這項功能， 目前 Babel 轉碼器己經支持。
使用：在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
參考地址:https://blog.csdn.net/Marion158/article/details/99219058

联系我们 沪ICP备2021010478号-7