分类
文章

如何在javascript中定义函数

介绍

function是执行动作或返回值的代码块。函数是由程序员定义的可重用的自定义代码,因此可以使您的程序更具模块化和效率。

在本教程中,我们将学习几种在JavaScript中定义函数,调用函数以及使用函数参数的方法。

定义功能

使用function关键字定义或声明function 。以下是JavaScript中函数的语法。

function nameOfFunction() {
    // Code to be executed
}

声明以function关键字开头,后跟函数名称。函数名称遵循与变量相同的规则-它们可以包含字母,数字,下划线和美元符号,并且经常以驼峰式大小写 。该名称后跟一组括号,这些括号可用于可选参数。函数的代码包含在大括号中,就像for语句if语句一样

在第一个示例中,我们将进行function declaration以将问候语打印到控制台。

// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}

在这里,我们有用于打印Hello, World!的代码Hello, World!greet()函数中包含的控制台。但是,在我们invoke或调用该函数之前,将不会发生任何事情,也不会执行任何代码。您可以通过在函数名称后加上括号来调用函数。

// Invoke the function
greet();

现在,我们将它们放在一起,定义我们的功能并调用它。

greet.js
// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}
// Invoke the function
greet();

随着对greet();的呼吁greet(); ,该函数将运行,我们将收到Hello, World! 作为程序的输出。

OutputHello, World!

现在,我们将greet()代码包含在一个函数中,并且可以根据需要重复使用它多次。

使用参数,我们可以使代码更具动态性。

功能参数

greet.js文件中,我们创建了一个基本函数,该函数将Hello, World打印到控制台。使用参数,我们可以添加其他功能,使代码更灵活。输入的Parameters将作为名称传递给函数,并表现为局部变量。

当用户登录到应用程序时,我们可能希望程序按名称打招呼,而不仅仅是说” Hello,World!”。

我们将在函数中添加一个名为name的参数,以表示被问候的人的名字。

// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

函数的名称为greet ,现在括号内有一个参数。参数的名称遵循与命名变量相同的规则。在函数内部,我们使用包含参数的模板文字字符串代替了由Hello, World组成的静态字符串,该字符串现在表现为局部变量。

您会注意到我们尚未在任何地方定义name参数。调用函数时,我们为其分配一个值。假设我们的用户名为Sammy,我们将调用该函数并将用户名作为argument 。参数是传递给函数的实际值,在这种情况下,它是字符串"Sammy"

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

"Sammy"的值通过name参数传递到函数中。现在,每次在函数中使用name ,它将代表"Sammy"值。这是整个代码。

greetSammy.js
// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}
// Invoke greet function with "Sammy" as the argument
greet("Sammy");

当我们运行上面的程序时,我们将收到以下输出。

OutputHello, Sammy!

现在,我们有一个如何重用函数的示例。在实际示例中,该函数将从数据库中提取用户名,而不是直接提供名称作为参数值。

除了参数外,还可以在函数内部声明变量。这些变量称为local variables ,仅存在于其自身功能块的scope 。变量范围决定了变量的可访问性。在函数内部定义的变量不能从函数外部访问,但是它们可以在整个程序中使用多次。

返回值

一个函数中可以使用多个参数。我们可以将多个值传递给一个函数并返回一个值。我们将创建一个函数来查找两个值之和,分别由xy表示。

sum.js
// Initialize add function
function add(x, y) {
    return x + y;
}
// Invoke function to find the sum
add(9, 7);

在上面的程序中,我们定义了一个带有参数xy的函数,然后将值97传递给该函数。运行程序时,我们将接收这些数字的总和作为输出。

Output16

在这种情况下,将97传递给sum()函数,该程序返回16

当使用return关键字时,该函数将停止执行并返回表达式的值。尽管在这种情况下,浏览器将在控制台中显示该值,但这与使用console.log()打印到控制台不同。调用函数将在调用函数的确切位置输出值。此值可以立即使用,也可以放入变量中。

函数表达式

在上一节中,我们使用了一个函数声明来获取两个数字的和并返回该值。我们还可以通过将函数分配给变量来创建function expression

使用我们相同的add函数示例,我们可以将返回值直接应用于变量,在本例中为sum

functionExpression.js
// Assign add function to sum constant
const sum = function add(x, y) {
    return x + y;
}
// Invoke function to find the sum
sum(20, 5);
Output25

现在sum常数就是一个函数。通过将其转换为anonymous function ,可以使该表达式更加简洁,这是一个未命名的函数。当前,我们的函数名称为add ,但是对于函数表达式,不必命名该函数,并且通常会省略该名称。

anonymousExpression.js
// Assign function to sum constant
const sum = function(x, y) {
    return x + y;
}
// Invoke function to find the sum
sum(100, 3);
Output103

在此示例中,我们删除了函数的名称add ,并将其转换为匿名函数。命名函数表达式可用于帮助调试,但通常会省略。

箭头功能

到目前为止,我们已经介绍了如何使用function关键字定义函数。但是,从ECMAScript 6开始 ,有一种更新,更简洁的方法来定义一个称为arrow function expressions 。众所周知,箭头功能由等号后接大于号: =>

箭头函数始终是匿名函数,并且是函数表达式的一种。我们可以创建一个基本示例来查找两个数字的乘积。

arrowFunction.js
// Define multiply function
const multiply = (x, y) => {
    return x * y;
}
// Invoke function to find product
multiply(30, 4);
Output120

除了写出关键字function ,我们使用=>箭头表示一个函数。否则,它与常规函数表达式的工作方式相似,但有一些高级区别,您可以在Mozilla开发人员网络上的箭头函数下阅读。

在仅一个参数的情况下,可以排除括号。在此示例中,我们对x平方运算,它只需要传递一个数字作为参数即可。括号已被省略。

// Define square function
const square = x => {
    return x * x;
}
// Invoke function to find product
square(8);
Output64

Note:在没有参数的情况下,箭头函数中必须有一个空括号()

对于仅由return语句组成的这些特定示例,箭头函数使语法进一步降低。如果函数仅是一行return ,则可以省略大括号和return语句,如以下示例所示。

// Define square function
const square = x => x * x;
// Invoke function to find product
square(10);
Output100

所有这三种语法类型都产生相同的输出。通常,根据偏好或公司编码标准来决定如何构造自己的功能。

结论

在本教程中,我们介绍了函数声明和函数表达式,从函数返回值,将函数值分配给变量以及ES6箭头函数。

函数是返回值或执行操作的代码块,使程序具有可扩展性和模块化性。

发表评论

电子邮件地址不会被公开。 必填项已用*标注