• ES6 --》函数扩展以及箭头函数讲解

    目录

    函数参数扩展

    rest参数

    箭头函数

    箭头函数的使用规范

    箭头函数的嵌套

    箭头函数案例

    函数参数扩展

    ES6 允许给函数参数赋初始值：

    形参初始值 具有默认值的参数，一般位置要靠后(潜规则)；使用参数默认值时，函数不能有同名参数；参数默认值不是传值的，而是每次都重新计算默认值表达式的值。

    1. function add(a,b,c=10){
    2.     return a + b + c; 
    3. }
    4. let result = add(1,2);
    5. console.log(result); // 13

     与解构赋值结合,如果传递数值了就用传递的数值，否则就用默认值

    1. function connect({host="127.0.0.1",username,password,port}){
    2.     console.log(host);
    3.     console.log(username);
    4.     console.log(password);
    5.     console.log(port);
    6. }
    7. connect({
    8.     // host:'localhost', //传了值就用这个，如果没有传就用默认值
    9.     username:'root',
    10.     password:'root',
    11.     port:80
    12. })

    当函数传参给予了默认值，length属性将忽略传递默认值的长度。

    当我们给参数设置默认值时，会自动形成作用域，仅限函数内部的数据传值，如果函数形参没有传递数值，就会找函数之外的数，以下面例子为例：

    rest参数

    ES6引入rest参数(其形式为：...变量名)，用于获取函数的多余参数，这样就不需要使用arguments对象，rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

    箭头函数

    在ES6中规定允许使用箭头 ( => ) 定义函数。

    1. //正常写法
    2. let fn = function(){
    3.  
    4. }
    5. //箭头函数
    6. let fn1 = (a,b) =>{
    7.     return a + b;
    8. }
    9. console.log(fn1(1,2)); //3

    箭头函数的使用规范

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

    1. function getName(){
    2.     console.log(this.name);
    3. }
    4. let getName2 = () =>{
    5.     console.log(this.name);
    6. }
    7. // 设置 window 对象的 name 属性
    8. window.name = '张三'
    9. const person = {
    10.     name:'小张'
    11. }
    12. // 直接调用
    13. getName() //张三
    14. getName2() //张三
    15. //call 方法调用
    16. getName.call(person) //小张
    17. getName2.call(person) //张三 箭头函数是静态的，始终指向开始时的第一个值

    箭头函数中： 不能构造实例化对象，否则会报错。

    1. let Person = (name,age) =>{
    2.     this.name = name;
    3.     this.age = age;
    4. }
    5. let p = new Person('张三',18)
    6. console.log(p);

    箭头函数中：不能使用 arguments 变量。

    1. let fun = () => {
    2.     console.log(agruments);
    3. }
    4. fun(1,2,3)

    箭头函数中：箭头函数的简写方式。

    1、省略小括号，当形参有且只有一个的时候。

    1. let add = n => {
    2.     return n*n;
    3. }
    4. console.log(add(8));//64

    2、 省略花括号，当代码体只有一条语句时，此时 return 必须省略，而且语句的执行结果就是函数的返回值。

    1. let pow = (n) => n+n;
    2. console.log(pow(2)); //4

    箭头函数的嵌套

    箭头函数内部，还可以使用箭头函数：

    箭头函数案例

    点击 div 2s 之后颜色变成 pink ：

    2.     <title>Documenttitle>
    3.     <style>
    4.         div {
    5.             width: 200px;
    6.             height: 200px;
    7.             background: #58a;
    8.         }
    9.     style>
    11. <body>
    12.     <div id="id">div>
    13.     <script>
    14.         // 获取元素
    15.         let div = document.querySelector('#id')
    16.         // 绑定事件
    17.         div.addEventListener("click",function(){
    18.             // 如果想用 this 调用，先在外部保存this，否则this会指向window对象
    19.             let _this = this;
    20.             // 点击 2s 之后让盒子颜色改变
    21.             setTimeout(()=>{
    22.                 // div.style.background = 'pink'
    23.                 _this.style.background = 'pink'
    24.             },2000)
    25.         })
    26.     script>
    27. body>

    从数组中返回偶数的元素：

    使用总结：

    箭头函数没有自己的this对象

    不可以当做构造函数，即不能对箭头函数使用new命令，否则报错

    不可以使用arguments对象，该对象在函数体内不存在，如需使用用rest函数代替

    不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

  • 相关阅读:
    2024高校网络安全管理运维赛题目--复现+题目+wp
    【Unity】填坑，Unity接入Epic Online Service上架Epic游戏商城
    【爬虫实战】用python爬今日头条热榜TOP50榜单！
    ARM 中常用的汇编指令解释汇总
    【Spring Boot+Vue.js+JPA+Mysql】实现前后端分离的名片系统（附源码 超详细必看 可作为大作业使用）
    一文吃透哈希表
    Centos7安装mysql（只需六步）
    CPU寄存器与寻址方式
    基于 BIO 形式下的文件上传
    软件测试人员的7个等级，据说只有1%的人能做到级别7
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/126804778