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

lst = [3, 5]
first, second = lst 
print(first, second)

first和second兩個(gè)變量，分別被賦值上了數(shù)組中的3和5，是不是很簡單很清晰？
那在有這個(gè)特性之前，我們一般怎么從對象或數(shù)組中取值呢？來看看下面的代碼：

let list = [3, 5]
let first = list[0]
let second = list[1]

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

let [first, second] = list;

對象的解構(gòu)

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

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

const family = {
 father: ''
 mother: ''
}
const { father, mother } = family;

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

解構(gòu)沒有聲明過的對象

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

const { father, mother } = {father: '',mother: ''}

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

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

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

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

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

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

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

const { father, mother, child } = {father: '1',mother: '2', child: '3'}

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

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

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

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

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

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

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

const family = {
 father: ''
 mother: ''
}
function log({father}){
 console.log(father)
}
log(family)

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

解構(gòu)嵌套對象

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

const family = {
 father: 'mike'
 mother: [{
 name: 'mary'
 }]
}
const { father, mother: [{
 name:motherName
}]} = family;

console.log(father); //'mike'
console.log(motherName) //'mary'

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

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

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

const car = ['AUDI', 'BMW'];

const [audi, bmw] = car;
console.log(audi); // "AUDI"
console.log(bmw); // "BMW"

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

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

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

const car = ['AUDI', 'BMW'];

const [audi, bmw, benz = 'BENZ'] = car;
console.log(benz); // "BENZ"

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

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

let car1 = 'bmw';
let car2 = 'audi'

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

let temp = car1;
car1 = car2;
car2 = temp;

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

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

如果是想在一個(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]

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

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

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

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

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

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

到此這篇關(guān)于ES6中的Javascript解構(gòu)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)ES6 解構(gòu)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論