ECMASript是由 Ecma 國際通過 ECMA-262 標準化的腳本程序設計語言。javaScript也是該規范的一種實現。

筆記出處：b站

尚硅谷Web前端ES6教程，涵蓋ES6-ES11
阮一峰大佬的：ECMAScript 6 入門

ES6

let 關鍵字

使用let關鍵字聲明變量的特點：

1. 不允許重復聲
2. 塊兒級別作用域
3. 不存在變量提升
4. 不影響作用域鏈

const關鍵字

const關鍵字用來聲明常量，const聲明由以下特點

1. 聲明必須賦初始值
2. 標識符一般為大寫
3. 不允許重復聲明
4. 值不允許修改
5. 塊兒級作用域

變量的解構賦值

ES6允許按照一定的模式，從數組和對象中提取值，對變量進行賦值

	 //數組的解構賦值const arr = ['張學友', '劉德華', '黎明', '郭富城'];let [zhang, liu, li, guo] = arr;//對象的解構賦值const lin = {name: '林志穎',tags: ['車手', '歌手', '小旋風', '演員']};let {name, tags} = lin;

模板字符串

模板字符串（template string）是增強版的字符串，用反引號（`）標識，特點：

1. 字符串中可以出現換行符
2. 可以使用 ${xxx} 形式輸出變量

	// 定義字符串let str = `<ul><li>沈騰</li><li>瑪麗</li><li>魏翔</li><li>艾倫</li></ul>`;// 變量拼接let star = '王寧';let result = `${star}在前幾年離開了開心麻花`;

簡化對象寫法

ES6 允許在大括號里面，直接寫入變量和函數，作為對象的屬性和方法。這
樣的書寫更加簡潔。

let name = '尚硅谷';
let slogon = '永遠追求行業更高標準';
let improve = function () {console.log('可以提高你的技能');
}
//屬性和方法簡寫
let atguigu = {name,// 屬性名和變量名相同可以簡寫slogon,// 屬性名和變量名相同可以簡寫improve,// 屬性名和函數變量名相同可以簡寫change() {// change:function(){}的簡寫方式console.log('可以改變你')}
};

箭頭函數

ES6 允許使用「箭頭」（=>）定義函數。

// 1. 通用寫法
let fn = (arg1, arg2, arg3) => {return arg1 + arg2 + arg3;
}
// 2. 省略小括號的情況,只有一個參數
let fn2 = num => {return num * 10;
};
// 3. 省略花括號,省略花括號的同時要省略`return`
let fn3 = score => score * 20;
// 4. this指向2聲明所在作用域中this的值
let fn4 = () => {console.log(this);//Windows
}
let school = {name: '尚硅谷',getName(){let fn5 = () => {console.log(this);// this指向school}fn5();}
};

箭頭函數不會更改 this 指向，用來指定回調函數會非常合適

rest參數

ES6 引入 rest 參數，用于獲取函數的實參，用來代替 arguments

// 類似java中的可變參數
function add(...args){console.log(args);
}
add(1,2,3,4,5);
// rest參數必須是最后一個形參，在其他參數都確定之后才是rest參數
function minus(a,b,...args){console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);

spread擴展運算符

擴展運算符（spread）也是三個點（…）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列，對數組進行解包。在ES9之后也可對對象進行擴展

// 展開數組
let tfboys = ['德瑪西亞之力','德瑪西亞之翼','德瑪西亞皇子'];
function fn(){console.log(arguments);// 輸出不是數組對象而是，'德瑪西亞之力', '德瑪西亞之翼', '德瑪西亞皇子'
}
fn(...tfboys)
// 展開對象
/**
* 展開對象
*/
let skillOne = { q: '致命打擊',};
let skillTwo = { w: '勇氣'};
let skillThree = { e: '審判'};
let skillFour = { r: '德瑪西亞正義'};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};

Promise

Promise 是 ES6 引入的異步編程的新解決方案。語法上 Promise 是一個構造函數，
用來封裝異步操作并可以獲取其成功或失敗的結果.

	//實例化 Promise 對象const p = new Promise(function(resolve, reject){resolve(data);// 成功時使用這個方法reject(err);// 失敗時使用這個方法});//調用 promise 對象的 then 方法p.then(function(value){// then后面的第一個函數是成功的回調，第二個函數是失敗時的回調console.log(value);}, function(reason){console.error(reason);})// 程序發生錯誤的時候調用p.catch(function(reason){console.warn(reason);});

模塊化

模塊化是指將一個大的程序文件，拆分成許多小的文件，然后將小文件組合起來。
好處：

1. 防止命名沖突
2. 提高代碼復用
3. 增強維護性，出問題只需要調整對應模塊即可

模塊化功能主要由兩個命令構成：

• export 命令用于規定模塊的對外接口
• import 命令用于輸入其它模塊提供的功能

// 在m1.js中導出// 分別暴露export let school = '尚硅谷';export function teach() {console.log("我們可以教給你開發技能");}// 統一暴露export {school, teach};// 默認暴露export default {school: 'ATGUIGU',change: function(){console.log("我們可以改變你!!");}}
// 在app.js中使用import {school, teach} from "./src/js/m1.js";// 針對默認暴露可以這樣寫import m1 from "./src/js/m1.js";

ES8

async 和 await

async 和await 目的是為了簡化promise中api的使用,兩種語法結合可以讓異步代碼和同步代碼一樣。
解決回調地獄問題

async函數

async 函數的返回值為 promise 對象
promise 對象的結果由 async 函數執行的返回值決定

await 函數

1. await 必須寫在 async 函數中
2. await 右側的表達式一般為 promise 對象
3. await 返回的是 promise 成功的值
4. await 的 promise 失敗了, 就會拋出異常, 需要通過 try…catch 捕獲處理

async function main() {try {let result = await p;console.log(result);} catch (e) {console.log(e);}}

ES9

Rest/Spread屬性

Rest 參數與 spread 擴展運算符在 ES6 中已經引入，不過 ES6 中只針對于數組，
在 ES9 中為對象提供了像數組一樣的 rest 參數和擴展運算符

function connect({host, port, ...user}) {console.log(host);console.log(port);console.log(user);// 可以直接將后三個參數封裝到user中
}
connect({host: '127.0.0.1',port: 3306,username: 'root',password: 'root',type: 'master'
});