ES6中Javascript解構是什么

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

ES6中的解構特性能讓我們從對象（Object）或者是數組（Array）中取值的時候更方便，同時寫出來的代碼在可讀性方面也更強。之前接觸過python語言的小伙伴應該對這個不會陌生，這個特性早已在python中實現了。在python中，我們可以通過下面的代碼來取值

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

first和second兩個變量，分別被賦值上了數組中的3和5，是不是很簡單很清晰？

那在有這個特性之前，我們一般怎么從對象或數組中取值呢？來看看下面的代碼：

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

在這種方式中，你必須得手動指定個數組下標，才能把對應的值賦給你指定的變量。那如果用ES6的解構特性，代碼將會變得更簡潔，可讀性也更高：

let [first, second] = list;復制代碼

對象的解構

基礎對象解構

首先我們來看看ES6中基本的對象解構應該怎么寫：

const family = {	father: ''
	mother: ''}const { father, mother } = family;復制代碼

我們從family對象中解構出來了它的兩個屬性father和mother，并賦值給了另外定義的father和mother對象。此后，我們就能直接通過father和mother變量獲取到family中相應key的值了。這個例子是解構對象最簡單的一種應用，下面來看看更有趣的。

解構沒有聲明過的對象

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

const { father, mother } =  {father: '',mother: ''}復制代碼

其實也是可以的，在一些情況下，我們是沒有必要特意去聲明一個對象或是把對象賦值給一個變量，然后去才解構的。很多時候我們可以直接解構未聲明的對象。

解構對象并重命名變量

我們也可以將對象中的屬性解構之后，并對其重新命名，比如：

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

在上面的代碼中，對象中的father被解構出來后，重新賦值給了變量f，與前一個例子相比，相當于重名了了father變量為f。接下來就可以用f繼續進行操作。

解構默認值

想象一下一種場景，后臺返回了一個family對象，原本family對象約定了有三個屬性，分別為father，mother，child。你拿到返回的數據并解構這三個屬性：

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

這看上去沒有什么問題，但現實情況總是不如人意。后臺由于代碼有bug，返回的family對象中，只包含了mother和child，漏了father。這時經過上面代碼的解構后， father就會變成undefined：

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

很多時候我們會想要在后臺漏了某個屬性的時候，也能解構出一個默認值。那其實可以這么寫：

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

結合前一個例子，你既可以改變量名又能賦值默認值：

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

在函數參數中解構

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

在函數的參數中，運用解構的方式，可以直接獲取出入對象的屬性值，不需要像以往使用family.father傳入。

解構嵌套對象

在上面的例子中，family的屬性都只有1層，如果family的某些屬性的值也是一個對象或數組，那怎么將這些嵌套對象的屬性值解構出來呢？來看看下面的代碼：

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

數組的解構

數組的解構方式其實跟對象的非常相似，在文章開頭也略有提及，不過我們還是來看一下數組解構的一些典型場景。

基礎對象解構

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

只要對應數組的位置，就能正確的解構出相應的值。

解構默認值

同對象解構的默認值場景，很多時候我們也需要在解構數組的時候加上默認值以滿足業務需要。

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

在解構中交換變量

假設我們有如下兩個變量：

let car1 = 'bmw';let car2 = 'audi'復制代碼

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

let temp = car1;
car1 = car2;
car2 = temp;復制代碼

需要借助一個中間變量來實現。那利用數組的解構，就簡單很多：

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

如果是想在一個數組內部完成元素位置的交換，比如吧[1,2,3]交換成[1,3,2]，那么可以這么實現：

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

從函數的返回解構數組

很多函數會返回數組類型的結果，通過數組解構可以直接拿值：

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

當然，如果我們只想要函數返回數組中的其中一些值，那也可以把他們忽略掉

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

可以看到，ES6的解構特性在很多場景下是非常有用的。期望大家能更多的將解構運用到項目中，讓代碼變得更加簡單，清晰易懂。

感謝你能夠認真閱讀完這篇文章，希望小編分享ES6中Javascript解構是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!