前言
Web架構師養成系列共15篇，每周更新一篇，主要分享、探討目前大前端領域（前端、后端、移動端）企業中正在用的各種成熟的、新的技術。
部分文章也會分析一些框架的底層實現，讓我們做到知其然知其所以然。
本篇文章閱讀需要時長：約15分鍾
一、ECMAScript 6/7/8簡介
ECMAScript 6.0，簡稱ES6，第一個版本是在2015年6月進行發布，所以也稱之為《ECMAScript 2015 標准》（簡稱 ES2015）。
JavaScript是ECMAScript的一種實現（分支），遵循ECMAScript標准的。目前主流瀏覽器已經可以完美兼容和使用ES6。ES7/8部分新特性也已經被用於我們的實際開發中。
本篇主要講解ES6的知識點，內容如下：let和const、解構賦值、字符串操作、函數、數組API、集合、對象拷貝、延展操作符、對象補充、Generator、Proxy、Reflect。
二、let和const
ES6新增了let和const來聲明變量，主要是解決var聲明變量所造成的困擾和問題：
var不能用於定義常量 var可以重復聲明變量 var存在變量提升 var不支持塊級作用域 而let和const解決了以上問題，具體操作如下：
1）不可以重復聲明變量
let site = 'itLike'; let site = 'itLike'; console.log(site); 運行結果:
Identifier 'site' has already been declared 2）不存在變量提升
console.log(site); let site = 'itLike'; 運行結果： site is not defined 3）可以定義常量
不能給常量重新賦值，但如果是引用類型的話可以進行修改。
// 自然對數的底 const E = 2.718; E = 2.71; console.log(E); 運行結果: Assignment to constant variable. // 引用類型 const LK = { name:'itLike', intro: '喜歡IT, 就上撩課(itLike.com)' }; LK.name = '撩課'; console.log(LK); 運行結果: 
4) 塊級作用域
如果用var定義變量，變量是通過函數或者閉包擁有作用域；但，現在用let定義變量，不僅僅可以通過函數/閉包隔離，還可以通過塊級作用域隔離。
塊級作用域用一組大括號定義一個塊，使用 let 定義的變量在大括號的外部是訪問不到的，此外，let聲明的變量不會污染全局作用域。
{let site = 'itLike';} console.log(site); 運行結果:
site is not defined if(1){ let str = '小撩'; } console.log(str); 運行結果: str is not defined 5）案例運用
高級排他實現（不再使用閉包）
三、解構賦值
用於分解js中對象的結構。
1） 用於數組的結構
// 普通寫法 let nameArr = ['撩課', '小撩', '小煤球']; let name1 = nameArr[0]; let name2 = nameArr[1]; let name3 = nameArr[2]; // 解構寫法 let [name1, name2, name3] = nameArr; console.log(name1, name2, name3); 2）對象的解構
// 寫法1 let {name, age, sex} = {name: '小煤球', age: 1, sex: '公'}; // 結果: 小煤球 1 公 console.log(name, age, sex); // 寫法2： 解構重命名 let {name: lkName, age: lkAge, sex: lkSex} = {name: '小煤球', age: 1, sex: '公'}; // 結果: 小煤球 1 公 console.log(lkName, lkAge, lkSex); // 寫法3： 可以設置默認值 let {name, age, sex = '公'} = {name: '小煤球', age: 1}; console.log(sex); // 公 // 寫法4：省略解構 let [, , sex] = ['小煤球', 1, '公 ']; console.log(sex); 3） 應用場景
在封裝ajax的GET和POST請求時, 就可以運用到解構的知識點，代碼如下：
四、延展操作符
1）延展數組
let arr1 = [ 'a', 'b', 'c']; let arr2 = [1, 2, 3]; let result = [...arr1, ...arr2]; console.log(result); // [ "a", "b", "c", 1, 2, 3 ] 2）延展對象
let smallDog = {name:'小煤球', age: 1}; let bigDog = {name: 'Python', age: 2}; let dog = {...smallDog, ...bigDog}; console.log(dog); // {name: "Python", age: 2} 注意: 如果對象中的屬性一致, 會被覆蓋
3）開發應用場景
function getMinValue() { console.log(Math.min(...arguments)); } getMinValue(1, -99, 22, 10, 9); // -99 五、字符串操作
新增字符串方法
1) startsWith()
判斷字符串是否以 XX 開頭
let url = 'http://www.itlike.com'; console.log(url.startsWith('http')); // true 2) endsWith()
判斷字符串是否以 XX 結尾
let file = 'index.html'; console.log(file.endsWith('html')); // true 3) includes()
判斷字符串中是否包含 XX
let str = 'liaoke'; console.log(str.includes('ao')); // true 4) repeat()
拷貝n份
let title = '撩課在線'; console.log(title.repeat(100)); 5) padStart() / padEnd()
padStart()用於頭部補全，
padEnd()用於尾部補全;
第一個參數用來指定字符串的最小長度，
第二個參數是用來補全的字符串。
// "2030111111" let y1 = '2030'.padEnd(10, '1'); // "2030-11-22" let y2 = '11-22'.padStart(10, '2030-MM-DD'); console.log(y1, y2); 模板字符串
1) 模板字符串
模板字符串用反引號(`)包含，變量用${}括起來; 在開發中使用是非常靈活的。
let name = '小煤球'; let sex = '公'; let result = `我叫 ${name} , 我是 ${sex} 的`; console.log(result); // 我叫 小煤球 , 我是 公 的 2) 模板字符串遍歷插入
3) 模板字符串實現原理
let name = '小煤球'; let sex = '公'; let result = `我叫 ${name} , 我是 ${sex} 的`; result = result.replace(/\${([^}]*)}/g); console.log(result); 六、函數操作
1） 設置默認參數
function logPerson(name, sex = '男', age = 20) { console.log(name); console.log(sex); console.log(age); } // undefined 男 20 logPerson(); 2）延展參數轉化
let logName = function (arg1, ...arg2) { console.log(arg1, arg2); }; // 宋小寶 , ["趙薇", "王菲", "那英"] logName('宋小寶', '趙薇', '王菲', '那英'); 3）箭頭函數
箭頭函數簡化了函數的的定義方式;
一般以 "=>" 操作符左邊為輸入的參數;
而右邊則是進行的操作以及返回的值 inputs => output。
["趙薇", "王菲", "那英"].forEach( val => console.log(val) ); 注意:
1）多個參數要用()包起來，函數體有多條語句需要用{}包起來；
2）箭頭函數根本沒有自己的this，所以內部的this就是外層代碼塊的this。 正是因為它沒有this，從而避免了this指向的問題；
3）箭頭函數中沒有arguments對象。
注意：
1）let聲明的變量不會放在window上
2）對象不是作用域
let site = 'like.com'; let obj = { site: '撩課', func: () => { // this指向window console.log(this); // undefined console.log(this.site); } }; let func = obj.func; func(); 七、數組新增方法
ES6中在原有數組的方法上又新增了一些好用的方法，比如：forEach、findIndex、find、map、reduce、filter、every、some等。
1）Array.from()
將一個數組或者類數組變成新數組，是淺拷貝操作。
let oldArr = [ '小煤球', 10, {df1: '小Python', df2: '土豆'} ]; let newArr = Array.from(oldArr); console.log(newArr === oldArr); // false 2）Array.of()
創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。
// [8] console.log(Array.of(8)); // [1, 2, 3] console.log(Array.of(1, 2, 3)); // [ , , , , , , ] console.log(Array(8)); // [1, 2, 3] console.log(Array(1, 2, 3)); 3）Array.fill()
用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。
語法結構：arr.fill(value[, start[, end]])
let array1 = [1, 2, 3, 4, 5]; // 用 撩 替換 索引[2,5]中的內容 console.log(array1.fill('撩', 2, 5)); // 用 撩 替換 索引[1]中的內容 console.log(array1.fill('撩', 1)); // 用 撩 替換 數組中所有內容 console.log(array1.fill('撩')); 運行結果：
八、對象操作
8.1 屬性簡寫
如果對象中屬性值和變量名一樣，並且屬性的值就是變量表示值，則簡寫。
8.2 super
通過super可以調用prototype上的屬性或方法。
8.3 Object.is
對比兩個值是否相等
> console.log(Object.is(Array, Object)); **8.4 Object.setPrototypeOf** 將一個指定的對象的原型設置為另一個對象或者null let dog1 = { name: '小煤球' }; let obj = {name: 'xxx'}; Object.setPrototypeOf(dog1, obj); let dog2 = { __proto__: obj }; console.log(dog1.__proto__.name); console.log(dog2.__proto__.name); **8.5 對象拷貝-深拷貝和淺拷貝** **1）淺拷貝** Object.assign拷貝 let obj1 = { dog1: { name: '小煤球' } }; let obj2 = { name: '小Python' }; let obj = {}; Object.assign(obj, obj1, obj2); console.log(obj); 延展拷貝 let obj1 = { dog1: { name: '小煤球' } }; let obj2 = { name: '小Python' }; console.log({ ...obj1, ...obj2 }); 2）深拷貝
JSON.parse和JSON.stringify let obj1 = { dog1: { name: '小煤球' } }; let obj2 = { name: '小Python' }; console.log(JSON.parse(JSON.stringify({ ...obj1, ...obj2 }))); 遞歸調用實現
九、類操作
在之前定義類是通過構造函數來操作的，es6新增了class關鍵字，此時，我們也可以像其它語言一樣來創建各種類了。
class Person{
constructor(name, age){ this.name = name; this.age = age; } print(){ console.log('我叫' + this.name + ',今年' + this.age + '歲'); }}
類的繼承
小案例：五彩小球
運行效果：
核心代碼：
十、集合操作
1set
一個Set是一堆東西的集合，Set有點像數組，不過跟數組不一樣的是，Set里面不能有重復的內容；
> // 創建一個集合 let set = new Set(['張三', '李四', '王五', '張三', '李四']); console.log(set); // 一個屬性 console.log(set.size); // 四個方法 // add console.log(set.add('劉德華').add('旋之華')); console.log(set); // delete console.log(set.delete('張三')); console.log(set.delete('李四')); console.log(set); // has console.log(set.has('張三')); console.log(set.has('張三1')); // clear console.log(set.clear()); // undefined console.log(set); 2)map
Map結構提供了“值—值”的對應，是一種更完善的Hash結構實現。
如果你需要“鍵值對”的數據結構，Map比Object更合適。
它類似於對象，也是鍵值對的集合，但是“鍵”的范圍不限於字符串，各種類型的值（包括對象）都可以當作鍵。
實例屬性和方法：size、set、get、has、delete、clear
// 創建一個Map let obj1 = {a: 1}, obj2 = {b: 2}; const map = new Map([ ['name', '張三'], ['age', 18], ['sex', '男'], [obj1, '今天天氣很好'], [obj2, '適合敲代碼'], [[1,2], 'hhh'] ]); console.log(map); console.log(map.size); // set和get map.set('friends', ['趙六', '力氣']).set(['dog'], '小花'); console.log(map); console.log(map.get('name')); console.log(map.get(obj1)); // delete map.delete(obj1); console.log(map.delete('xxxx')); console.log(map); // has console.log(map.has(obj1)); console.log(map.has(obj2)); // clear map.clear(); console.log(map); // 遍歷 map.forEach(function (value, index) { console.log(index + ':' + value); }); // 注意事項 map.set({}, '呵呵呵呵呵'); map.set({}, '哈哈哈哈'); console.log(map); console.log({} === {}); 十一、Generator
為什么要使用generator?
開發中， 比如在做網絡請求時我們會進行異步調用，為了保證調用順序的正確性，通常我們會用回調函數，也可以采用Promise相關的技術來操作。
還有一種常用的解決方案，它就是Generator生成器函數。
顧名思義，它是一個生成器，它也是一個狀態機，內部擁有值及相關的狀態，生成器返回一個迭代器Iterator對象，我們可以通過這個迭代器，手動地遍歷相關的值、狀態，保證正確的執行順序。
1）聲明
Generator的聲明方式類似一般的函數聲明，只是多了個*號，並且一般可以在函數內看到yield關鍵字。
function* showNames() {
yield '張三'; yield '李四'; return '王五'; } let show = showNames(); // {done: false, value: "張三"} console.log(show.next()); // {done: false, value: "李四"} console.log(show.next()); // {done: true, value: "王五"} console.log(show.next()); // {done: true, value: undefined} console.log(show.next()); 迭代器有一個next方法，每次執行的時候會返回一個對象，對象里面有兩個屬性，一個是value表示返回的值，還有就是布爾值done，表示是否迭代完成。
2）模擬實現
十二、Proxy&&Reflect （了解）
從語法角度講JavaScript不支持重載。
原因很簡單，JS中函數可以傳入任意類型、任意個數的參數，
通通可以通過在函數內使用this.arguments獲得。
這樣，就無法實現同名函數參數列表不同實現不同功能。
當然，在實際使用過程中，可以人為去檢測傳入實參的個數及類型，來進行不同操作。
但是，這不能叫做重載。
ES6帶來了Proxy和Reflect，配合使用可以實現重載。
Proxy用於修改某些操作的默認行為，相當於對原始想進行的操作進行“包裝”；
Reflect對象的方法與Proxy對象的方法一一對應，這使得Proxy對象可以方便的調用對應的Reflect方法完成默認行為。
set實現：
PS: 什么時重載？
簡單說，就是函數或者方法有相同的名稱，但是參數列表不相同的情形，這樣的同名不同參數的函數或者方法之間，互相稱之為重載函數或者方法。
獲取代碼，有疑惑、答疑，加我微信yejh9522溝通交流即可；下篇更新預告： ES7/8新特性，Async和Promise