ES6中Javascript解構(gòu)是什么

這篇文章主要介紹了ES6中Javascript解構(gòu)是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

ES6中的解構(gòu)特性能讓我們從對(duì)象（Object）或者是數(shù)組（Array）中取值的時(shí)候更方便，同時(shí)寫(xiě)出來(lái)的代碼在可讀性方面也更強(qiáng)。之前接觸過(guò)python語(yǔ)言的小伙伴應(yīng)該對(duì)這個(gè)不會(huì)陌生，這個(gè)特性早已在python中實(shí)現(xiàn)了。在python中，我們可以通過(guò)下面的代碼來(lái)取值

lst = [3, 5]
first, second = lst 
print(first, second)復(fù)制代碼

first和second兩個(gè)變量，分別被賦值上了數(shù)組中的3和5，是不是很簡(jiǎn)單很清晰？

那在有這個(gè)特性之前，我們一般怎么從對(duì)象或數(shù)組中取值呢？來(lái)看看下面的代碼：

let list = [3, 5]let first = list[0]let second = list[1]復(fù)制代碼

在這種方式中，你必須得手動(dòng)指定個(gè)數(shù)組下標(biāo)，才能把對(duì)應(yīng)的值賦給你指定的變量。那如果用ES6的解構(gòu)特性，代碼將會(huì)變得更簡(jiǎn)潔，可讀性也更高：

let [first, second] = list;復(fù)制代碼

對(duì)象的解構(gòu)

基礎(chǔ)對(duì)象解構(gòu)

首先我們來(lái)看看ES6中基本的對(duì)象解構(gòu)應(yīng)該怎么寫(xiě)：

const family = {	father: ''
	mother: ''}const { father, mother } = family;復(fù)制代碼

我們從family對(duì)象中解構(gòu)出來(lái)了它的兩個(gè)屬性father和mother，并賦值給了另外定義的father和mother對(duì)象。此后，我們就能直接通過(guò)father和mother變量獲取到family中相應(yīng)key的值了。這個(gè)例子是解構(gòu)對(duì)象最簡(jiǎn)單的一種應(yīng)用，下面來(lái)看看更有趣的。

解構(gòu)沒(méi)有聲明過(guò)的對(duì)象

在上面的例子中，我們先聲明的family對(duì)象，然后再通過(guò)解構(gòu)語(yǔ)法獲取其中的值。那如果不聲明是否可以呢：

const { father, mother } =  {father: '',mother: ''}復(fù)制代碼

其實(shí)也是可以的，在一些情況下，我們是沒(méi)有必要特意去聲明一個(gè)對(duì)象或是把對(duì)象賦值給一個(gè)變量，然后去才解構(gòu)的。很多時(shí)候我們可以直接解構(gòu)未聲明的對(duì)象。

解構(gòu)對(duì)象并重命名變量

我們也可以將對(duì)象中的屬性解構(gòu)之后，并對(duì)其重新命名，比如：

const { father: f, mother:m } =  {father: '1',mother: '2'}console.log(f); // '1'復(fù)制代碼

在上面的代碼中，對(duì)象中的father被解構(gòu)出來(lái)后，重新賦值給了變量f，與前一個(gè)例子相比，相當(dāng)于重名了了father變量為f。接下來(lái)就可以用f繼續(xù)進(jìn)行操作。

解構(gòu)默認(rèn)值

想象一下一種場(chǎng)景，后臺(tái)返回了一個(gè)family對(duì)象，原本family對(duì)象約定了有三個(gè)屬性，分別為father，mother，child。你拿到返回的數(shù)據(jù)并解構(gòu)這三個(gè)屬性：

const { father, mother, child } =  {father: '1',mother: '2', child: '3'}復(fù)制代碼

這看上去沒(méi)有什么問(wèn)題，但現(xiàn)實(shí)情況總是不如人意。后臺(tái)由于代碼有bug，返回的family對(duì)象中，只包含了mother和child，漏了father。這時(shí)經(jīng)過(guò)上面代碼的解構(gòu)后， father就會(huì)變成undefined：

const { father, mother, child } =  {father: '1',mother: '2'}console.log(child) //undefined復(fù)制代碼

