HarmonyOS4 基础学习-函数

函数

有参数无返回值写法

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"