ES6之箭头函数

简介: ES6之箭头函数



前言

简单的讲,箭头函数是将原function关键字和函数名删掉的一种简写函数形式。


一、定义

通常函数的定义是:

fuction 函数名(参数){
    //函数体
  }
  //例如
  function fn1(a,b){
    return a+b;
  }
  var fn2=function(a,b){
    return a+b;
  }

箭头函数定义如下:

(a,b)=>{
    return a+b
  }
  //或
  var fn1()=(a,b)=>{
    return a+b
  }

二、简化

1.当函数参数只有一个时

这时括号可以省略,但是没有参数时,括号不能省略。

var fn1=()=>{};//无参数
  var fn2=a=>{};//单个参数
  var fn3=(a,b)=>{};//多个参数
  varr fn4=(a,b,...args)=>{};//多变参数

2.当函数体只有一条return语句时

这时可以省略{}和return关键字,但函数体包含多条语句时候,不能省略{}和return关键字。

()=>'hello';//返回'hello'字符串
  (a,b)=>a+b;//返回a+b的和
  (a)=>{
    a=a+11
    return a//多条语句
  }

三、注意

1.箭头函数的this

箭头函数中的this是静态的,始终指向函数声明时所在作用域下的this值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getAge1() {
            console.log(this.age);
        }
        let getAge2 = () => {
            console.log(this.age);
        }
        window.age = 20;//设置window属性age
        const school = {
            age: 18
        }
        //直接调用
        console.log("直接调用");
        getAge1();
        getAge2();
        //使用call改变this指向调用
        console.log("使用call改变this指向调用");
        getAge1.call(school);
        getAge2.call(school);
    </script>
</body>
</html>

上述两个函数直接调用时,this均指向的是window作用域下的age,但使用call改变this指向school作用域下的age,发现箭头函数并未改变指向,正如上诉所说它的this是静态的,始终指向函数声明时所在作用域下的this值。

2.不能作为构造函数实例化对象

let People = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let p = new People('王五', 20);

会报错

3.不能使用argument变量

let fn = () => {
            console.log(arguments);
        }
        fn(1, 2, 3);

报错

总结

以上就是箭头函数的介绍,但是大家一定要注意箭头函数的实际运用,比如箭头函数与解构赋值结合,箭头函数与数组方法回调结合等。(与数组方法回调结合我会在后面ES6的常见数组新增方法中讲解)

