React.js－變數／常數／箭頭函式

Published in

X13QQ

4 min readDec 16, 2020

變數

變數-有「盒⼦」的概念，把資料放在裡⾯，然後標註上⼀個名稱作為標籤
宣告時使⽤let關鍵字，⼀開始宣告時要養成給定初始值的好習慣
變數的資料類型，會隨著給定的值⽽變動，這稱為「動態資料類型」或是「鬆散(弱)資料類型」的特性

let a = 1   // 數字
a = ‘hello’ // 字串

常數

宣告時使⽤const關鍵字，常數規定宣告時⼀定要給定初始值，⽽且之後不能再次作給定運算

常數是⼀種「具有固定值的變數」，⼀開始宣告時給定值後，就不能再次作給定的運算，所以它的資料類型⼀開始就決定好了

const b = 1  // 數字
b = 'hello'  // 會報錯

常數可以⽤於複合型的資料類型，例如物件或陣列的宣告，因為裡⾯記錄的是「地址」，類似於某⼤樓的地址，如果改變裡⾯的成員並不會更動到地址

const c = [1, 2]
const d = c
c[0] = 3
console.log(c[0]); // 3
console.log(d);    // [ 3, 2 ]

常數也可以⽤於函式表達式的宣告，函式表達式只能使⽤const宣告

const foo = function() { }

變數 &常數撰寫⾵格建議

優先使⽤常數宣告(const)
使⽤變數宣告(let)時，宣告時就要指定初始值，如果不確定是什麼類型的值，可以使⽤null
在函式或程式碼⽂件的最前⾯宣告變數(常數)
⼀⾏語句宣告⼀個變數(常數)
把let的宣告放在⼀起，const的宣告放在⼀起

箭頭函式

箭頭函式語法是「函式表達式」的簡短語法，但它與函式原本的宣告⽅式有些特性上的不同

const foo = function(x) { return x + 1 }
const foo = (x) => x + 1

箭頭函式語法是使⽤肥箭頭符號(=>)，區分左邊的函式傳⼊參數，與右邊的函式主體，語法可以再進⾏省略：

只有單⼀個傳⼊參數時，可再省略圓括號(())
函式主體中只有單⼀⾏回傳的表達式(or值)，可省略花括號({})

綁定this值

函式物件中的 call 、 apply 、 bind 三個方法，無法”覆蓋”箭頭函式中的 this 值。

JSX語法裡搭配使⽤箭頭函式，因為標記有太多列時，可以使⽤圓括號(())作為撰寫時的分⾏語法，執⾏時仍然是同⼀⾏(⾃動加return的語法)

const HelloWorld = (props) => (
    <div>
        <h1>{props.text}</h1>
    </div>
)

箭頭函式 vs 一般函式

箭頭函式不能／不建議使⽤的情況

⽤物件字⾯⽂字定義物件時，物件中的⽅法

const calculate = {
  array: [1, 2, 3],
  sum: () => {
    return this.array.reduce((result, item) => result + item)
  },
}//TypeError: Cannot read property 'array' of undefined
calculate.sum()

在物件的prototype屬性中定義的⽅法
DOM事件處理的監聽者(事件處理函式)

const button = document.getElementById('myButton') button.addEventListener('click', () => { 
  this.innerHTML = 'Clicked button' 
}) //TypeError: Cannot set property 'innerHTML' of undefined

建構函式

const Message = (text) => { 
  this.text = text; 
} helloMessage = new Message('Hello World!');
// Throws "TypeError: Message is not a constructor" const

繼承與原型鏈

撰寫⾵格建議

callback(回調,回呼)優先使⽤箭頭函式
雖然箭頭函式的左邊(傳⼊參數)只有⼀個時可以省略圓括號(())，但建議還是不論幾個都⽤圓括號框起來
避免合併使⽤箭頭函式與其他的⽐較運算符(>=,<=)，會造成閱讀不便與混亂
肥箭頭符號的前後要加⼀個空格，不要黏在⼀起。另外，不要直接在符號前後換⾏

React.js－變數／常數／箭頭函式

Written by X13QQ