【博学谷学习记录】超强总结 用心分享|前端学习w13-箭头函数/数组解构

hello 本周复习又来咯 一起来复习吧

1、箭头函数

引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

使用场景：箭头函数更适用于那些本来需要匿名函数的地方

1. 基本语法

1、只有一个参数可以省略小括号

2、如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值

3、加括号的函数体返回对象字面量表达式

总结：

1. 箭头函数属于表达式函数，因此不存在函数提升

2. 箭头函数只有一个参数时可以省略圆括号 ()

3. 箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被

返回

4. 加括号的函数体返回对象字面量表达式

2. 箭头函数参数

2. 箭头函数参数

3. 普通函数有arguments 动态参数

4. 箭头函数没有 arguments 动态参数，但是有 剩余参数 ..args

3. 箭头函数this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此

DOM事件回调函数为了简便，还是不太推荐使用箭头函数

      // 以前this的指向：  谁调用的这个函数，this 就指向谁
      // console.log(this)  // window调用

      // 1、普通函数
      // function fn() {
      //   console.log(this)  // window
      // }
      // window.fn()

      // 2、对象方法里面的this
      // const obj = {
      //   name: 'andy',
      //   sayHi: function () {
      //     console.log(this)  // obj
      //   }
      // }
      // obj.sayHi()

      // 2. 箭头函数的this  不是说window调用了该函数，是本作用域的上一层作用域的this 指向window
      // const fn = () => {
      //   console.log(this)  // window
      // }
      // fn()

      // 对象方法箭头函数 this
      // const obj = {
      //   uname: 'pink老师',
      //   sayHi: () => {
      //     console.log(this)  // this 指向谁？ window
      //   }
      // }
      // obj.sayHi()

      const obj = {
        uname: "pink老师",
        sayHi: function () {
          console.log(this);
          // 普通函数的话指向本次对象，obj。dom事件一般不用箭头函数
          let i = 10;
          const count = () => {
            console.log(this); // obj
          };
          count();
        },
      };
      obj.sayHi();
    </script>

解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2. 变量的顺序对应数组单元值的位置依次进行赋值操作

3、数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

基本语法：典型应用交互2个变量 注意： js 前面必须加分号情况