React.js－認識-解構賦值／展開與其餘運算符／類別／模組系統

解構賦值

• 解構賦值(Destructuring Assignment)語法

解構賦值是”解析結構+指定值運算”的意思。是專⾨設計給物件與陣列使 ⽤的指定值語法，以”鏡⼦”般的對映樣式，提取物件與陣列中的成員值。
設計此語法的⽬的是讓程式碼更簡短與提⾼閱讀性。

const [a, b] = [1, 2]
const {a: x, b: y} = {a: 1, b: 2}
const {a, b} = {a: 1, b: 2}
// 註：可使⽤指定預設值、可搭配函式傳入參數與其餘運算符使⽤

撰寫⾵格建議

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

展開與其餘運算符

• 展開與其餘運算符(SpreadOperator&RestOperator)語法

展開運算符
展開⼀個陣列為⼀個個的獨⽴值，⽤於”陣列字⾯”與”函式呼叫”

const arr = [1,2,3]
const arr2 = [...arr]
console.log(arr2); // [ 1, 2, 3 ]

其餘運算符
集合所有剩餘的值，組合成⼀個陣列。⽤於”函式傳⼊參數定義”與”解構賦值”

function sum(…numbers) {   
    const result = 0    
    numbers.forEach(function (number) {     
        result += number
    })    
    return result
}  
sum(1) // 1
sum(1, 2, 3, 4, 5) // 15

撰寫⾵格建議

• 不要使⽤函式中的arguments物件，總是使⽤其餘參數語法來取代它
• 不要在展開運算符與其餘運算符後⾯有空格
• ⽤展開運算符來作拷⾙陣列，取代函式的’apply’與陣列的’concat’的語法

類別

原型物件導向的語法糖，轉換ES5語法後為函式。⽬的是提供⼀種⽤於⾃訂 類型、物件的繼承與擴充時，更簡便的語法

class MyClass extends Parent{  
    constructor() {  
        super()  
    } 
}

參考: Classes

撰寫⾵格建議

• 在命名類別時，使⽤⼤駝峰(PascalCase)命名⽅式
• 撰寫⾃訂的toString()⽅法時要確保它是可以運作的，⽽且不會產⽣副作⽤
• 不要使⽤JavaScript中的getters/setters，可能有不預期的副作⽤，不易測試與維護

模組系統

組織與管理程式碼檔案的重要語法，搭配npm⼯具，⽅便使⽤與導⼊現有模 組。

// 模組輸出的檔案 
export default MyClass 
// 模組導入的檔案 
import MyClass from './MyClass'

撰寫⾵格建議

• 不要使⽤萬⽤符(wildcard,*)作導⼊模組
• 從⼀個位置只作⼀次導⼊
• 導⼊語句都放在程式碼檔案中其他語句的上⾯
• 如果在模組中只需要單⼀個輸出，優先使⽤預設(default)輸出的語法