es6之解構賦值

es6的語法已經出了很長的時間了，在使用上也能夠經過babel這類的編譯工具轉譯爲瀏覽器能夠識別的es5的語法，可是依舊有不少開發在寫代碼的時候，依舊沒有用es6的語法，而是習慣使用老的語法，這篇文章主要會介紹解構賦值基本用法以及在實際使用場景中相比es5語法的優點，讓你們從根本上了解es6語法的優點

基本用法

數組解構

讓咱們一塊兒先來看數組解構的基本用法：

let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3] // 嵌套數組解構 d=1, e=2, f=3
let [g, ...h] = [1, 2, 3] // 數組拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3] // 不連續解構 i=1, j=3
let [k,l] = [1, 2, 3] // 不徹底解構 k=1, l=2

上面的例子包含了數組解構時經常使用的基本用法

對象解構

接下來再讓咱們一塊兒看看對象解構的基本用法：

let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj // 嵌套解構 d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'}) // 以聲明變量解構 g='aaaa'
let [h, i, j, k] = 'nice' // 字符串解構 h='n' i='i' j='c' k='e'

使用場景

變量賦值

咱們先來看最基本的使用場景：變量賦值，先來看咱們在平時開發中是怎麼使用es5對變量賦值的：

var data = {userName: 'aaaa', password: 123456}
var userName = data.userName
var password = data.password
console.log(userName)
console.log(password)
var data1 = ['aaaa', 123456]
var userName1 = data1[0]
var password1 = data1[1]
console.log(userName1)
console.log(password1)

上面兩個例子是最簡單的例子，用傳統es5變量賦值，而後調用，這麼寫的問題就是顯得代碼囉嗦，明明一行能夠搞定的事情非要用三行代碼，來看看解構賦值是怎麼幹的：

const {userName, password} = {userName: 'aaaa', password: 123456}
console.log(userName)
console.log(password)
const [userName1, password1] = ['aaaa', 123456]
console.log(userName1)
console.log(password1)

相對於es5的語法是否是更加簡單明瞭，在數據量越大用解構賦值的優點越明顯

函數參數的定義

通常咱們在定義函數的時候，若是函數有多個參數時，在es5語法中函數調用時參數必須一一對應，不然就會出現賦值錯誤的狀況，來看一個例子：

function personInfo(name, age, address, gender) {
  console.log(name, age, address, gender)
}
personInfo('william', 18, 'changsha', 'man')

上面這個例子在對用戶信息的時候須要傳遞四個參數，且須要一一對應，這樣就會極易出現參數順序傳錯的狀況，從而致使bug，接下來來看es6解構賦值是怎麼解決這個問題的：

function personInfo({name, age, address, gender}) {
  console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})

這麼寫咱們只須要知道要傳什麼參數就行來，不須要知道參數的順序也沒問題

交換變量的值

在es5中咱們須要交換兩個變量的值須要藉助臨時變量的幫助，來看一個例子：

var a=1, b=2, c
c = a
a = b
b = c
console.log(a, b)

來看es6怎麼實現：

let a=1, b=2;
[b, a] = [a, b]
console.log(a, b)

是否是比es5的寫法更加方便呢

函數的默認參數

在平常開發中，常常會有這種狀況：函數的參數須要默認值，若是沒有默認值在使用的時候就會報錯，來看es5中是怎麼作的：

function saveInfo(name, age, address, gender) {
  name = name || 'william'
  age = age || 18
  address = address || 'changsha'
  gender = gender || 'man'
  console.log(name, age, address, gender)
}
saveInfo()

在函數離 main先對參數作一個默認值賦值，而後再使用避免使用的過程當中報錯，再來看es6中的使用的方法：

function saveInfo({name= 'william', age= 18, address= 'changsha', gender= 'man'} = {}) {
  console.log(name, age, address, gender)
}
saveInfo()

在函數定義的時候就定義了默認參數，這樣就免了後面給參數賦值默認值的過程，是否是看起來簡單多了

總結

這篇文章簡單介紹了es6的解構賦值，若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊收藏