1.解構賦值可以輕松獲取對象或者數組中的數據

var jsonData = {data: "111",data2: ["test","test2"],};

json中的數據就被輕松獲取；

2.解構復制可以交換變量

var a=1,b=2,c=3,d=4; [a,b,c,d]=[d,c,b,a]; console.log(a,b,c,d);

結果： a=4，b=3，c=2，d=1

賦值的過程需要保證兩邊的數據格式匹配

[a,b,c,d]=[d,c,b,];

d的值將為underfinded

3.對象的解構賦值

let {obj, obj2 } = { obj: "666", obj2: "888" }; console.log(obj,obj2)

結果，666，888

數組解構

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

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'

使用場景

1.變量賦值

我們先來看最基本的使用場景：變量賦值，先來看我們在平時開發中是怎么使用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的語法是不是更加簡單明了，在數據量越大用解構賦值的優勢越明顯

2.函數參數的定義

一般我們在定義函數的時候，如果函數有多個參數時，在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})

?

這么寫我們只需要知道要傳什么參數就行來，不需要知道參數的順序也沒問題

3.交換變量的值

在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的寫法更加方便呢？

4.函數的默認參數

在日常開發中，經常會有這種情況：函數的參數需要默認值，如果沒有默認值在使用的時候就會報錯，來看es5中是怎么做的：

function saveInfo(name, age, address, gender) {name = name || 'william'age = age || 18address = 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()

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

5.提取 JSON 數據

let jsonData = {id: 42,status: "OK",data: [867, 5309] };let { id, status, data: number } = jsonData;console.log(id, status, number); // 42, "OK", [867, 5309]

?

6.遍歷 Map 結構

任何部署了 Iterator 接口的對象，都可以用for...of循環遍歷。Map 結構原生支持 Iterator 接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。

const map = new Map(); map.set('first', 'hello'); map.set('second', 'world');for (let [key, value] of map) {console.log(key + " is " + value); } // first is hello // second is world

如果只想獲取鍵名，或者只想獲取鍵值，可以寫成下面這樣。

// 獲取鍵名 for (let [key] of map) {// ... }// 獲取鍵值 for (let [,value] of map) {// ... }

7.輸入模塊的指定方法

加載模塊時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

?

總結

以上是生活随笔為你收集整理的前端学习必备之ES6解构赋值的常见用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。