Parameters, Arguments, Spread operator

2019-03-26 15:31:23

什麼是參數(parameters):參數就是我們帶入函式的變數,JavaScript 不一樣的地方就是當你呼叫 myFavorite() 不帶任何參數也可以執行,只是會獲得 undefined(為什麼是 undefined? 這個跟 Hoisting 有關,總之就是在建立執行環境的創造的階段時,JavaScript 設定好記憶體空間給變數和函數,而變數會被賦予 undefined 這個值),而參數給值的過程,是由左至右的。

function myFavorite(phone, sport, job) {
    console.log(`parameters: ${phone}, ${sport}, ${job}`)
}

預設參數

function myFavorite(phone = 'iPhone', sport, job) {
    console.log(`parameters: ${phone}, ${sport}, ${job}`)
}

或者是

function myFavorite(phone, sport, job) {
    phone = phone || 'iPhone'
    console.log(`parameters: ${phone}, ${sport}, ${job}`)
}

那什麼是引數(Arguments):所有傳入函式呼叫的參數就是引數

//                    parameters 參數 由左至右
function myFavorite(phone, sport, job, ...other) {

    // 參數: parameters1, parameters2, parameters3
    console.log(`parameters: ${phone}, ${sport}, ${job}`)
    // myFavorite() => undefined, undefined, undefined

    // spread 展開運算子 (...) :可將函式中的參數或陣列中的元素形成一個變數。ex. ...other 
    console.log('other: ', other)

    // arguments => 呼叫函式時實際代入的值:引數
    console.log('arguments: ', arguments)
    // myFavorite() =>  [Arguments] {}

    // if(arguments.length === 0) {
    //     console.log('Please, Insert parameters')
    // }
}
myFavorite('iPhone', 'table tennis', 'front-end', 'dog and cat', 'Mac')

// parameters: iPhone, table tennis, front-end
// other:  [ 'dog and cat', 'Mac' ]
// arguments:  [Arguments] {
//   '0': 'iPhone',
//   '1': 'table tennis',
//   '2': 'front-end',
//   '3': 'dog and cat',
//   '4': 'Mac' }