函数 – 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 传递给函数
→ 当我们运行程序时,我们将收到这些数字的总和作为输出

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/292067.html

(0)
上一篇 2022年10月29日
下一篇 2022年10月29日

相关推荐

发表回复

登录后才能评论