函数是计算机程序的主要部分之一。它们是 JavaScript 的基本构建块之一并且被广泛使用。在本文中,我们将讨论函数的定义以及它们为何如此重要。我还将向您展示如何开始使用 JavaScript 编写函数。
让我们开始学习吧!
JavaScript 中的函数是什么?
函数是一个代码块,它封装了一个独立的、自包含的行为,供计算机执行。
函数是一组有组织的指令,它们对应于用户想要在他们的程序中实现的特定任务或特定功能,以实现单个所需的结果。
函数内的代码仅在需要时运行,即仅在调用时运行。
函数是编程中一个重要且有用的部分,因为它们创建了可重用的代码。
无需在程序的不同部分复制、粘贴和重复相同的代码,您可以使用函数仅在一处编写该代码。然后,您可以在需要时反复使用它。
当您想对程序进行更改或调试并尝试修复错误时,这也很有帮助。
无需寻找代码可能位于的不同部分,您只需查看一个使代码更具可读性的特定位置。
如何在 JavaScript 中声明函数
在 JavaScript 中创建函数的一般语法如下所示:
function name(parameter1,parameter2,...) {
// the code statements to be executed
}
让我们分解一下:
- 你用function关键字声明一个函数。
- 接下来,您为该函数指定一个您选择的名称。JavaScript 中的函数名称区分大小写,约定和最佳实践是使用驼峰命名法。
- 函数名称后跟一组左括号和右括号。
函数可以通过输入来接收数据。这些输入括在括号中,称为参数。
参数用作值的局部占位符变量,这些值将在调用函数时作为输入传递到函数中。它们完全是可选的,如果有多个,则用逗号分隔它们。
- 最后是花括号,在它们内部是函数的主体以及在调用函数时要执行的代码语句。这是处理函数输入的地方。
如何在 JavaScript 中声明和调用一个简单的函数
function greeting() {
console.log('Hello World!');
}
上面,我们创建了一个名为greeting的函数。
这个功能是一个非常基本的功能,它的功能非常单一。它不接受任何输入,唯一执行的事件就是将Hello World!打印到控制台。
定义一个函数本身并不会在函数体内运行代码。如果我们想要看到运行结果,必须调用该函数。这也称为函数调用。
要调用不接受输入的函数,只需编写函数名称,后跟括号和分号。
greeting();
//output
//Hello World!
现在,您只需多次调用该函数本身即可多次重用该函数。这有助于避免重复代码:
greeting();
greeting();
greeting();
//output
// Hello World!
// Hello World!
// Hello World!
如何在 JavaScript 中声明和调用带参数的函数
我们可以修改前面的示例以获取输入。如前所述,我们将使用参数执行此操作。
参数是您在声明函数时传递给函数的值。
function greeting(name) {
console.log('Hello ' + name + ' !' );
}
命名的greeting函数现在接受一个参数name。在函数中将hello字符串使用+与name 和末尾的感叹号连接 。
调用接受参数的函数时,需要传入参数。
参数是您在调用函数时提供的值,它们对应于在函数的声明行中传递的参数。
例如:
greeting('Jenny');
//Output
// Hello Jenny !
参数是值Jenny,您可以将其视为name = 'Jenny'。name,参数,是占位符变量,Jenny是调用函数时传入的值。
函数可以接受多个参数,也可以将数据返回给程序的用户:
function addNums(num1,num2) {
return num1 + num2;
}
上面的代码创建了一个名为addNums的函数,它接受两个参数 num1和num2,用逗号分隔。
与函数输入的方式相同,它们也输出一个值
该函数将num1和 num2的和作为其输出返回。这意味着它处理这两个参数,执行请求的计算,并将最终值作为结果返回给用户。
调用函数时,必须传入两个参数,因为它接受两个参数:
addNums(10,20);
//Output
// 30
// think of it as num1 = 10 and num2 = 20
每次调用该函数时,您都可以传入不同的参数:
addNums(2,2);
// 4
addNums(3,15);
//18
JavaScript 函数中的变量范围
变量范围是指变量对程序不同部分的可见性。
在函数块外部和之前定义的变量具有全局作用域,可以从函数内部访问:
const num = 7;
function myFunc() {
console.log(num);
}
//Access the variable with a global scope from anywhere in the program:
console.log(num);
//Output
//7
//Call the function with the variable with global scope
myFunc();
//Output
// 7
但是,如果该变量是在函数内部定义的,它将具有局部作用域,并且仅在定义它的函数中受到限制和可见。
您无法从函数外部访问它:
function myFunc() {
const num = 7;
console.log(num);
}
// Try to access the variable with local scope from outside the function scope:
console.log(num);
//Otput:
//Uncaught ReferenceError: num is not defined
//Call the function with the variable defined inside the function:
myFunc();
//Ouput
//7
函数表达式
您还可以使用表达式创建函数。
这些函数是在表达式中创建的,而不是像您目前看到的那样使用函数声明创建。
const name = function(firstName) {
return 'Hello ' + firstName ;
}
在这里,我们使用变量name来存储函数。
要调用该函数,您可以像这样使用变量名:
console.log(name('Jenny'));
//Output
//"Hello Jenny"
这种类型的函数也称为匿名函数,因为它们不需要名称。
下面列出了命名函数和匿名函数之间的区别:
//named
function name(firstName) {
console.log('Hello ' + firstName);
}
name('Jenny');
//anonymous
const name = function(firstName) {
return 'Hello ' + firstName ;
}
console.log(name('Jenny'));
匿名函数中的变量也可以用作其他变量的值:
const name = function(firstName) {
return 'Hello ' + firstName ;
}
const myName = name('Timmy');
console.log(myName);
//Ouput
//"Hello Timmy"