全棧工程師知識點彙總——ES五、六、7新增內容（ES6）

## ES6

1. **2個新的關鍵字**

* let/const
* 塊做用域
* 沒有變量提高
* 不能重複定義
* 值不可變

(***let
1. 做用:
* 與var相似, 用於聲明一個變量
2. 特色:
* 在塊做用域內有效
* 不能重複聲明
* 不會預處理, 不存在提高
3. 應用:
* 循環遍歷加監聽
* 使用let取代var是趨勢)

(***const
1. 做用:
* 定義一個常量
2. 特色:
* 不能修改
* 其它特色同let
3. 應用:
* 保存不用改變的數據)

 

2. **變量的解構賦值**

* 將包含多個數據的對象(數組)一次賦值給多個變量
* 數據源: 對象/數組
* 目標: {a, b}/[a, b]

(1. 理解:
* 從對象或數組中提取數據, 並賦值給變量(多個)
2. 對象的解構賦值
let {n, a} = {n:'tom', a:12}
3. 數組的解構賦值
let [a,b] = [1, 'atguigu'];
4. 用途
* 給多個形參賦值)

3. 各類數據類型的擴展

* 字符串

* **模板字符串**
* 做用: 簡化字符串的拼接
* 模板字符串必須用``
* 變化的部分使用${xxx}定義
* contains(str) : 判斷是否包含指定的字符串
* startsWith(str) : 判斷是否以指定字符串開頭
* endsWith(str) : 判斷是否以指定字符串結尾
* repeat(count) : 重複指定次數

* 對象

* **簡化的對象寫法**
一、省略同名的屬性值
二、省略方法的:function

* 例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};

* Object.assign(target, source1, source2..) : 將源對象的屬性複製到目標對象上
* Object.is(v1, v2) : 判斷2個數據是否徹底相等
* __proto__屬性 : 隱式原型屬性

（補：3.5 深度克隆）

一、數據類型：
* 數據分爲基本的數據類型(String, Number, boolean, Null, Undefined)和對象數據類型
- 基本數據類型：
特色： 存儲的是該對象的實際數據
- 對象數據類型：
特色： 存儲的是該對象在棧中引用，真實的數據存放在堆內存裏

（* 拷貝數據 * ：
基本數據類型：拷貝後會生成一份新的數據，修改拷貝之後的數據不會影響原數據。
對象/數組：拷貝後不會生產新的數據，而是拷貝引用地址。修改拷貝之後的數據會影響原來的數據。）

二、複製數據
- 基本數據類型存放的就是實際的數據，可直接複製
let number2 = 2;
let number1 = number2;
- 克隆數據：對象/數組

淺拷貝（對象/數組）：
特色：拷貝的是引用，修改拷貝之後的數據會影響原數據。
深拷貝（深度克隆）：
特色：拷貝的時候生成新數據，修改拷貝之後的數據不會影響原數據。

一、區別： 淺拷貝/深度拷貝
判斷： 拷貝是否產生了新的數據仍是拷貝的是數據的引用
知識點：對象數據存放的是對象在棧內存的引用，直接複製的是對象的引用
let obj = {username: 'kobe'}
let obj1 = obj; // obj1 複製了obj在棧內存的引用

二、經常使用的拷貝技術
1). 直接賦值給一個變量：————淺拷貝
2). arr.concat(): ————數組淺拷貝
3). arr.slice():———— 數組淺拷貝
4). JSON.parse(JSON.stringify(arr/obj)): ————數組或對象深拷貝, 但不能處理函數
5). Object.assign()：————淺拷貝
6). 淺拷貝包含函數數據的對象/數組
7). 深拷貝包含函數數據的對象/數組

* 數組

* Array.from(v) : 將僞數組對象或可遍歷對象轉換爲真數組
* Array.of(v1, v2, v3) : 將一系列值轉換成數組
* find(function(value, index, arr){return true}) : 找出第一個知足條件返回true的元素
* findIndex(function(value, index, arr){return true}) : 找出第一個知足條件返回true的元素下標

* 函數

* **箭頭函數**

* 做用: 定義匿名函數
* 基本語法:
(形參)
* 沒有參數: () => console.log('xxxx')
* 一個參數: i => i+2
* 大於一個參數: (i,j) => i+j
(函數體)
* 函數體不用大括號: 默認返回結果
* 函數體若是有多個語句, 須要用{}包圍，如有須要返回的內容，須要手動返回
* 使用場景: 多用來定義回調函數

* 箭頭函數的特色：
一、簡潔
二、箭頭函數沒有本身的this，箭頭函數的this不是調用的時候決定的，而是在定義的時候處在的對象就是它的this
三、擴展理解： 箭頭函數的this看外層的是否有函數，
若是有，外層函數的this就是內部箭頭函數的this，
若是沒有，則this是window。

* **形參的默認值**

* 形參的默認值----當不傳入參數的時候默認使用形參裏的默認值
function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
}

* **三點運算符**

用途：一、rest(可變)參數
* 經過形參左側的...來表達, 取代arguments的使用
（arguments：函數內部收集實參的僞數組）
（arguments.callee指代函數自己，遞歸時會用到（下降耦合度））

二、擴展運算符(...)
* 能夠分解出數組或對象中的數據

4. set/Map容器結構

