0

0

你必须了解JavaScript箭头函数与剩余参数

WBOY

WBOY

发布时间:2021-12-21 18:35:08

|

2399人浏览过

|

来源于CSDN

转载

本篇文章给大家带来了javascript中关于箭头函数和剩余参数的相关知识,箭头函数与剩余参数都非常简洁,下面我们就一起来看一下怎样去使用,希望对大家有帮助。

你必须了解JavaScript箭头函数与剩余参数

1. 什么是箭头函数?

箭头函数表达式语法比函数表达式更简洁,即函数的一种简化形式。
它的写法:

() => {};   // 可以用来写一个匿名函数

它的结构:

const / let 函数名 参数 => 函数体

比如现在有一个一般形式的函数表达式

立即学习Java免费学习笔记(深入)”;

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

可以用箭头函数来写:

let add = (x, y) => {
	return x + y;};

2. 箭头函数的化简写法

  • 单个参数
// 对于单个参数,我们可以省略外面的圆括号let addOne = x => {
	return x + 1;}
  • 单行函数体
// 对于单行返回函数体,可以同时省略 {} 和  returnlet add (x, y) => x + y;
  • 单行对象
// 对于返回单行对象,在外面加个 ()let add (x, y) => ({
	value: x + y;});

3. 箭头函数的基础知识

箭头函数没有 this,它会根据作用域链在外层中寻找 this。
举个例子:

var A = 1;let fun = {
    A: 2,
    printA: () => {
        console.log(this.A);
    },
    printAA: function() {
        let print = () => {
            console.log(this.A);
        }
        print();
    }};fun.printA();  // 1fun.printAA();  // 2

调用 printA,里面是输出 this.A,由于箭头函数没有 this,所以在外层寻找,外层是 fun。在这里,fun.printA()是在全局作用域中调用的,所以外层的 this 指向的是 window,由于之前用 var 定义了一个 A = 1,所以输出的是 1。

调用 printAA,在里面调用了 print(),输出 this.A,看 print 这个函数,是个箭头函数,他没有 this,所以找外层,它的外层是 printAA,它是由 fun 调用的,所以它的 this 指向 fun,所以输出 fun 中定义的 A,也就是 2。


4. 箭头函数不适用的场景

  1. 作为构造函数

实例化构造函数之后,它的 this 指向实例化的对像,而箭头函数没有 this,所以它不能用来做构造函数。

Cogram
Cogram

使用AI帮你做会议笔记,跟踪行动项目

下载
  1. 需要 this 指向调用对象的时候

  2. 需要使用 arguments 的时候

箭头函数中没有 arguments,可以使用剩余参数来存参数。


5. 剩余参数

5.1) 什么是剩余参数 ?

举个例子:

let add = (x, y, z, ...args) => {
	console.log(x, y, z, args);};

args 就是剩余参数。
剩余参数是个数组,它即使没有值,也是以一个空数组形式存在。
比如:

let add = (x, y, z, ...args) => {
    console.log(x, y, z, args);}add(1, 2, 3);

在这里插入图片描述
x, y, z 对应参数 1, 2, 3,由于剩余参数没有值,所以空数组形式存在。

5.2) 作用

由于箭头函数没有 arguments,所以我们可以使用剩余参数替代 arguments 获取实际参数
举个例子:

const print = (...args) => {
    console.log(args);};print(1, 2);

在这里插入图片描述

5.3) 注意事项

  • 在箭头函数中,即使只有一个剩余参数,也不能省略圆括号
let add = (...args) => {};
  • 剩余参数只能是最后一个参数,之后不能再有其他参数,否则会报错

【相关推荐:javascript学习教程

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
excel制作动态图表教程
excel制作动态图表教程

本专题整合了excel制作动态图表相关教程,阅读专题下面的文章了解更多详细教程。

20

2025.12.29

freeok看剧入口合集
freeok看剧入口合集

本专题整合了freeok看剧入口网址,阅读下面的文章了解更多网址。

65

2025.12.29

俄罗斯搜索引擎Yandex最新官方入口网址
俄罗斯搜索引擎Yandex最新官方入口网址

Yandex官方入口网址是https://yandex.com;用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

197

2025.12.29

python中def的用法大全
python中def的用法大全

def关键字用于在Python中定义函数。其基本语法包括函数名、参数列表、文档字符串和返回值。使用def可以定义无参数、单参数、多参数、默认参数和可变参数的函数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

16

2025.12.29

python改成中文版教程大全
python改成中文版教程大全

Python界面可通过以下方法改为中文版:修改系统语言环境:更改系统语言为“中文(简体)”。使用 IDE 修改:在 PyCharm 等 IDE 中更改语言设置为“中文”。使用 IDLE 修改:在 IDLE 中修改语言为“Chinese”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

16

2025.12.29

C++的Top K问题怎么解决
C++的Top K问题怎么解决

TopK问题可通过优先队列、partial_sort和nth_element解决:优先队列维护大小为K的堆,适合流式数据;partial_sort对前K个元素排序,适用于需有序结果且K较小的场景;nth_element基于快速选择,平均时间复杂度O(n),效率最高但不保证前K内部有序。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

12

2025.12.29

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

134

2025.12.29

抖音网页版入口在哪(最新版)
抖音网页版入口在哪(最新版)

抖音网页版可通过官网https://www.douyin.com进入,打开浏览器输入网址后,可选择扫码或账号登录,登录后同步移动端数据,未登录仅可浏览部分推荐内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

63

2025.12.29

快手直播回放在哪看教程
快手直播回放在哪看教程

快手直播回放需主播开启功能才可观看,主要通过三种路径查看:一是从“我”主页进入“关注”标签再进主播主页的“直播”分类;二是通过“历史记录”中的“直播”标签页找回;三是进入“个人信息查阅与下载”里的“直播回放”选项。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

18

2025.12.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号