很多時(shí)候我們會(huì)想要在后臺(tái)漏了某個(gè)屬性的時(shí)候，也能解構(gòu)出一個(gè)默認(rèn)值。那其實(shí)可以這么寫(xiě)：

const { father = '1', mother = '2', child = '3'} =  {father: '1',mother: '2'}console.log(child) //'3'復(fù)制代碼

結(jié)合前一個(gè)例子，你既可以改變量名又能賦值默認(rèn)值：

const { father: f = '1', mother: m = '2', child: c = '3'} =  {father: '1',mother: '2'}復(fù)制代碼

在函數(shù)參數(shù)中解構(gòu)

const family = {	father: ''
	mother: ''}function log({father}){	console.log(father)
}
log(family)復(fù)制代碼

在函數(shù)的參數(shù)中，運(yùn)用解構(gòu)的方式，可以直接獲取出入對(duì)象的屬性值，不需要像以往使用family.father傳入。

解構(gòu)嵌套對(duì)象

在上面的例子中，family的屬性都只有1層，如果family的某些屬性的值也是一個(gè)對(duì)象或數(shù)組，那怎么將這些嵌套對(duì)象的屬性值解構(gòu)出來(lái)呢？來(lái)看看下面的代碼：

const family = {	father: 'mike'
	mother: [{		name: 'mary'
	}]
}const { father, mother: [{	name:motherName
}]} = family;console.log(father); //'mike'console.log(motherName) //'mary'復(fù)制代碼

數(shù)組的解構(gòu)

數(shù)組的解構(gòu)方式其實(shí)跟對(duì)象的非常相似，在文章開(kāi)頭也略有提及，不過(guò)我們還是來(lái)看一下數(shù)組解構(gòu)的一些典型場(chǎng)景。

基礎(chǔ)對(duì)象解構(gòu)

const car = ['AUDI', 'BMW'];const [audi, bmw] = car;console.log(audi); // "AUDI"console.log(bmw); // "BMW"復(fù)制代碼

只要對(duì)應(yīng)數(shù)組的位置，就能正確的解構(gòu)出相應(yīng)的值。

解構(gòu)默認(rèn)值

同對(duì)象解構(gòu)的默認(rèn)值場(chǎng)景，很多時(shí)候我們也需要在解構(gòu)數(shù)組的時(shí)候加上默認(rèn)值以滿足業(yè)務(wù)需要。

const car = ['AUDI', 'BMW'];const [audi, bmw, benz = 'BENZ'] = car;console.log(benz); // "BENZ"復(fù)制代碼

在解構(gòu)中交換變量

假設(shè)我們有如下兩個(gè)變量：

let car1 = 'bmw';let car2 = 'audi'復(fù)制代碼

如果我們想交換這兩個(gè)變量，以往的做法是:

let temp = car1;
car1 = car2;
car2 = temp;復(fù)制代碼

需要借助一個(gè)中間變量來(lái)實(shí)現(xiàn)。那利用數(shù)組的解構(gòu)，就簡(jiǎn)單很多：

let car1 = 'bmw';let car2 = 'audi'[car2, car1] = [car1, car2]console.log(car1); // 'audi'console.log(car2); // 'bmw'復(fù)制代碼

如果是想在一個(gè)數(shù)組內(nèi)部完成元素位置的交換，比如吧[1,2,3]交換成[1,3,2]，那么可以這么實(shí)現(xiàn)：

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];console.log(arr); // [1,3,2]復(fù)制代碼

從函數(shù)的返回解構(gòu)數(shù)組

很多函數(shù)會(huì)返回?cái)?shù)組類型的結(jié)果，通過(guò)數(shù)組解構(gòu)可以直接拿值：

functin fun(){	return [1,2,3]
}let a, b, c; 
[a, b, c] = fun();復(fù)制代碼

當(dāng)然，如果我們只想要函數(shù)返回?cái)?shù)組中的其中一些值，那也可以把他們忽略掉

functin fun(){	return [1,2,3]
}let a, c; 
[a, , c] = fun();復(fù)制代碼

可以看到，ES6的解構(gòu)特性在很多場(chǎng)景下是非常有用的。期望大家能更多的將解構(gòu)運(yùn)用到項(xiàng)目中，讓代碼變得更加簡(jiǎn)單，清晰易懂。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享ES6中Javascript解構(gòu)是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!