首頁  >  文章  >  web前端  >  ES6中的Javascript解構

ES6中的Javascript解構

coldplay.xixi
coldplay.xixi轉載
2020-10-27 17:34:322237瀏覽

今天javascript專欄介紹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的解構特性在很多場景下是非常有用的。期望大家能更多的將解構運用到專案中,讓程式碼變得更簡單,清晰易懂。

相關免費學習推薦:javascript#(影片)

以上是ES6中的Javascript解構的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.im。如有侵權,請聯絡admin@php.cn刪除