箭头函数 - JavaScript的新宠儿

这篇具有很好参考价值的文章主要介绍了箭头函数 - JavaScript的新宠儿。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 C语言专栏:想学C语言的,冲

📢 VUE专栏:想学VUE的,冲这里

📢 CSS专栏:想学CSS的,冲这里

📢 Krpano专栏:想学VUE的,冲这里

 📢 JavaScript专栏:想学JavaScript的,冲这里

🔔 上述专栏,都在不定期持续更新中!!!!!!!

箭头函数 - JavaScript的新宠儿,JavaScript保姆级教程,javascript,开发语言,ecmascript,前端

目录

✨ 前言

箭头函数的基本语法:

this绑定

调用限制

其他特点

✨ 结语


 

✨ 前言

        自ECMAScript 6起,JavaScript中引入了箭头函数,这是ES6最让人兴奋的特性之一。它极大地简化了函数的定义方式,让代码更加简洁。你是否也想立即掌握这个强大的新功能,但又不知道该如何使用?本文将全面解析箭头函数的用法、优缺点和场景运用,带你完全领会箭头函数的强大魅力。准备好你的JavaScript大脑,我们开始吧!

箭头函数 - JavaScript的新宠儿,JavaScript保姆级教程,javascript,开发语言,ecmascript,前端

箭头函数的基本语法:

const func = (arg1, arg2) => expression;

 这样简洁的语法适用于只有一个表达式的函数:

const add = (a, b) => a + b;

如果函数体有多条语句,需要用花括号 {} 括起来:

const sum = (a, b) => {
  let result = a + b;
  return result;
}

这里有几个关键点:

  • 使用=>定义函数,左侧为参数,右侧为函数体
  • 当只有一个参数,可以省略括号
  • 函数体如果只有一个表达式,可以省略大括号{},表达式结果会默认返回

举个例子:

// 两个参数
const add = (a, b) => a + b; 

// 无参数
const showMsg = () => console.log('Hello');

// 多行函数体需要加{}
const sum = (a, b) => {
  let result = a + b;
  return result;
}

 这就定义了三个箭头函数。语法简洁许多。

this绑定

箭头函数不绑定this,this的值继承自外围作用域。例如:

const obj = {
  name: 'Jack',
  print: () => {
    console.log(this.name); // this为全局对象 
  }
}

 print()里的this不是绑定到obj对象,而是继承自全局作用域。

调用限制

箭头函数不能用作构造函数,不能使用new命令,也就不能绑定prototype。

同样也不能用call、apply、bind来改变this的绑定对象。

其他特点

箭头函数不能作为Generator函数,不能使用yield关键字。

也不支持arguments变量。

箭头函数还有一些特别的地方需要注意:

  • 函数体只有一条语句,return 可以省略
  • 没有自己的this,this的值继承自外围作用域
  • 无法通过new关键字调用,所以也就没有了prototype
  • 不可以改变this的绑定,所以不适用于定义对象方法
  • 不能作为 Generator 函数,不能使用yield关键字

        尽管有一些限制,但箭头函数作为一种更简洁的函数表达式语法,适用于许多常见的函数场景,可以让我们的代码更加简洁。它很好地满足了函数式编程的需求。

        所以,在适当的场景下使用箭头函数,可以让我们的代码更加简介易读。它是JavaScript中一个非常棒的新特性,快去尝试使用箭头函数吧!

✨ 结语

        通过今天的学习,我们已经全面了解了JavaScript ES6中的箭头函数,包括语法定义、this绑定、省略return、调用限制等特性。合理使用箭头函数可以让我们的代码更加简洁优雅。但也要注意它的限制,不可滥用。总之,箭头函数是一个非常nice的ES6新特性,它将极大地推动函数式编程在JavaScript中的发展。如果你喜欢这篇博客,欢迎分享给你的编程伙伴一起get新知!

        我们改日再会

箭头函数 - JavaScript的新宠儿,JavaScript保姆级教程,javascript,开发语言,ecmascript,前端文章来源地址https://www.toymoban.com/news/detail-798506.html

