ES6 函数

2025年3月17日 | 阅读 8 分钟

函数是一组输入语句，执行特定计算并产生输出。它是一段旨在执行特定任务的代码块。当它被调用（或调用）时执行。函数允许我们以有组织的方式重用和编写代码。JavaScript 中的函数用于执行操作。

在JavaScript中，函数使用 function 关键字定义，后跟一个名称和 括号 ()。函数名称可以包括数字、字母、美元符号和下划线。函数名称中的括号可以包含由逗号分隔的参数名称。函数体应放置在 花括号 {} 中。

定义标准函数的语法如下

function function_name() {
	//body of the function
} 

要强制执行该函数，我们必须调用（或调用）该函数。这称为函数调用。调用函数的语法如下

示例

function hello() //defining a function
{
   console.log ("hello function called");
   }
hello(); //calling of function

在上面的代码中，我们定义了一个函数 hello()。 括号对 {} 定义了函数体，这称为函数的作用域。

输出

hello function called

让我们尝试理解不同的函数。

参数化函数

参数是在函数定义中列出的名称。它们是将值传递给函数的机制。

参数的值在调用期间传递给函数。除非另有明确说明，否则传递给函数的值的数量必须与定义的参数数量匹配。

语法

定义参数化函数的语法是

function function_name( parameter1,parameter2 ,…..parameterN) {   
   	 //body of the function
}

示例

在这个参数化函数的示例中，我们定义了一个函数 mul()，它接受两个参数 x 和 y，并在结果中返回它们的乘积。参数值在调用期间传递给函数。

function mul( x , y) { 
    var c = x * y;
    console.log("x = "+x);
    console.log("y = "+y);
    console.log("x * y = "+c); 
 } 
mul(20,30);

输出

x = 20
y = 30
x * y = 600

默认函数参数

在 ES6 中，如果参数未定义或者没有值传递给它，函数允许使用默认值初始化参数。

您可以在以下代码中看到相同的说明

例如

function show (num1, num2=200) 
{
    console.log("num1 = " +num1);
    console.log("num2 = " +num2);

}
show(100);

在上面的函数中，默认情况下 num2 的值设置为 200。如果没有明确传递 num2 的值，该函数将始终将 200 视为 num2 的值。

输出

100 200

如果函数显式传递其值，则参数 “num2” 的默认值将被覆盖。您可以通过以下示例来理解它

例如

function show(num1, num2=200) 
{
    console.log("num1 = " +num1);
    console.log("num2 = " +num2);
}
show(100,500);

输出

100 500

剩余参数

剩余参数不限制您在函数中传递值的数量，但所有传递的值必须是相同的类型。我们也可以说，剩余参数充当相同类型的多个参数的占位符。

为了声明剩余参数，参数的名称应该以具有三个句点（不多于三个或不少于三个）的 扩展运算符 为前缀。

您可以在以下示例中看到相同的说明

function show(a, ...args)
{
    console.log(a + " " + args);
}
show(50,60,70,80,90,100);

输出

50,60,70,80,90,100

注意：剩余参数应位于函数参数列表的最后。

返回函数

该函数还通过使用 return 语句将值返回给调用者。这些函数被称为返回函数。返回函数应始终以 return 语句结尾。一个函数中只能有一个 return 语句，并且 return 语句应该是函数中的最后一个语句。

当 JavaScript 到达 return 语句时，该函数会停止执行并立即退出。这就是为什么您可以使用 return 语句立即停止函数的执行。

语法

函数可以通过使用 return 语句，后跟一个值或一个表达式来返回值。返回函数的语法如下

function function_name() { 
    //code to be executed
    return value; 
}

示例

function add( a, b )
{
    return a+b;
}
var sum = add(10,20);
console.log(sum);

在上面的示例中，我们定义了一个函数 add()，它有两个参数 a 和 b。此函数将参数的加法返回给调用者。

执行上述代码后，您将获得以下输出。

输出

生成器函数

生成器（或生成器函数）是 ES6 中引入的新概念。它为您提供了一种使用迭代器和函数的新方式。

ES6 生成器是一种不同的函数，它可以在中间暂停一次或多次，并且可以在以后恢复。

您可以通过单击此链接了解有关生成器函数的更多信息ES6 生成器。

匿名函数

匿名函数可以定义为没有名称的函数。匿名函数不与标识符绑定。它可以在运行时动态声明。匿名函数在其初始创建后无法访问。

匿名函数可以在变量中赋值。这样的表达式被称为 函数表达式。 匿名函数的语法如下。

语法

var y = function( [arguments] ) 
{ 
     //code to be executed
}

示例

var hello = function() {
   console.log('Hello World');  
   console.log('I am an anonymous function'); 
 }
 hello();