相关文章
|
15天前
|
虚拟化 iOS开发 开发者
Mac 下载 VMware 11.1.0-1.dmg 后如何安装?超简单教程(附安装包)
本教程介绍在Mac上安装VMware 11.1.0的完整步骤,适用于OS X 10.8-10.10系统。包括版本兼容性确认、安装包下载、拖拽安装方法及首次运行时的“无法验证开发者”问题解决。若系统为macOS 11及以上,建议使用更新版本的VMware Fusion。安装后可正常创建和运行虚拟机。
|
2月前
|
存储 安全 前端开发
Web渗透-文件上传漏洞-上篇
文件上传漏洞常见于Web应用,因类型限制不严可致恶意文件执行。本文介绍前端检测、MIME类型、黑名单、.htaccess、空格、双写等多种绕过方式,并结合upload-labs靶场演示利用方法,提升安全防护认知。
354 1
Web渗透-文件上传漏洞-上篇
|
4月前
|
数据采集 人工智能 调度
传统IT企业如何在AI时代中找准定位、实现转型升级?—— 解析传统IT企业的AI转型策略
本文AI专家三桥君探讨传统IT企业在AI浪潮中的转型策略,提出从工具提供商向业务成果交付者的商业模式转变。核心观点包括:构建"操作系统式AI"技术架构、发展"智能体经济"组织模式、采用SMART策略实现高效部署。三桥君强调AI转型需商业模式、组织架构与技术体系的全面革新,为传统IT企业提供系统性转型框架。
286 0
|
11月前
|
人工智能 算法 数据可视化
使用低代码平台,让复杂的应用开发变得更轻松
低代码平台通过模块化设计和五大技术引擎,支持快速开发高效、灵活的业务应用,显著降低开发门槛。平台兼容多种数据库,提供丰富的插件生态和组件库,支持跨平台应用,帮助企业快速响应市场需求,优化系统性能和运营效率。
|
7月前
|
存储 弹性计算 缓存
阿里云服务器经济型e与通用算力型u1各自性能、适用场景解析与使用常见问题参考
在阿里云的众多云服务器实例类型中,经济型e和通用算力型u1实例凭借其高性价比和广泛的适用性,成为了众多用户的首选。这两款实例不仅满足了个人和中小企业用户的日常需求,同时也为大型企业级用户提供了灵活且经济的选择。本文将深入剖析这两款实例的性能特点、适用场景,并提供选择意见参考和常见问题解答,帮助用户更全面地了解并选择合适的云服务器实例。
315 12
|
6月前
|
机器学习/深度学习 人工智能 搜索推荐
什么叫生成式人工智能?职业技能的范式转移与能力重构
生成式人工智能(Generative AI)是AI领域的重要分支,其核心在于通过学习数据分布生成新内容,如文本、图像、音乐等。与传统判别式模型不同,生成式AI基于深度学习技术(如Transformer架构),展现出“创造力”,但其本质仍是概率计算的结果。它正在重塑内容创作、编程、设计等多个职业领域,推动职业技能的范式转移。 掌握生成式AI需要理解其技术原理、能力边界及伦理挑战。职业技能培训应聚焦提示设计、结果评估和混合创作三大能力,帮助从业者在人机协作中发挥主导作用。未来,生成式AI将向多模态、个性化发展,而人类的独特价值在于为技术注入人文关怀与道德框架。
|
9月前
|
前端开发 搜索推荐 数据挖掘
推三返一模式开发案例
推三返一模式是一种创新的营销策略,其核心是鼓励现有用户推荐新用户注册或购买,以实现用户基数的快速增长和品牌影响力的提升。以下是对推三返一模式开发的详细解析:
|
10月前
|
存储 安全 数据处理
《高斯数据库与鸿蒙NEXT携手,筑牢数据全生命周期安全防线》
在数字化时代,数据安全至关重要。高斯数据库与鸿蒙NEXT系统的结合为数据全生命周期提供强大安全保障。鸿蒙NEXT通过星盾架构实现数据最小化授权,确保采集安全;系统级加密和TLS协议保障传输安全;Huks密钥库增强存储安全;AI优化器与实时监控确保处理安全;基于安全标签的访问控制保障交换安全;安全销毁机制保护隐私。二者携手,全方位守护数据安全。
209 11
|
10月前
|
机器学习/深度学习 开发框架 人工智能
操作系统生态兼容与创新的平衡艺术
本次分享的主题是操作系统生态兼容与创新的平衡艺术,由中科方德周杰分享。主要分为五个部分: 1.操作系统生态中的兼容与创新之争 2.版本进化中库兼容与隔离平衡 3.跨架构生态的隔离与统一 4.多系统融合的生态新可能 5.生态兼容与创新平衡
250 2
|
11月前
|
人工智能 机器人 芯片
《C++与类脑芯片:开启人工智能硬件新征程》
在人工智能快速发展的背景下,类脑芯片作为模仿人类大脑神经元结构的新型硬件,以其低功耗和高并行处理能力崭露头角。C++凭借其高效执行、强大内存管理和丰富的库支持,在类脑芯片的应用开发中展现出独特优势。二者结合不仅在智能感知、数据处理和机器人控制等领域带来突破,还为未来创新应用如智能诊断、个性化教育等开辟了广阔前景。尽管面临编程复杂性和生态不完善等挑战,但通过学术界、产业界和开源社区的合作,C++与类脑芯片有望推动人工智能迈向新高度。
306 12