學(xué)習(xí)了一段時(shí)間的前端知識，日常中會copy些語法使用規(guī)則，對于這些語法雖會簡單的使用，但并不咋了解，因此決定對這些進(jìn)行了一番系統(tǒng)的學(xué)習(xí)：
一.聲明變量
現(xiàn)在JAVAScript有三種不同關(guān)鍵字聲明變量：var、let、const；在ES6之前使用的一直是var，ES6是添加了let、const；
- var聲明的變量作用域?yàn)槿肿饔糜?/li>
- let聲明的變量作用域?yàn)閴K級作用域
- const聲明的變量是不允許改變(即只讀，通常以大寫字母命名)
二、箭頭函數(shù)
舉例：
const array=[1,2,3,4,5];
const odd=array.filter(arr => arr%2 ==0 )
像這樣帶有“=>”箭頭的函數(shù)寫代碼的時(shí)候會經(jīng)常接觸到，這樣的函數(shù)稱為箭頭函數(shù)，是ES6中新增的特性，可以使代碼看上去更加簡潔，但同時(shí)對于不了解這種寫法的人來說就不是較容易理解了。若不使用這種帶箭頭的寫法：
const array=[1,2,3,4,5];
const odd=array.filter(function(arr){arr => return arr%2 ==0; })
三、字符串拼接
字符拼接是我們經(jīng)常使用到的，通常情況下，代碼會這么寫
let name='張三';
console.log(name+'你好！');
ES6語法中使用 ` ` 字符拼接：
let name='張三';
console.log(`${name}你好！`);
四、解構(gòu)賦值
解構(gòu)賦值主要用于數(shù)組和對象賦值
//對象解構(gòu)賦值
let obj = {
'name': 'admin',
'age': 22
};
let {name , age}=obj;//name='admin';age=22
//數(shù)組解構(gòu)賦值
let [a , b , c]=[1, 2, 3];//a=1; b=2; c=3
對象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對應(yīng)的變量，如圖，列舉了些更詳細(xì)的用法：
ES語法之解構(gòu)
五、擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符就是三個(gè)點(diǎn)( ... ),這是ES6新增的語法，作用是將一個(gè)數(shù)組轉(zhuǎn)成用逗號分隔的參數(shù)序列；ES8將這個(gè)運(yùn)算符引入了對象：
ES語法之?dāng)U展運(yùn)算符
六、異步編程
在實(shí)際編碼過程中，經(jīng)常會遇到JavaScript代碼異步執(zhí)行，怎樣處理好異步編程帶來的問題非常重要。
異步問題：回調(diào)地獄 和 捕獲異常。
試想一個(gè)場景，我們需要在一個(gè)方法運(yùn)行結(jié)束后再運(yùn)行另一個(gè)方法，最常見的就是在調(diào)用方法的最后調(diào)用下一個(gè)方法，但這種情況一個(gè)方法里面調(diào)用另一個(gè)放，另一個(gè)方法中又再調(diào)用其它方法...,有很多這樣的方法的話就會形成回調(diào)地獄。
在異步代碼中捕獲異常比較麻煩，可能需要手動配置捕獲方式，但何時(shí)捕獲是個(gè)問題，書寫時(shí)會引起維護(hù)上的困難。
常用解決方案：
- 1.callback
通過回調(diào)函數(shù)的方式處理異步，即將函數(shù)作為參數(shù)傳入另一個(gè)函數(shù)中。
- 2.Promise
Promise翻譯為“承諾”，簡單的思考為當(dāng)一個(gè)異步代碼執(zhí)行后，我們不需管代碼何時(shí)結(jié)束、出錯，我只需按照它的承諾去處理就行。
Promise有四種狀態(tài)fulfiled(成功)、rejected(失敗)、pending(進(jìn)行中)，之后新增Settled(最終狀態(tài))；resolve修改成功狀態(tài)，reject修改失敗狀態(tài)，
Promise的整理如圖：
ES語法之異步編程Promise
- 3.Generator
ES6新引入了Generator，generator是一個(gè)構(gòu)造器，函數(shù)執(zhí)行時(shí)不會執(zhí)行函數(shù)體的內(nèi)部而是返回一個(gè)構(gòu)造器對象，通過next方法調(diào)用函數(shù)主體，遇到y(tǒng)ield會暫停執(zhí)行。
function* generatorTest() {
console.log(yield '1') //test1
console.log(yield '2') //test2
console.log(yield '3') //test3
}
const gen = generatorTest();
gen.next()
gen.next('test1')
gen.next('test2')
gen.next('test3')
- 4.co
為解決Generator需手動執(zhí)行next方法的問題，網(wǎng)上也有很多封裝，最常見的就是co函數(shù)庫，但不便的是使用時(shí)需額外引入一個(gè)模塊。
- 5.async/await
ES7提供了更加方便的asyc函數(shù)和await命令，async返回一個(gè)promise對象，await后面接受一個(gè)promise實(shí)例。
async/await實(shí)際上是對Generator的封裝。
七、冪運(yùn)算
ES7中引入了冪運(yùn)算符**
console.log(3**2); // = 9
//等同于
Math.pow(3,2); // = 9
八、查詢數(shù)組元素
ES7中添加了數(shù)組includes()方法，用來普安段數(shù)組中是否執(zhí)行指定的值。
['a','b','c'].includes('a'); // ture
//等同于
['a','b','c'].indexOf('a')>=0; // ture
數(shù)組是日常中經(jīng)常使用的，對于數(shù)組操作的Array方法有哪些呢，如圖列舉經(jīng)常使用的方法：
數(shù)組操作方法集
Array方法匯
九、String方式
String方法集合
十、基本數(shù)據(jù)值類型
ES語法之基本數(shù)據(jù)類型-值類型
ES語法總匯圖：
ES6、ES7、ES8、ES9、ES10新增語法特性圖
