前言

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

下面話不多說了，來一起看看詳細的介紹吧

基本用法

數組解構

讓我們一起先來看數組解構的基本用法：

let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3let [d, [e], f] = [1, [2], 3] // 嵌套數組解構 d=1, e=2, f=3let [g, ...h] = [1, 2, 3] // 數組拆分 g=1, h=[2, 3]let [i,,j] = [1, 2, 3] // 不連續解構 i=1, j=3let [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.userNamevar password = data.passwordconsole.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解構賦值是怎么解決這個問題的：