函数 – JavaScript 核心概念

功能

第 1 部分 什么是函数？

以下是一些定义：

1. 代码
   块 = 执行操作或返回值

2. 自定义代码
   = 由程序员定义，可重用
   → 可以使程序更加模块化和高效

…

第 2 部分 函数定义

选项 1：关键字function

代码示例

function newEvent() {
    console.log(‘New event created!’)
}

应用

1. 以关键字开头function

2. 后跟函数名称

3. 函数名称遵循与变量
   相同的规则 = 可以包含字母、数字、下划线和美元符号
   → 经常用驼峰大小写
   书写 → 名称后跟一组括号： 可用于可选参数

4. 函数
   代码 = 包含在大括号中
   → 像 for 语句或 if 语句

5. 什么都不会发生
   = 在调用/调用函数之前→不会执行
   任何代码

选项 2：函数表达式

创造

= 将函数分配给变量

代码示例

= 使用上面的
示例 → 直接将返回值应用于变量 （addsum)

const sum = function add(x, y) {
    return x + y;
}

// Invoked function to find the sum
sum(20, 5);

= 输出：25
→常量变量是一个函数sum

添加简洁

= 将其转换为匿名函数（又名未命名函数）
→ 目前，函数名称为
→ 但是对于函数表达式，不需要命名函数add

因此，通常省略名称，如下所示：

代码示例

const sum = function(x, y) {
    return x + y;
}

//Invoke function to find the sum
sum(100, 3);

= 函数名称：已删除
→ 将其转换为匿名函数add

保留函数名称

= 可用于帮助调试
→但是，通常省略名称

选项 3：箭头函数

目的

= 从 ECMAScript 6 开始定义函数的更新、更简洁的方法 → 由等号表示，后跟大于号：
= 始终匿名函数
→ 它们是一种函数
表达式=>

基本示例

= 求 2 个数字的乘积：

const multiply = (x, y) => {
    return x * y;
}

// Invoke function to find product
multiply(30, 4);

= 而不是写出关键字
→ 已使用箭头：指示一个函数 = 否则，它的工作方式类似于正则函数
表达式
→ 有一些高级差异function=>

Benefits

1. Concise Syntax

2. 隐式返回
   = 允许我们编写单行代码

3. 当您在另一个函数中使用箭头函数
   时，不会重新绑定 = 有助于执行单击处理程序等操作。this

应用

转换为箭头函数

= 变成箭头函数

1. 删除关键字function

2. 添加一个胖箭头：
   = 它与→做
   同样的事情 当 ged 时，你会得到同样的东西=>functionconsole.log

3. 如果只有 1 个参数
   ，请删除括号 = 尽管您可以将括号保留为样式选择
   → 示例：在回调函数（即映射函数）中，最好将它们省略为干净的语法

1 参数

= 括号可以排除
示例：平方 ，只需要将 1 个数字作为参数传递x

= 括号已被省略：

代码示例

const square = x => {
    return x * x;
}   

square(8);

= 输出：64 → 这些示例仅包含一个语句

→ 因此： 箭头函数允许进一步减少语法return

单线return

如果函数只有一行：
= 大括号和语句都可以省略returnreturn

代码示例

const square = x => x * x;

square(10);

= 输出：100

无参数/参数

= 箭头函数
中仍然需要一组空括号 → 也可以使用下划线代替→ 下划线 = 一次性变量：B / c 我们实际上正在创建一个名为但不使用它
的变量
→它根本没有任何意义_()__

= 可以使用任何变量名称
→ 只是扔掉（因为它周围没有括号）

代码示例

names.map(_ => `Angeline Wang`);
names.map(x => `Angeline Wang`);
names.map(boo_yaa => `Angeline Wang`);

= 你可以随心所欲地做这件事

返回

隐式与显式

隐式返回

1. 许多用JS编写的回调函数只是一个行=我们只是在一行
   
   中立即返回一些东西 → 不需要一大堆行

2. 箭头函数的唯一目的是返回一些东西
   =不需要关键字return

箭头函数中的隐式返回

1. 删除return

2. 把它放在一行上

3. 删除大括号
   = 将成为隐式返回 → 意味着我们不需要指定要返回
   
   的内容→ 将假设我们正在这样做
   →将再次看到同样的事情console.log

显式返回
= 显式写入要返回的内容return

命名函数与匿名函数

命名函数

= 函数附加了一个名称

命名示例
这是命名函数的样子：

function sayMyName(name) {
    alert(`Hello ${name}`);
}

命名函数
的好处 = 在堆栈跟踪的情况下：当您遇到错误
时 →找出出了问题的地方

= 行号可能不是很有帮助
→ 需要知道它被调用的函数的名称

箭头功能匿名

但是，如果使用箭头函数
= 您无法将它们
命名 → 箭头函数都没有名称
→ 箭头函数始终是匿名函数

解决方案
= 可以将箭头函数放入变量
→ 这意味着您将向箭头函数传递名称并以这种方式创建函数声明

例

const sayMyName = (name) => {alert(`Hello ${name}!`)}

sayMyName(‘Angeline Wang’);

= 这仍然是一个匿名函数，它不会给我们很好的堆栈跟踪
→但是如果你不关心堆栈跟踪：你可以这样做

选择哪个选项

= 3 种不同类型的语法产生相同的输出
→ 使用哪种语法取决于偏好/公司编码标准，以决定如何构建自己的函数

…

第 3 部分 函数调用

如何调用函数

= 写下函数名称后跟括号
→ 并且可以根据需要多次重复使用

代码示例

newEvent();

…

第4部分 函数参数

定义

= 作为名称传递到函数中并表现为局部变量的输入

目的

1. 通过创建动态函数使代码更加动态

2. 添加其他功能

3. 使代码更灵活

代码示例

示例：添加事件日期

function newEvent(date) {
    console.log(`New event on ${date}!`);
}

= 函数名称为 new事件
→ 现在括号内有单个参数
→ 参数名称遵循与命名变量相同的规则

在函数中使用参数

例

= 要在字符串中使用参数：→而不是静态字符串：
添加模板 文本字符串
包含参数
不表现为局部变量

参数值分配

1. 如果参数未在任何地方
   定义 = 调用函数时可以为其赋值 → 值与函数
   调用
   →的括号一起放置 它被用作参数

2. 每次在函数
   中使用参数时 = 使用函数调用期间传递的值

真实世界用例

= 例如，该函数将从数据库中提取用户名，而不是直接提供名称作为参数值

…

第 5 部分 函数内部的声明

= 变量可以在函数
内声明 → 称为局部变量
它们将仅存在于其自己的功能块的范围内

可变范围

= 确定变量的可访问性
→ 即函数内部定义的变量：函数外部无法访问
但可以与整个程序中使用函数同时使用

…

第 6 部分 返回值

允许的参数数量

= > 1 可以在函数
中使用参数 → 您可以将多个值传递到函数中并返回一个值

代码示例

= 创建函数以查找 2 个值
的总和 → 表示为 和xy

// Initialize add function
function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
add(9, 7);

= 定义参数为 x 和 y
的函数 → 然后将值 9 和 7 传递给函数
→ 当我们运行程序时，我们将收到这些数字的总和作为输出