JavaScript 函数综合指南-js教程-PHP中文网

JavaScript 函数综合指南

聖光之護

发布： 2024-12-18 08:36:16

原创

1098人浏览过

javascript 函数综合指南

JavaScript 函数深度解析

本指南深入探讨 JavaScript 函数，并提供丰富的示例代码。

1. 函数的概念

函数是组织和重用代码的有效方式，它封装了一段可执行的代码块，并在调用时执行。

语法：

<code class="javascript">function 函数名(参数) {
  // 代码块
}</code>

登录后复制

示例：

<code class="javascript">function 问候(姓名) {
  console.log(`您好，${姓名}！`);
}
问候("Alice"); // 输出：您好，Alice！</code>

登录后复制

2. JavaScript 函数类型

JavaScript 支持多种函数类型：

a. 函数声明

使用 function 关键字声明函数。

立即学习“Java免费学习笔记（深入）”；

示例：

<code class="javascript">function 加法(a, b) {
  return a + b;
}
console.log(加法(2, 3)); // 输出：5</code>

登录后复制

b. 函数表达式

将函数赋值给变量。

示例：

<code class="javascript">const 乘法 = function(a, b) {
  return a * b;
};
console.log(乘法(2, 3)); // 输出：6</code>

登录后复制

c. 箭头函数 (ES6)

简洁的函数语法。

语法：

<code class="javascript">const 函数名 = (参数) => {
  // 代码块
};</code>

登录后复制

示例：

<code class="javascript">const 减法 = (a, b) => a - b;
console.log(减法(5, 3)); // 输出：2</code>

登录后复制

d. 匿名函数

没有名称的函数，常用于回调函数。

示例：

<code class="javascript">setTimeout(function() {
  console.log("两秒后执行");
}, 2000);</code>

登录后复制

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

定义后立即执行的函数。

示例：

<code class="javascript">(function() {
  console.log("IIFE 立即执行！");
})();</code>

登录后复制

3. 参数与实参

参数: 函数定义中的变量。
实参: 调用函数时传递的值。

示例：

<code class="javascript">function 问候(姓名, 年龄) {
  console.log(`你好 ${姓名}，你 ${年龄} 岁了。`);
}
问候("Bob", 25); // 输出：你好 Bob，你 25 岁了。</code>

登录后复制

4. 默认参数

为参数设置默认值，当未提供实参时使用。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

示例：

<code class="javascript">function 问候(姓名 = "访客") {
  console.log(`你好，${姓名}！`);
}
问候(); // 输出：你好，访客！</code>

登录后复制

5. rest 参数

使用 ... 收集多个参数到一个数组中。

示例：

<code class="javascript">function 求和(...数字) {
  return 数字.reduce((总和, 数) => 总和 + 数, 0);
}
console.log(求和(1, 2, 3, 4)); // 输出：10</code>

登录后复制

6. 返回值

函数可以使用 return 语句返回值。

示例：

<code class="javascript">function 平方(数) {
  return 数 * 数;
}
console.log(平方(4)); // 输出：16</code>

登录后复制

7. 回调函数

作为参数传递给另一个函数，并在稍后执行的函数。

示例：

<code class="javascript">function 处理用户输入(回调) {
  const 姓名 = "Charlie";
  回调(姓名);
}
处理用户输入((姓名) => {
  console.log(`你好，${姓名}！`);
});
// 输出：你好，Charlie！</code>

登录后复制

8. 高阶函数

接受其他函数作为参数或返回值的函数。

示例：

<code class="javascript">function 应用操作(a, b, 操作) {
  return 操作(a, b);
}

const 加法 = (x, y) => x + y;
const 乘法 = (x, y) => x * y;

console.log(应用操作(3, 4, 加法)); // 输出：7
console.log(应用操作(3, 4, 乘法)); // 输出：12</code>

登录后复制

9. 闭包

即使外部函数执行完毕，仍然可以访问外部变量的函数。

示例：

<code class="javascript">function 外部函数(外部变量) {
  return function 内部函数(内部变量) {
    console.log(`外部：${外部变量}，内部：${内部变量}`);
  };
}
const 我的函数 = 外部函数("外部");
我的函数("内部");
// 输出：外部：外部，内部：内部</code>

登录后复制

10. 函数作用域

函数拥有自己的局部作用域。

示例：

<code class="javascript">function 显示信息() {
  let 信息 = "你好，世界！";
  console.log(信息);
}
显示信息();
// console.log(信息); // 错误：信息未定义</code>

登录后复制

11. 递归

函数调用自身的函数。

示例：

<code class="javascript">function 阶乘(n) {
  if (n === 1) return 1;
  return n * 阶乘(n - 1);
}
console.log(阶乘(5)); // 输出：120</code>

登录后复制

12. 纯函数

对于相同的输入产生相同的输出，并且没有副作用的函数。

示例：

<code class="javascript">function 加法(a, b) {
  return a + b;
}
console.log(加法(2, 3)); // 输出：5</code>

登录后复制

作者：Abhay Singh Kathayat
全栈开发人员，精通前端和后端技术。联系邮箱：kaashshorts28@gmail.com

以上就是JavaScript 函数综合指南的详细内容，更多请关注php中文网其它相关文章！