函数
有参数无返回值写法
c
function greet(name : string): void {
console.log('Hello' + name + '!')
}
greet('World')
打印结果 : [LOG]: "Hello, World!"
注意的是也可以设置一个默认参数值
c
function greet(name : string = '默认值'): void {
console.log('Hello' + name + '!')
}
greet()
打印结果 : [LOG]: "Hello, World!"
有参数有返回值
typescript
function add(a : number, b : number): number {
return a + b
}
const sum = add(5,3)
console.log(sum)
为什么使用 'const' ?
- 不变性 : 使用
const
声明的变量必须在声明时初始化,并且之后不能再被重新赋值。这有助于防止变量被意外修改,特别是在大型项目中,这能增加代码的可读性和可维护性。
什么情况下使用'let' ?
- 变化性: 如果你的变量值在后续需要修改,那么应该使用
let
来声明。let
也具有块级作用域,这是var
所不具备的。
总结: 优先使用const,需要修改时使用let 避免使用var
箭头函数
typescript
const add = (a : number, b : number) => a + b
const sum = add(10,5)
console.log(sum) //输出5
function sayhello(name:string) => {
console.log('hello')
}
sayhello()
使用=>
代替了传统的function
关键字,函数体较短时,可以是一个没有大括号的单行表达式,此时函数的返回值就是该表达式的结果。在上面的例子中,a + b
就是函数的返回值。如果函数体需要多行,可以用大括号{}
包裹,并显式使用return
语句来返回值。
箭头函数除了语法简洁之外,还有this
绑定的特点:箭头函数不会创建自己的this
,它会捕获其所在上下文的this
值作为自己的this
值,这对于回调函数和事件处理器非常有用。
函数可选参数使用
示例1
scss
function sayHello(name?: string) {
name = name ? name : '陌生人'
console.log('你好' + name + '!')
}
sayHello('Jack') // 你好Jack
sayHello ()//你好陌生人
示例2
typescript
const greet = (name: string, greeting?: string): string => {
return `${greeting || 'Hello'}, ${name}!`
}
//调用函数不传递可选参数
console.log(greet('Alie')) //输出 : Hello,Alie
//调用函数 传递可选参数
console.log(greet('Bob', 'Good morning')) //输出: Good morning, Bob!
在这个例子中,greet
函数接受两个参数:name
(必需的)和greeting
(可选的)。如果greeting
没有提供,函数会使用默认的问候语 'Hello'
。通过使用||
运算符,我们可以实现这种默认行为。当greeting
有值时,该值会被使用;如果greeting
是undefined
(即,没有传递该参数),则会使用'Hello'
。
注意点
- 可选参数必须跟在必需参数后面。如果你有多个参数,所有的可选参数都应该位于参数列表的末尾。
- 使用箭头函数时,语法保持一致,只是函数的定义方式有所不同。箭头函数提供了一种更简洁的方式来写函数表达式。
- 通过使用可选参数,你可以使函数调用更加灵活,减少需要定义的函数重载数量。
剩余参数
允许你将一个不定数量的参数表示为一个数组
typescript
const sumAll = (...numbers: number[]): number => {
return numbers.reduce((acc, curr) => acc + curr, 0);
};
console.log(sumAll(1, 2, 3, 4, 5)); // 输出: 15
剩余参数语法允许我们将一个不确定数量的参数作为一个数组收集到函数中。在函数定义时,你会在参数名前使用三个点...
来表示这是一个剩余参数。这样,无论你传递多少参数,它们都会被作为数组的元素存储。
例如,在下面的函数中:
typescript
const sumAll = (...numbers: number[]): number => {
// 函数体
};
...numbers
是一个剩余参数,它会收集所有传递给sumAll
函数的参数到一个名为numbers
的数组中。: number[]
表明numbers
是一个数字数组,你可以传递任意数量的数字给这个函数,如sumAll(1, 2, 3)
或sumAll(5, 10, 15, 20)
reduce
是数组的一个方法,它接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。在reduce
函数中,你会提供一个回调函数,该函数接受两个参数:累加器 (acc)和当前值(curr)。
-
累加器(acc):它累积回调的返回值。它是上一次调用回调时返回的累积值,或者初始值。
-
当前值(curr):数组中正在处理的当前元素
-
对于
numbers
数组中的每个元素,reduce
方法都会执行提供的回调函数,将累加器acc
和当前值curr
相加。 -
初始值
0
被提供给reduce
方法,所以累加器acc
的初始值是0
。 -
函数依次处理数组的每个元素,累加其值,并返回最终的总和。
函数解释:
acc
开始为0
(初始值),curr
是1
(数组的第一个元素),累加后acc
变为1
。接下来,acc
是1
,curr
是2
,累加后acc
变为3
。这个过程会继续,直到处理完数组的所有元素,最终返回累加后的总和15
。
解构参数
可以在函数参数中直接进行解构
typescript
const personInfo = ({ name, age }: { name: string; age: number }): string => {
return `${name} is ${age} years old.`;
};
console.log(personInfo({ name: 'Alice', age: 30 })); // 输出: Alice is 30 years old.
假设你有一个函数,它接收一个包含多个属性的对象作为参数。你只对这个对象的某几个属性感兴趣。通过解构,你可以在函数参数中直接指定你感兴趣的属性,从而避免在函数体内部访问这些属性。personInfo
函数定义了一个参数,这个参数是一个对象。在参数位置,我们使用了解构语法{ name, age }
来直接从传入的对象中提取name
和age
属性。函数体内部直接使用了name
和age
变量,而不需要先定义一个对象参数然后从中访问属性(例如,person.name
和person.age
)。这种方法提高了代码的可读性和简洁性。
数组解构
同样,你可以在函数参数中使用数组解构。这对于处理数组元素时非常有用,特别是当你只需要数组中的前几个元素时。
typescript
// 定义一个函数,它接受一个数组作为参数并使用解构
const firstTwo = ([first, second]: [number, number]): string => {
return `First: ${first}, Second: ${second}`;
};
// 调用函数
console.log(firstTwo([10, 20])); // 输出: First: 10, Second: 20
${}在字符串中的作用
ini
const name = "Alice";
const age = 25;
// 使用字符串和`${}`来插入变量和表达式
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出: Hello, my name is Alice and I am 25 years old.
在这个示例中,${name}
和${age}
在字符串中被替换为变量name
和age
的值。这比传统的字符串拼接方法更加清晰和简洁。
运用${}
javascript
const name = 'Asa'console.log(`${name} ssss`) //输出[LOG]: "Asa ssss"
转换成其他写法
arduino
'name + ssssss' [LOG]: "Asa ssss"