ES6－解構賦值

解構賦值

解構賦值(Destructuring Assignment)是⼀個在ES6的新特性，⽤於提取(extract)陣列或物件中的資料，新 語法可以讓程式碼在撰寫時更為簡短與提⾼閱讀性。

陣列解構賦值

物件解構賦值

複雜的物件結構

從⾮陣列或⾮物件(原始資料類型值)解構賦值

從其他的資料類型進⾏陣列或物件解構，這並⾮這種語法設計的⽬的。

解構賦值的語法是針對物件或陣列的資 料結構所設計的，所以作這種賦值要不就是產⽣錯誤，要不然就是賦不到值(得到undefined)。

解構賦值時的預設值

在函式傳⼊參數定義中使⽤

例1.例2. func()的呼叫明顯會產⽣錯誤，因為它相當於

let {a = 3, b} = undefined
let {a = 3, b = 5} = undefined

例3. 在函式傳⼊參數預設值使⽤空物件算是⼀種保護性語法。

例4. 另⼀種使⽤傳⼊參數預設值的情況，是在傳⼊參數預設值中給了另⼀套預設值，但它只會在func()時發揮預 設值指定的作⽤。

例5. 在作解構賦值時，給定null值時會導致預設值無⽤，請記住這⼀點。當數字運算時，null會轉為 數字0。

React中的實例應⽤

React Native 官方範例

const NavigationExampleRow = require('./NavigationExampleRow');
const React = require('react');
const ReactNative = require('react-native');
// 這是取得ReactNative其中包含內建模組的⼀種語法
const {
  NavigationExperimental,
  ScrollView,
  StyleSheet,
} = ReactNative;
// 這是取得NavigationExperimental其中所包含的
// NavigationCardStack與NavigationStateUtils物件的語法
const {
  CardStack: NavigationCardStack,
  StateUtils: NavigationStateUtils,
} = NavigationExperimental;

比對

正常用法

const obj = {a: 1, b: 2} 
const {a: x, b: y} = obj //x=1, y=2

簡寫法

const obj = {a: 1, b: 2} 
const {a, b} = obj //a=1, b=2 
//上⾯的語句相當於下⾯的寫法 
const {a: a, b: b} = obj

ES6新特性，稱為”Object Literal Property Value Shorthand”(物件字⾯屬性值簡寫)

從props與state解構賦值

React的props或state裡⾯都有可能是巢狀的物件結構，使⽤解構賦值的確可以很容易的提取出裡⾯的屬性 值

class DataModal extends Component {
  render() {
    const { modalList, location: { pathname } } = this.props
    const { currIndex, showModal } = this.state
    // ..
  }
}

使⽤於函式的傳⼊參數之中的解構賦值

所以，如果你在函式的傳⼊參數中，使⽤了物件的樣式結構作為傳⼊參數的定義，當傳⼊⼀個物件值時，就會進⾏解構賦值。之後在函式區塊中，直接可以使⽤由這個樣式結構提取到的傳⼊物件中的屬性值。

撰寫建議

• 解構賦值時，優先使⽤const來宣告。
• 解構賦值的樣式中不要包含空樣式(空物件或空陣列)。
• 在函式的傳⼊參數或回傳值中，要作解構賦值時，優先使⽤物件，⽽不要使⽤陣列。