經常使用ES6總結

什麼!!!已經9102年了，你還不知道ES6是什麼？

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發佈了。 一個常見的問題是，ECMAScript 和 JavaScript 究竟是什麼關係？ 要講清楚這個問題，須要回顧歷史。1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，但願這種語言可以成爲國際標準。次年，ECMA 發佈 262 號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲 ECMAScript，這個版本就是 1.0 版。 該標準從一開始就是針對 JavaScript 語言制定的，可是之因此不叫 JavaScript，有兩個緣由。一是商標，Java 是 Sun 公司的商標，根據受權協議，只有 Netscape 公司能夠合法地使用 JavaScript 這個名字，且 JavaScript 自己也已經被 Netscape 公司註冊爲商標。二是想體現這門語言的制定者是 ECMA，不是 Netscape，這樣有利於保證這門語言的開放性和中立性。 所以，ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的 ECMAScript 方言還有 JScript 和 ActionScript）。平常場合，這兩個詞是能夠互換的。 ——<<ES6 標準入門>>

羅列下我經常使用的ES6

1.賦值

• let
• const

let和const的出現打破了var的壟斷，而且避免了var可提高變量的弊端； let和const爲塊級做用域，上級不能訪問

let a // a後續可再次賦值
const b = 1 // b的值不能更改，更改報錯
複製代碼

2.解構&&賦值

很是推薦使用，能夠減小代碼，直接看用法

賦值：

before

let a = 1;
let b = 2;
let c = 3;
複製代碼

now

let [a, b, c] = [1, 2, 3]; // 數組
let {a, b, c} = {1, 2, 3}; // 對象
複製代碼

解構：

before

var obj = {
    a: 1,
    b: 2,
    c: {
        d: 3
    }
}
var a = obj.a
var b = obj.b
var d = obj.c.d
複製代碼

now

const obj = {
    a: 1,
    b: 2,
    c: {
        d: 3
    }
}
const { 
        a,  // a = 1
        b: newB, // 解構出b的值爲newB newB=2 
        c:{
           d  // 多級解構直接取到d d=3
        },
        e // 若是不存在 e = undefined
} = obj
複製代碼

3.字符串擴展

之前的字符串擴展要寫n個'，有了字符串擴展方便易讀 要拼接 hi, wang,hello world

before

var name = 'wang'
var str = 'hi, '+name+'hello world'
複製代碼

now

const name = 'wang'
const str = `hi, ${name},hello world`
複製代碼

4.函數默認值

在寫函數時，常常會傳參,而沒有傳參會出現undefined，如今有了默認值，在參數使用時就會有了兜底

before

function say(name, something) {
    console.log(name+' say:'+something)
}
say('wang', 'hi') // wang say:hi
say('wang') // wang say:undefined
say() // undefined say:undefined
複製代碼

now

function say(name='wang', something='nothing'){
     console.log(`${name} say:${something}`)
}
say('he', 'hi') // he say:hi
say('he') // he say:nothing
say() // wang say:nothing
複製代碼

5.擴展運算符 ...

若是要拷貝一個數組或者一個對象，每每須要遍從來實現

before

// 數組
var arr = [1, 2, 3]
var copyArr = []
for (var i = 0; i < arr.length; i++) {
    copyArr.push(arr[i])
}
console.log(copyArr)  // [1, 2, 3]
// 對象
var obj = {
	a: 1,
	b: 2,
	c: {
		d:3
	}
}
// 太多了，偷懶不寫了
複製代碼

now

// 數組
const arr = [1, 2, 3]
const copyArr = [...arr]
console.log(copyArr)  // [1, 2, 3] 
// 對象
const obj = {
	a: 1,
	b: 2,
	c: {
		d:3
	}
}
const copyObj = {
	...obj
}
複製代碼

是否是很爽 函數的傳參也可使用擴展運算符，能夠應對傳參不肯定個數的狀況

6.箭頭函數

在定義和使用函數時經常會使用this，常常會出現以下狀況

before

const self = this
const boundMethod = function(...params) {
    return method.apply(self, params)
}
// 或者
const boundMethod = method.bind(this)
複製代碼

now

const boundMethod = (...params) => method.apply(this, params) //簡化函數定義，同時不用再對this另存爲
複製代碼

箭頭函數this對象爲定義時所在的對象，不可更改

7.Promise

在調用接口的時候常常會用回調，回調地獄異常恐怖

const firtFunc = () => {
    return new Promise((resolve, reject) => {
        if(success){
            resolve('success')
        }else{
            reject('fail')
        }
    })
}
firstFunc()
    .then(res => {
        console.log(res) // success
        secondFunc()
    })
    .then(res => {
    
    })
    .catch(res => {
        console.log(res) // fail
    })
複製代碼

8. async await

上面promise的寫法雖然能暫時解決回調地獄的問題，可是代碼仍是很差看，沒關係，還有語法糖async、await

const firtFunc = async () => {
    return new Promise((resolve, reject) => {
        if(success){
            resolve('success')
        }else{
            reject('fail')
        }
    })
}
try{
    await firtFunc()
    await secondFunc() // 返回resolve纔會執行
}catch(err){
// reject走到這裏
}
複製代碼

---

本期總結了我經常使用的一些ES6語法，掌握了這些能夠大大減小代碼量；固然，ES6還有不少內容，其餘再之後會慢慢展現其用法。

強烈推薦《ES6標準入門》——阮一峯