iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Modern Web

從零開始進入 JavaScript & TypeScript 的世界系列 第 13

第13天-Rest 參數

Rest 參數(也有地方翻譯成其餘參數, 但我覺得很怪,所以就不翻譯了) 提供了讓我們可以更有彈性的方式可以無限擴充我們的參數。

那在還沒有這個方法之前,如果我們想要傳入多個參數我們可以怎麼做呢?我們可以傳入一個 Array, 像是這樣:

function sum(numbers: number[]): number {
    return numbers.reduce((total, n) => total + n, 0);
}

// 結果會是 6
console.log("Results of sum([1, 2, 3]) = " + sum([1, 2, 3]));

不過這樣的做法有一個缺點,他只能接受 Array 當作參數,假設今天我們有多個數字,我們就必須先將它轉換成 Array 才能夠把他當作參數傳入。不過,在 JavaScript 中有一個神奇的參數叫做 arguments , 在 JavaScript 中,他會被動態的自動定義好給你的 function 使用,他的使用方式如下:

function sum2() {
    return Array
      .from(arguments)
      .reduce((total, n) => total + n, 0)
  }
  
sum2(1, 2, 3) // 結果會是6

上述這段程式碼在 JavaScript 中可以正常運行,但是在 TypeScript 中就會有錯誤,所以就無法使用,也因此我們如果要在 TypeScript 中達到到跟上面一樣的功能,就必須要使用 Rest 參數 了。

他的使用方式如下:

function sum1(...numbers: number[]): number {
    return numbers.reduce((total, n) => total + n, 0);
}
console.log("Results of sum(1, 2, 3) = " + sum1(1, 2, 3));

只要在參數名稱前面加上 ... 並且該參數的的型別必須是 Array 就可以了。上面的例子是 number , 我們也可以用在 string 上面,例如:

function concat(...countries: string[]): string {
    return countries.reduce((result, c) => c + ", " + result, "");
}
console.log(concat("Taiwan", "Japan", "China"));
// 結果會是 "China, Japan, Taiwan, "

所以和型別只要有需要,都可以使用 Rest 參數來達到更高的彈性,傳入像陣列一樣的多個參數,又可以不用將其轉換成陣列。


上一篇
第12天-const 與 readonly
下一篇
第14天-使用更高階的語法-reduce
系列文
從零開始進入 JavaScript & TypeScript 的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言