es6中有很多特性谢床，使javascript語法更加豐滿仍侥，總結(jié)一波常用的es6知識點。
1.變量聲明const和let
在ES6之前知态，我們都是用var關(guān)鍵字聲明變量。無論聲明在何處立叛，都會被視為聲明在函數(shù)的最頂部(不在函數(shù)內(nèi)即在全局作用域的最頂部)负敏。這就是函數(shù)變量提升例如：
function a() {
? ?if(bool) {
? ? ? ?var str // 變量提升
? ? ? ?str = 'frontend'
? ?} else {
? ? ? ?//此處訪問str 值為undefined
? ? ? ?console.log(str)
? ?}
}
所以不用關(guān)心bool是否為true or false。實際上秘蛇，無論如何str都會被創(chuàng)建聲明其做。
而es6之后，我們通常用let和const來聲明赁还。let表示變量妖泄、const表示常量，let和const都是塊級作用域艘策。如何理解這個塊級作用域蹈胡？
1、在一個函數(shù)內(nèi)部
2、在一個代碼塊內(nèi)部
通常來說{}大括號內(nèi)的代碼塊即為let和const的作用域罚渐。
function a() {
? ?if(bool) {
? ? ? let str = 'frontend
? ?} else {
? ? ? ?//str 在此處訪問不到
? ? ? ?console.log(str)
? ?}
?}
let 的作用域是在它所在當(dāng)前代碼塊却汉，但不會被提升到當(dāng)前函數(shù)的最頂部。
const 聲明的變量都會被認(rèn)為是常量荷并，表示它的值被設(shè)置完成后就不能再修改了合砂。
?const role = 'frontend'
?role = 'backend' //再次賦值此時會報錯
如果const的是一個對象，對象所包含的值是可以被修改的源织。就是對象所指向的地址沒有變就行翩伪。
const student = { name: 'cc' }
// 不報錯
student.name = 'yy'
// 如果這樣子就會報錯了
student ?= { name: 'yy' }
常見面試題中：
var funcs = []
? ?for (var i = 0; i < 10; i++) {
? ? ? ?funcs.push(function() { console.log(i) })
? ?}
? ?funcs.forEach(function(func) {
? ? ? ?func()
? ?})
這樣的面試題是大家常見，很多同學(xué)一看就知道輸出 10 十次谈息。
但是如果我們想依次輸出0到9呢幻工？
有兩種解決方法。直接看一下代碼黎茎。
// ES5利用閉包解決這個問題
? ?var funcs = []
? ?for (var i = 0; i < 10; i++) {
? ? ? ?funcs.push(
? ? ? ? ?(function(value) {
? ? ? ? ? ?return function() {
? ? ? ? ? ? ? ?console.log(value)
? ? ? ? ? ?}
? ? ? ?})(i)
? ? ?)
? ?}
? ?funcs.forEach(function(func) {
? ? ? ?func()
? ?})
// es6解決
? ?const funcs = []
? ?for (let i = 0; i < 10; i++) {
? ? ? ?funcs.push(function() {
? ? ? ? ? ?console.log(i)
? ? ? ?})
? ?}
? ?funcs.forEach(func => func())
es6解決方案更加簡潔方便囊颅。
2.模板字符串
es6模板字符簡直是開發(fā)者的福音，解決了es5在字符串功能上的痛點傅瞻。
第一個用途踢代，基本的字符串格式化。將表達(dá)式嵌入字符串中進(jìn)行拼接嗅骄。用${}來界定胳挎。
? ?//ES5
? ?var name = 'frontend'
? ?console.log('hello' + name)
? ?//es6
? ?const name = 'frontend'
? ?console.log(`hello ${name}`)
第二個用途，在ES5時我們通過反斜杠()來做多行字符串或者字符串一行行拼接溺森。ES6反引號(``)直接搞定慕爬。
? ??// ES5
? ?var msg = "Hi
? ?man!
? ?"
? ?// ES6
? ?const template = `<div>
? ? ? ?<span>hello world</span>
? ?</div>`
對于字符串ES6當(dāng)然也提供了很多厲害也很有意思的方法。
// 1.includes：判斷是否包含然后直接返回布爾值
? ?const str = 'hahay'
? ?console.log(str.includes('y')) // true
? ?// 2.repeat: 獲取字符串重復(fù)n次
? ?const str = 'he'
? ?console.log(str.repeat(3)) // 'hehehe'
? ?//如果你帶入小數(shù), Math.floor(num) 來處理
? ?// s.repeat(3.1) 或者 s.repeat(3.9) 都當(dāng)做成 s.repeat(3) 來處理
? ?// 3. startsWith 和 endsWith 判斷是否以 給定文本 開始或者結(jié)束
? ?const str = ?'hello world!'
? ?console.log(str.startsWith('hello')) // true
? ?console.log(str.endsWith('!')) // true
3.函數(shù)
函數(shù)默認(rèn)參數(shù)
在ES5我們給函數(shù)定義參數(shù)默認(rèn)值是怎么樣屏积？
function action(num) {
? ? ? ?num = num || 200
? ? ? ?//當(dāng)傳入num時医窿，num為傳入的值
? ? ? ?//當(dāng)沒傳入?yún)?shù)時，num即有了默認(rèn)值200
? ? ? ?return num
? ?}
但細(xì)心觀察的同學(xué)們肯定會發(fā)現(xiàn)炊林，num傳入為0的時候就是false姥卢，但是我們實際的需求就是要拿到num = 0，此時num = 200 明顯與我們的實際想要的效果明顯不一樣渣聚。
ES6為參數(shù)提供了默認(rèn)值独榴。在定義函數(shù)時便初始化了這個參數(shù)，以便在參數(shù)沒有被傳遞進(jìn)去時使用奕枝。
function action(num = 200) {
? ? ? ?console.log(num)
? ?}
? ?action(0) // 0
? ?action() //200
? ?action(300) //300
箭頭函數(shù)
ES6很有意思的一部分就是函數(shù)的快捷寫法棺榔。也就是箭頭函數(shù)。
箭頭函數(shù)最直觀的三個特點：
1隘道、不需要 function 關(guān)鍵字來創(chuàng)建函數(shù)
2症歇、省略 return 關(guān)鍵字
3捞烟、繼承當(dāng)前上下文的 this 關(guān)鍵字
//例如：
? ?[1,2,3].map(x => x + 1)
? ?//等同于：
? ?[1,2,3].map((function(x){
? ? ? ?return x + 1
? ?}).bind(this))
說個小細(xì)節(jié)。
當(dāng)你的函數(shù)有且僅有一個參數(shù)的時候当船，是可以省略掉括號的题画。當(dāng)你函數(shù)返回有且僅有一個表達(dá)式的時候可以省略{} 和 return。例如：
var people = name => 'hello' + name
?//參數(shù)name就沒有括號
作為參考：
var people = (name, age) => {
? ? ? ?const fullName = 'hello' + name
? ? ? ?return fullName
? ?}
? ?//如果缺少()或者{}就會報錯
來道筆試題：
// 請使用ES6重構(gòu)以下代碼
? ?var calculate = function(x, y, z) {
? ? ?if (typeof x != 'number') { x = 0 }
? ? ?if (typeof y != 'number') { y = 6 }
? ? ?var dwt = x % y
? ? ?var result
? ? ?if (dwt == z) { result = true }
? ? ?if (dwt != z) { result = false }
? ? ?return result
? ?}
const calculate = (x, y, z) => {
? ? ?x = typeof x !== 'number' ? 0 : x
? ? ?y = typeof y !== 'number' ? 6 : y
? ? ?return x % y === z
? ?}
4.拓展的對象功能
對象初始化簡寫
ES5我們對于對象都是以鍵值對的形式書寫德频，是有可能出現(xiàn)鍵值對重名的苍息。例如：
function people(name, age) {
? ? ? ?return {
? ? ? ? ? ?name: name,
? ? ? ? ? ?age: age
? ? ? ?};
? ?}
鍵值對重名，ES6可以簡寫如下：
function people(name, age) {
? ? ? ?return {
? ? ? ? ? ?name,
? ? ? ? ? ?age
? ? ? ?};
? ?}
ES6 同樣改進(jìn)了為對象字面量方法賦值的語法壹置。ES5為對象添加方法：
const people = {
? ? ? ?name: 'sa',
? ? ? ?getName: function() {
? ? ? ? ? ?console.log(this.name)
? ? ? ?}
? ?}
ES6通過省略冒號與 function 關(guān)鍵字竞思，將這個語法變得更簡潔：
const people = {
? ? ? ?name: 'sa',
? ? ? ?getName () {
? ? ? ? ? ?console.log(this.name)
? ? ? ?}
? ?}
ES6 對象提供了 Object.assign() 這個方法來實現(xiàn)淺復(fù)制。
Object.assign() 可以把任意多個源對象自身可枚舉的屬性拷貝給目標(biāo)對象钞护，然后返回目標(biāo)對象盖喷。第一參數(shù)即為目標(biāo)對象。在實際項目中难咕，我們?yōu)榱瞬桓淖冊磳ο罂问帷Ｒ话銜涯繕?biāo)對象傳為{}。
? ??const objA = { name: 'cc', age: 18 }
? ?const objB = { address: 'beijing' }
? ?const objC = {} // 這個為目標(biāo)對象
? ?const obj = Object.assign(objC, objA, objB)
? ?// 我們將 objA objB objC obj 分別輸出看看
? ?console.log(objA) ? // { name: 'cc', age: 18 }
? ?console.log(objB) // { address: 'beijing' }
? ?console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
? ?console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }
? ?// 是的余佃，目標(biāo)對象ObjC的值被改變了暮刃。
? ?// so，如果objC也是你的一個源對象的話爆土。請在objC前面填在一個目標(biāo)對象{}
? ?Object.assign({}, objC, objA, objB)
5.更方便的數(shù)據(jù)訪問--解構(gòu)
數(shù)組和對象是JS中最常用也是最重要表示形式椭懊。為了簡化提取信息，ES6新增了解構(gòu)步势，這是將一個數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過程氧猬。
ES5我們提取對象中的信息形式如下：
const people = {
? ? ? ?name: 'lux',
? ? ? ?age: 20
? ?}
? ?const name = people.name
? ?const age = people.age
? ?console.log(name + ' --- ' + age)
是不是覺得很熟悉，沒錯坏瘩，在ES6之前我們就是這樣獲取對象信息的盅抚，一個一個獲取。現(xiàn)在桑腮，解構(gòu)能讓我們從對象或者數(shù)組里取出數(shù)據(jù)存為變量泉哈，例如：
//對象
? ?const people = {
? ? ? ?name: 'sa',
? ? ? ?age: 20
? ?}
? ?const { name, age } = people
? ?console.log(`${name} --- ${age}`)
? ?//數(shù)組
? ?const color = ['red', 'blue']
? ?const [first, second] = color
? ?console.log(first) //'red'
? ?console.log(second) //'blue'
面試題：
// 請使用 ES6 重構(gòu)一下代碼
? ?// 第一題
? ?var jsonParse = require('body-parser').jsonParse
? ?// 第二題
? ?var body = request.body
? ?var username = body.username
? ?var password = body.password
? ??// 1.
? ?import { jsonParse } from 'body-parser'
? ?// 2.
? ?const { body, body: { username, password } } = request
6.Spread Operator 展開運算符
ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒...接下來就展示一下它的用途。
組裝對象或者數(shù)組：
? ??//數(shù)組
? ?const color = ['red', 'yellow']
? ?const colorful = [...color, 'green', 'pink']
? ?console.log(colorful) //[red, yellow, green, pink]
? ?//對象
? ?const alp = { fist: 'a', second: 'b'}
? ?const alphabets = { ...alp, third: 'c' }
? ?console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c" }
有時候我們想獲取數(shù)組或者對象除了前幾項或者除了某幾項的其他項破讨。
? ??//數(shù)組
? ?const number = [1,2,3,4,5]
? ?const [first, ...rest] = number
? ?console.log(rest) //2,3,4,5
? ?//對象
? ?const user = {
? ? ? ?username: 'lux',
? ? ? ?gender: 'female',
? ? ? ?age: 19,
? ? ? ?address: 'peking'
? ?}
? ?const { username, ...rest } = user
? ?console.log(rest) //{"address": "peking", "age": 19, "gender": "female" }
對于 Object 而言，還可以用于組合成新的 Object 奕纫。(ES2017 stage-2 proposal) 當(dāng)然如果有重復(fù)的屬性名提陶，右邊覆蓋左邊。
const first = {
? ? ? ?a: 1,
? ? ? ?b: 2,
? ? ? ?c: 6,
? ?}
? ?const second = {
? ? ? ?c: 3,
? ? ? ?d: 4
? ?}
? ?const total = { ...first, ...second }
? ?console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
7.import 和 export
import導(dǎo)入模塊匹层、export導(dǎo)出模塊：
//全部導(dǎo)入
import people from './example'
//有一種特殊情況隙笆，即允許你將整個模塊當(dāng)作單一對象進(jìn)行導(dǎo)入
//該模塊的所有導(dǎo)出都會作為對象的屬性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
//導(dǎo)入部分
import {name, age} from './example'
// 導(dǎo)出默認(rèn), 有且只有一個默認(rèn)
export default App
// 部分導(dǎo)出
export class App extend Component {};
導(dǎo)入的時候有沒有大括號的區(qū)別是什么锌蓄。下面是總結(jié)：
1、當(dāng)用export default people導(dǎo)出時撑柔，就用 import people 導(dǎo)入（不帶大括號）瘸爽。
2、一個文件里铅忿，有且只能有一個export default剪决。但可以有多個export。
3檀训、當(dāng)用export name 時柑潦，就用?import{name}?導(dǎo)入（記得帶上大括號）。
4峻凫、當(dāng)一個文件里渗鬼，既有一個export default people, 又有多個export name 或者 export age時，導(dǎo)入就用?importpeople,{name,age}荧琼。
5譬胎、當(dāng)一個文件里出現(xiàn)n多個 export 導(dǎo)出很多模塊，導(dǎo)入時除了一個一個導(dǎo)入命锄，也可以用?import*asexample银择。
8. Promise
在promise之前代碼過多的回調(diào)或者嵌套，可讀性差累舷、耦合度高浩考、擴展性低。通過Promise機制被盈，扁平化的代碼機構(gòu)析孽，大大提高了代碼可讀性；用同步編程的方式來編寫異步代碼只怎，保存線性的代碼邏輯袜瞬，極大的降低了代碼耦合性而提高了程序的可擴展性。
說白了就是用同步的方式去寫異步代碼身堡。
發(fā)起異步請求：
fetch('/api/todos')
? ? ?.then(res => res.json())
? ? ?.then(data => ({ data }))
? ? ?.catch(err => ({ err }));
面試題：
setTimeout(function() {
? ? ?console.log(1)
? ?}, 0);
? ?new Promise(function executor(resolve) {
? ? ?console.log(2);
? ? ?for( var i=0 ; i<10000 ; i++ ) {
? ? ? ?i == 9999 && resolve();
? ? ?}
? ? ?console.log(3);
? ?}).then(function() {
? ? ?console.log(4);
? ?});
? ?console.log(5);
9.Generators
生成器（ generator）是能返回一個迭代器的函數(shù)邓尤。生成器函數(shù)也是一種函數(shù)，最直觀的表現(xiàn)就是比普通的function多了個星號*贴谎，在其函數(shù)體內(nèi)可以使用yield關(guān)鍵字汞扎，有意思的是函數(shù)會在每個yield后暫停。
這里生活中有一個比較形象的例子擅这。咱們到銀行辦理業(yè)務(wù)時候都得向大廳的機器取一張排隊號澈魄。你拿到你的排隊號，機器并不會自動為你再出下一張票仲翎。也就是說取票機“暫捅陨龋”住了铛漓，直到下一個人再次喚起才會繼續(xù)吐票。
OK鲫构。說說迭代器浓恶。當(dāng)你調(diào)用一個generator時，它將返回一個迭代器對象结笨。這個迭代器對象擁有一個叫做next的方法來幫助你重啟generator函數(shù)并得到下一個值包晰。next方法不僅返回值，它返回的對象具有兩個屬性：done和value禀梳。value是你獲得的值杜窄，done用來表明你的generator是否已經(jīng)停止提供值。繼續(xù)用剛剛?cè)∑钡睦铀阃荆繌埮抨犔柧褪沁@里的value塞耕，打印票的紙是否用完就這是這里的done。
// 生成器
? ?function *createIterator() {
? ? ? ?yield 1;
? ? ? ?yield 2;
? ? ? ?yield 3;
? ?}
? ?// 生成器能像正規(guī)函數(shù)那樣被調(diào)用嘴瓤，但會返回一個迭代器
? ?let iterator = createIterator();
? ?console.log(iterator.next().value); // 1
? ?console.log(iterator.next().value); // 2
? ?console.log(iterator.next().value); // 3
那生成器和迭代器又有什么用處呢扫外？
圍繞著生成器的許多興奮點都與異步編程直接相關(guān)。異步調(diào)用對于我們來說是很困難的事廓脆，我們的函數(shù)并不會等待異步調(diào)用完再執(zhí)行筛谚，你可能會想到用回調(diào)函數(shù)，（當(dāng)然還有其他方案比如Promise比如Async/await）停忿。
生成器可以讓我們的代碼進(jìn)行等待驾讲。就不用嵌套的回調(diào)函數(shù)。使用generator可以確保當(dāng)異步調(diào)用在我們的generator函數(shù)運行一下行代碼之前完成時暫停函數(shù)的執(zhí)行席赂。
那么問題來了吮铭，咱們也不能手動一直調(diào)用next()方法，你需要一個能夠調(diào)用生成器并啟動迭代器的方法颅停。就像這樣子的：
function run(taskDef) { //taskDef即一個生成器函數(shù)
? ? ? ?// 創(chuàng)建迭代器谓晌，讓它在別處可用
? ? ? ?let task = taskDef();
? ? ? ?// 啟動任務(wù)
? ? ? ?let result = task.next();
? ? ? ?// 遞歸使用函數(shù)來保持對 next() 的調(diào)用
? ? ? ?function step() {
? ? ? ? ? ?// 如果還有更多要做的
? ? ? ? ? ?if (!result.done) {
? ? ? ? ? ? ? ?result = task.next();
? ? ? ? ? ? ? ?step();
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?// 開始處理過程
? ? ? ?step();
? ?}
生成器與迭代器最有趣、最令人激動的方面癞揉，或許就是可創(chuàng)建外觀清晰的異步操作代碼纸肉。你不必到處使用回調(diào)函數(shù)，而是可以建立貌似同步的代碼喊熟，但實際上卻使用 yield 來等待異步操作結(jié)束柏肪。
10.async 函數(shù)
es6引入了 async 函數(shù)，使得異步操作變得更加方便逊移。
async 函數(shù)是什么预吆？一句話，它就是 Generator 函數(shù)的語法糖胳泉。
function timeout(ms) {
?return new Promise((resolve) => {
? ?setTimeout(resolve, ms);
?});
}
async function asyncPrint(value, ms) {
?await timeout(ms);
?console.log(value);
}
asyncPrint('hello world', 50);
一比較就會發(fā)現(xiàn)拐叉，async函數(shù)就是將 Generator 函數(shù)的星號（*）替換成async，將yield替換成await扇商，僅此而已凤瘦。
async函數(shù)對 Generator 函數(shù)的改進(jìn)，體現(xiàn)在以下四點：
1案铺、內(nèi)置執(zhí)行器
2蔬芥、更好的語義
3、更廣的適用性
4控汉、返回值是 Promise
11.Class基本語法
JavaScript 語言中笔诵，生成實例對象的傳統(tǒng)方法是通過構(gòu)造函數(shù)：
function Point(x, y) {
?this.x = x;
?this.y = y;
}
Point.prototype.toString = function () {
?return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
es6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個概念姑子，作為對象的模板乎婿。通過class關(guān)鍵字，可以定義類街佑。
基本上谢翎，es6 的%(red)[class]可以看作只是一個語法糖，它的絕大部分功能沐旨，es5 都可以做到森逮，新的%(red)[class]寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已磁携。上面的代碼用 es6 的%(red)[class]改寫褒侧，就是下面這樣。
//定義類
class Point {
?constructor(x, y) {
? ?this.x = x;
? ?this.y = y;
?}
?toString() {
? ?return '(' + this.x + ', ' + this.y + ')';
?}
}
上面代碼定義了一個“類”谊迄，可以看到里面有一個constructor方法闷供，這就是構(gòu)造方法，而this關(guān)鍵字則代表實例對象鳞上。也就是說这吻，es5 的構(gòu)造函數(shù)Point，對應(yīng) es6 的Point類的構(gòu)造方法篙议。
Point類除了構(gòu)造方法唾糯，還定義了一個toString方法。注意鬼贱，定義“類”的方法的時候移怯，前面不需要加上function這個關(guān)鍵字，直接把函數(shù)定義放進(jìn)去了就可以了这难。另外舟误，方法之間不需要逗號分隔，加了會報錯姻乓。
es6 的類嵌溢，完全可以看作構(gòu)造函數(shù)的另一種寫法眯牧。
關(guān)注公眾號【grain先森】，回復(fù)關(guān)鍵詞 【18福利】赖草，獲取為你準(zhǔn)備的年終福利学少，更多關(guān)鍵詞玩法期待你的探索~
源自：http://forum.bestvist.com/topic/133/小結(jié)