* 容器: 能保存多個數據的對象, 同時必須具有操做內部數據的方法
* 任意對象均可以做爲容器使用, 但有的對象不太適合做爲容器使用(如函數)
* **Set的特色**: 保存多個value, value是不重複 ====>數組元素去重
* **Map的特色**: 保存多個key--value, key是不重複, value是能夠重複的
* API
* Set()/Set(arr) //arr是一維數組
* add(value)
* delete(value)
* clear();
* has(value)
* size
*
* Map()/Map(arr) //arr是二維數組
* set(key, value)
* delete(key)
* clear()
* has(key)
* size

5. **for--of循環**
* 能夠遍歷任何容器
* 數組
* 對象
* 僞/類對象
* 字符串
* 可迭代的對象

6. **Promise**

1. 理解:
* Promise對象: 表明了將來某個將要發生的事件(一般是一個異步操做)
* 有了promise對象, 能夠將異步操做以同步的流程表達出來, 避免了層層嵌套的回調函數(俗稱'回調地獄')
* ES6的Promise是一個構造函數, 用來生成promise實例
二、做用：
* 解決`回調地獄`(回調函數的層層嵌套, 編碼是不斷向右擴展, 閱讀性不好)
* 能以同步編碼的方式實現異步調用
* 在es6以前原生的js中是沒這種實現的, 一些第三方框架(jQuery)實現了promise

* ES6中定義實現API:

// 1. 建立promise對象
var promise = new Promise(function(resolve, reject){
// 作異步的操做
if(成功) { // 調用成功的回調
resolve(result);
} else { // 調用失敗的回調
reject(errorMsg);
}
})
// 2. 調用promise對象的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))

3. promise對象的3個狀態
* pending: 初始化狀態
* fullfilled: 成功狀態
* rejected: 失敗狀態
4. 應用:
* 使用promise實現超時處理

* 使用promise封裝處理ajax請求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();

 

7.Symbol類型

前言：ES5中對象的屬性名都是字符串，容易形成重名，污染環境
Symbol：
概念：ES6中的添加了一種原始數據類型symbol(已有的原始數據類型：String, Number, boolean, null, undefined, 對象)
特色：
一、Symbol屬性對應的值是惟一的，解決命名衝突問題
二、Symbol值不能與其餘數據進行計算，包括同字符串拼串
三、for in, for of遍歷時不會遍歷symbol屬性。
使用：
一、調用Symbol函數獲得symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
二、傳參標識
let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')
三、內置Symbol值
* 除了定義本身使用的Symbol值之外，ES6還提供了11個內置的Symbol值，指向語言內部使用的方法。
- Symbol.iterator
* 對象的Symbol.iterator屬性，指向該對象的默認遍歷器方法(後邊講)

（7.5 Itertactor遍歷器）

概念： iterator是一種接口機制，爲各類不一樣的數據結構提供統一的訪問機制
做用：
一、爲各類數據結構，提供一個統一的、簡便的訪問接口；
二、使得數據結構的成員可以按某種次序排列
三、ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要供for...of消費。
工做原理：
- 建立一個指針對象(遍歷器對象)，指向數據結構的起始位置。
- 第一次調用next方法，指針自動指向數據結構的第一個成員
- 接下來不斷調用next方法，指針會一直日後移動，直到指向最後一個成員
- 每調用next方法返回的是一個包含value和done的對象，{value: 當前成員的值,done: 布爾值}
* value表示當前成員的值，done對應的布爾值表示當前的數據的結構是否遍歷結束。
* 當遍歷結束的時候返回的value值是undefined，done值爲true
原生具有iterator接口的數據(可用for of遍歷)
一、Array
二、String
三、arguments
四、set容器
五、map容器
。。。

 

8.Generator函數

概念：
一、ES6提供的解決異步編程的方案之一
二、Generator函數是一個狀態機，內部封裝了不一樣狀態的數據，
三、用來生成遍歷器對象
四、可暫停函數(惰性求值), yield可暫停，next方法可啓動。每次返回的是yield後的表達式結果
特色：
一、function 與函數名之間有一個星號
二、內部用yield表達式來定義不一樣的狀態
例如：
function* generatorExample(){
let result = yield 'hello'; // 狀態值爲hello
yield 'generator'; // 狀態值爲generator
}
三、generator函數返回的是指針對象(接11章節裏iterator)，而不會執行函數內部邏輯
四、調用next方法函數內部邏輯開始執行，遇到yield表達式中止，返回{value: yield後的表達式結果/undefined, done: false/true}
五、再次調用next方法會從上一次中止時的yield處開始，直到最後
六、yield語句返回結果一般爲undefined， 當調用next方法時傳參內容會做爲啓動時yield語句的返回值。

 

9.async函數
async函數(源自ES2017)
概念： 真正意義上去解決異步回調的問題，同步流程表達異步操做
本質： Generator的語法糖
語法：
async function foo(){
await 異步操做;
await 異步操做；
}
特色：
一、不須要像Generator去調用next方法，遇到await等待，當前的異步操做完成就往下執行
二、返回的老是Promise對象，能夠用then方法進行下一步操做
三、async取代Generator函數的星號*，await取代Generator的yield
四、語意上更爲明確，使用簡單，經臨牀驗證，暫時沒有任何反作用

 

10. **class類**

1. 經過class定義類/實現類的繼承
2. 在類中經過constructor定義構造方法
3. 經過new來建立類的實例
4. 經過extends來實現類的繼承
5. 經過super調用父類的構造方法
6. 重寫從父類中繼承的通常方法（子類的方法重寫）

11. **模塊化(後面講)**