您的位置:首页>科学 >JavaScript 函数和函数表达式

JavaScript 函数和函数表达式

2023-09-29 20:35
在本教程中,您将借助示例学习 JavaScript 函数和函数表达式。

JavaScript 功能

函数是执行特定任务的代码块。

假设您需要创建一个程序来创建圆圈并为其着色。您可以创建两个函数来解决此问题:

  • 画圆功能
  • 给圆圈上色的功能

将复杂的问题分解为更小的块可以使您的程序更易于理解和重用。

JavaScript 还拥有大量内置函数。例如,Math.sqrt() 是用于计算数字的平方根的函数。

在本教程中,您将了解用户定义的函数。


声明功能

声明函数的语法是:

函数名称函数 () {
    // 函数体
}
  • 函数使用 function 关键字声明。
  • 函数命名的基本规则与命名变量类似。为您的函数指定一个描述性名称是个好主意。例如,如果您使用函数将两个数字相加,则可以将该函数命名为 addaddNumbers
  • 函数体写在{}中。

例如

//声明一个名为greet()的函数
函数问候(){
    console.log("你好");
}

通话功能

在上面的程序中,我们声明了一个名为greet()的函数。要使用这个函数,我们需要调用它。

这个就是调用上面的greet()函数。

//函数调用
问候();

在 JavaScript 中使用函数

示例1:显示文字

//打印文本的程序
// 声明一个函数
函数问候(){
    console.log("你好!");
}

// 调用函数
问候();

输出

你好!

功能参数

函数也可以用参数来声明。参数是声明函数时传递的值。

带参数的 JavaScript 函数的工作

示例 2:带参数的函数

//打印文本的程序
// 声明一个函数
函数问候(名称){
    console.log("你好" + 名字 + ":)");
}

// 变量名可以不同let name =提示(“请输入名称:”);

// 调用函数
问候(名字);

输出

输入姓名:Simon
你好,西蒙:)

在上面的程序中,greet函数是使用name参数声明的。提示用户输入名称。然后,当函数被调用时,参数被传递给函数。

注意 :在声明函数时传递一个值时,它被称为 参数 。调用该函数时,传递的值称为arguments


示例 3:两个数字相加

//使用函数将两个数字相加的程序
// 声明一个函数
函数添加(a,b){
    控制台.log(a + b);
}

// 调用函数
添加(3,4);
添加(2,9);

输出

7
11

在上面的程序中,add函数用于求两个数字的和。

  • 该函数采用两个参数 ab
  • 使用其名称调用该函数,并在一个参数中传递两个参数 34,在另一个参数中传递 29

请注意,您可以根据需要多次调用函数。您可以编写一个函数并使用不同的参数多次调用它。


函数返回

return 语句可用于将值返回到函数调用。

return语句表示函数已经结束。 return之后的任何代码都不会被执行。

如果没有返回任何内容,则函数返回 undefined 值。

JavaScript 函数与 return 语句一起使用

示例 4:两个数之和

//两个数字相加的程序
// 声明一个函数
函数添加(a,b){
    返回a+b;
}

// 获取用户的输入
let number1 = parseFloat(prompt("请输入第一个数字:"));
let number2 = parseFloat(prompt("请输入第二个数字:"));

// 调用函数
让结果=添加(数字1,数字2);

// 显示结果
console.log("总和为 " + 结果);

输出

输入第一个数字:3.4
输入第二个数字:4
总和是 7.4

在上面的程序中,数字的总和由函数使用 return 语句 return 给出。该值存储在 result 变量中。


使用该功能的好处

  • 函数使代码可重用。您可以声明一次并多次使用它。
  • 函数使编程变得更容易,因为每个小任务都分为一个函数。
  • 功能提高了可读性。

函数表达式

在Javascript中,函数也可以定义为表达式。例如,

//求数字平方的程序
// 函数在变量内部声明
让 x = function (num) { return num * num };
控制台.log(x(4));

// 可以用作其他变量的变量值
让 y = x(3);
console.log(y);

输出

16
9

在上面的程序中,变量x用于存储函数。在这里,函数被视为表达式。然后使用变量名调用该函数。

上面的函数称为匿名函数。

注意: 在 ES2015 中,JavaScript 表达式被编写为箭头函数。您将在以后的教程中了解它们。