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的解構特性在很多場景下是非常有用的，期望大家能更多的將解構運用到專案中，讓代碼變得更加簡單，清晰易懂，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/191023.html
標籤：區塊鏈