到了这里,关于箭头函数 - JavaScript的新宠儿的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JavaScript保姆级教程】for循环与for循环遍历数组

    JavaScript是一门强大的编程语言,它允许开发者有效地控制程序的流程。在JavaScript中,有多种循环结构可供选择,其中for循环是最常用的之一。本教程将深入探讨for循环的基本概念,提供示例代码,并展示如何使用for循环来遍历数组。同时,我们还将介绍如何在for循环中嵌套

    2024年02月06日
    浏览(50)
  • 【Javascript保姆级教程】if判断语句的三种形式

    嗨,欢迎来到Javascript保姆级教程!在编写代码时,我们经常需要根据不同的情况来做出不同的决策和操作。这时候,就需要用到条件判断语句。今天,我们将学习Javascript中的三种主要条件判断语句:if、if…else和if…else if…。让我们一起来详细了解它们吧! 首先,我们来介

    2024年04月22日
    浏览(36)
  • JavaScript保姆级教程 ——— 重难点详细解析(万字长文,建议收藏)

    本文是整理了JS中的一些 重点,难点,以及不好理解的知识点 本文非常详细 ,深入的讲解, 包学包会 1.1 函数(Function)是什么? 函数(方法)是由事件驱动的或者当它被调用时执行的可重复使用的代码块 —— 官方说明 向来觉得官方的文档是有些生硬的,举个例子: 函数可

    2023年04月08日
    浏览(51)
  • JavaScript经典教程(七)-- JavaScript基础 -- 函数、argument、匿名函数、函数深入、选项卡

    1、函数 (1)特性 1、每个函数都有自己的作用域。 2、如果执行该变量名,会返回自己,即返回函数本身。 3、正常调用,返回函数中的执行结果。 当函数中无执行内容时,返回默认return=undefind;(每个函数都有默认return=undefined) 当函数中有执行内容时,返回返回值。 4、re

    2024年02月02日
    浏览(50)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(51)
  • 无涯教程-JavaScript - DB函数

    DB函数使用固定余额递减法返回指定期间内资产的折旧。 Argument 描述 Required/Optional Cost The initial cost of the asset. Required Salvage The value at the end of the depreciation (sometimes called the salvage value of the asset). Required Life The number of periods over which the asset is being depreciated (sometimes called the useful

    2024年02月09日
    浏览(45)
  • 无涯教程-JavaScript - CUMIPMT函数

    CUMIPMT函数返回start_period和end_period之间的贷款累计利息。 Argument 描述 Required/Optional Rate The interest rate. Required Nper The total number of payment periods. Required Pv The present value. Required Start_period 计算的第一个期间。 付款期从1开始编号。 Required End_period The last period in the calculation. Required T

    2024年02月09日
    浏览(88)
  • 无涯教程-JavaScript - DELTA函数

    DELTA函数测试两个值是否相等。如果number1 = number2,则返回1;否则返回1。否则返回0。 您可以使用此功能来过滤一组值。如,通过合计几个DELTA函数,您可以计算相等对的计数。此功能也称为Kronecker Delta功能。 Argument 描述 Required/Optional number1 The first number. Required number2 第二个数字。

    2024年02月09日
    浏览(45)
  • 无涯教程-JavaScript - ROW函数

    ROW函数返回引用的行号。 Argument 描述 Required/Optional Reference 您想要其行号的单元格或单元格范围。 如果省略引用,则假定它是出现ROW函数的单元格的引用。 请参阅下面的注释。 Optional 如果引用是一个单元格范围,并且如果将ROW作为垂直数组输入,则ROW将引用的行号作为垂直数组

    2024年02月07日
    浏览(44)
  • 无涯教程-JavaScript - TIME函数

    TIME函数返回特定时间的十进制数。如果在输入功能之前单元格格式为\\\"常规\\\",则输出格式为日期。 TIME返回的十进制数是一个介于0(零)到0.99988426之间的值,代表从0:00:00(12:00:00 AM)到23:59:59(11:59:59 P.M.)的时间。 Argument 描述 Required/Optional Hour 从0(零)到32767的数字表示小时。 大于23的任

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包