输出

Hello World
I am an anonymous function

匿名函数作为参数

匿名函数的一个常见用途是它可以作为其他函数的参数。

示例

用作其他函数的参数。

setTimeout(function() 
{
   console.log('Hello World');
 }, 2000);

当您执行上面的代码时，它会在两秒钟后显示输出。

输出

Hello World

参数化匿名函数

示例

var anon = function(a,b)
{ 
   return a+b 
}
function sum() { 
   var res; 
   res = anon(100,200); 
   console.log("Sum: "+res)  
} 
sum()

输出

Sum: 300

箭头函数

ES6 中引入了箭头函数，它为您提供了一种更准确的方式来编写 JavaScript 中的函数。它们允许我们编写更小的函数语法。箭头函数使您的代码更具可读性和结构性。

您可以通过单击此链接了解有关 箭头函数 的更多信息ES6 箭头函数。

函数提升

与变量提升一样，我们可以在函数中执行提升。与变量提升不同，当函数声明被提升时，它只提升函数定义，而不是仅仅提升函数的名称。

让我们尝试通过以下示例说明 JavaScript 中的函数提升

示例

在这个例子中，我们在编写函数之前调用它。让我们看看在编写函数之前调用它会发生什么。

hello();
function hello() {
  console.log("Hello world ");
}

输出

Hello world

在上面的代码中，我们首先调用了函数，然后再编写它，但代码仍然有效。

但是，函数表达式不能被提升。让我们尝试在以下示例中查看提升函数表达式的说明。

hello();

var hello = function() {
  console.log("Hello world ");
}

当您执行上面的代码时，您将得到一个 “TypeError: hello is not a function.” 这是因为函数表达式无法被提升。

输出

TypeError: hello is not a function

函数构造函数

这是定义新函数的方式。函数语句不是定义新函数的唯一方法；我们还可以使用 Function() 构造函数 以及 new 运算符动态定义函数。

与使用 函数表达式 或 函数语句 声明函数相比，它的效率较低。

语法

使用 Function() 构造函数 创建函数的语法。

使用的参数

其语法包括

arg1, arg2, … argN： 这些是函数用作形式参数名称的名称。每个参数都必须是一个字符串，该字符串对应于 JavaScript 的有效标识符。

函数体： 这是一个字符串，包含 JavaScript 的语句，包括函数定义。

它可以包含任意数量的字符串参数。最后一个参数是函数体，它可以包含任意 JavaScript 语句，这些语句用分号彼此分隔。

函数() 构造函数不传递任何指定其创建函数名称的参数。

示例

// creating a function that takes two arguments and returns the product of both arguments
var mul = new Function('a', 'b', 'return a * b');

// calling of function
console.log("The product of the numbers is: " +mul(5, 5));

输出

The product of the numbers is: 25

立即调用函数表达式 (IIFE)

它是 JavaScript 中的一个函数，在定义后立即运行。 IIFE（立即调用函数表达式） 可用于避免从块内进行变量提升。它允许公共访问方法，同时保留函数中定义的变量的隐私。

您可以通过单击此链接了解有关 IIFE 的更多信息立即调用函数表达式 (IIFE)

JavaScript 函数和递归

当一个函数调用自身时，它被称为 递归函数。 递归是一种通过让一个函数重复调用自身直到达到结果来迭代操作的技术。

当我们要求在循环中定期使用不同的参数调用相同的函数时，这是最佳方法。

示例

function fact(num) {
      if (num <= 1) {
          return 1;
      } else {
          return num * fact(num - 1);
      }
  } 
  console.log(fact(6));
  console.log(fact(5));
  console.log(fact(4));

输出

720
120
24

函数表达式 v/s 函数声明

两者之间的根本区别在于函数声明在执行之前被解析，而函数表达式仅在脚本引擎在执行期间遇到它时才被解析。

与函数声明不同，JavaScript 中的函数表达式不提升。您不能在使用函数表达式之前定义它们。

函数声明和函数表达式之间的主要区别是函数的名称，该名称可以在函数表达式中省略以创建匿名函数。

下一个主题ES6 箭头函数

← 上一个下一个 →

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ES6 教程

ES6 函数

ES6 数组

ES6 对象

ES6 类

ES6 字符串

高级特性

ES6 其他

面试题

ES6 函数

示例

参数化函数

默认函数参数

剩余参数

注意：剩余参数应位于函数参数列表的最后。

返回函数

生成器函数

匿名函数

匿名函数作为参数

参数化匿名函数

箭头函数

函数提升

函数构造函数

立即调用函数表达式 (IIFE)

JavaScript 函数和递归

函数表达式 v/s 函数声明

相关帖子

ES6 箭头函数

ES6 生成器

ES6 IIFE

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器