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,所以它不能用来做构造函数。

Cutout.Pro
Cutout.Pro

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

9

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

3

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

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

精品课程

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

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

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

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