- Learn React with TypeScript 3
- Carl Rippon
- 361字
- 2021-06-10 19:16:41
JavaScript rest and spread syntax
In JavaScript, a rest parameter collects multiple arguments and condenses them into a single argument. It is called rest because it collects the rest of the arguments into a single argument.
This syntax was introduced in ES6 and allows us to nicely implement functions that have an indefinite number of parameters.
We define a rest parameter with three dots preceding the parameter name.
Let's go through a quick example:
- Let's create a logScores function that takes in a scores rest parameter that just outputs the parameter to the console:
function logScores(...scores) {
console.log(scores);
}
- We can call logScores as follows:
logScores(50, 85, 75);
If we run this, we'll get an array of the three elements we passed in as parameters output to the console. So, our scores parameter has collected all the arguments into an array.
The spread syntax is the opposite of rest parameters. It allows an iterable, such as array, to be expanded into function arguments.
Let's look at an example:
- Let's redefine our logScore function with specific parameters:
function logScore(score1, score2, score3) {
console.log(score1, score2, score3);
}
Note that this is still pure JavaScript – no types just yet!
- Let's define a scores array:
const scores = [75, 65, 80];
- Finally, let's use the spread syntax to pass our scores variable into our logScore function:
logScore(...scores);
If you are using the TypeScript playground, you'll get the compilation error, expected 3 arguments, but got 0 or more. The program still runs though, because this is perfectly valid JavaScript. 75, 65, 80 will be output to the console if we do run it.
In the following sections, we'll see how the new features in TypeScript 3 help us help the compiler to better understand what we are trying to do when using rest and spread. This will allow us to resolve the compilation errors seen in the preceding example.
- 少兒人工智能趣味入門:Scratch 3.0動畫與游戲編程
- Android Jetpack開發:原理解析與應用實戰
- Python深度學習
- C語言程序設計立體化案例教程
- Python神經網絡項目實戰
- PHP+MySQL+Dreamweaver動態網站開發實例教程
- R的極客理想:工具篇
- 深入RabbitMQ
- Hands-On Reinforcement Learning with Python
- Asynchronous Android Programming(Second Edition)
- RSpec Essentials
- Creating Data Stories with Tableau Public
- Node學習指南(第2版)
- Building Serverless Architectures
- Java EE 7 with GlassFish 4 Application Server