Es6笔记之箭头函数与解构赋值

目录

箭头函数

[箭头函数 this](#箭头函数 this)

箭头函数与普通函数的区别

解构赋值

数组解构

对象解构

[展开运算符 与 剩余运算符](#展开运算符 与 剩余运算符)

---

箭头函数

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。

<script>
    // const fn = function () {
    //   console.log(123)
    // }
    // 1. 箭头函数 基本语法
     const fn = () => {
      console.log(123)
     }
     fn()
    // const fn = (x) => {
    //   console.log(x)
    // }
    // fn(1)
    // 2. 只有一个形参的时候，可以省略小括号
    // const fn = x => {
    //   console.log(x)
    // }
    // fn(1)
    // // 3. 只有一行代码的时候，我们可以省略大括号
    // const fn = x => console.log(x)
    // fn(1)
    // 4. 只有一行代码的时候，可以省略return
    // const fn = x => x + x
    // console.log(fn(1))
    // 5. 箭头函数可以直接返回一个对象
    // const fn = (uname) => ({ uname: uname })
    // console.log(fn('刘德华'))

  </script>

总结：

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

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

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

箭头函数用=>把()和{ }连在一起,语法更简洁

当只有一条return语句，（）和return可以一起省略

形参只有一个，小括号可以省略，其余情况全部要加()

当只有一条return语句并且返回的是一个对象，把这个对象用()包裹起来

箭头函数 this

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

const fun = () => {
        console.log(this)
        // console.log(arguments) //  报错 箭头函数没有arguments
      }

      const obj = {
        a: 1,
        f: () => {
          //  this === obj
          const fn = () => {
            console.log(this)
          }
          fn()
        },
      }
      fun(1, 2)
      new fun()
      obj.f.call(obj)

箭头函数与普通函数的区别

1、箭头函数没有this，它内部的this由所处作用域（上下文）决定

2、箭头函数没有arguments，普通函数有

3、箭头函数不能new

解构赋值

解构意思就是分解一个东西的结构,可以用一种类似数组的方式定义N个变量，可以将一个数组中的值按照规则赋值过去。

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：

<script>
  // 普通的数组
  let arr = [1, 2, 3]
  // 批量声明变量 a b c 
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  let [a, b, c] = arr
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
</script>

嵌套赋值

//  let [x, [y],z]=[ 1,[ 2.1,2.2]];
// console.log( x, y,z );//1 2.1 undefined
let [ x, [y,z] ]= [ 1,[ 2.1,2.2]];
console.log(x,y,z);//1 2.1 2.2
let [json ,arr ,num] = [ {name : ' english ' },[ 1,2 ],3 ];
console.log( json , arr , num ) ;
//{name: ' english '}name: " english "[[Prototype]]: Object (2) [1, 2] 3

省略赋值

let [, , x ] =[ 1,2,3 ];
console.log (x ) ;//3

总结:

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

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

3．变量的数量大于单元值数量时，多余的变量将被赋值为undefined

4．变量的数量小于单元值数量时，可以通过...获取剩余单元值，但只能置于最末位

5．允许初始化变量的默认值，且只有单元值为undefined时默认值才会生效

注∶支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：

<script>
  // 普通对象
  const user = {
    name: '小明',
    age: 18
  };
  // 批量声明变量 name age
  // 同时将数组单元值 小明  18 依次赋值给变量 name  age
  const {name, age} = user

  console.log(name) // 小明
  console.log(age) // 18
</script>

1、属性可以无序

2、默认接受属性名的变量名与属性名相同

3、可以通过旧属性名:新变量名

展开运算符 与 剩余运算符

. . . 展开运算符 用于函数实参或者赋值号右边

. . . 剩余运算符 用于赋值号左边或函数形参

<script>
      // ... 展开运算符 用于函数实参或者赋值号右边
      console.log(...[1, 2, 3]) // 1,2,3
      console.log(Math.max(...[1, 2, 3])) // Math.max(1,2,3)
      console.log(Math.max.apply(null, [1, 2, 3]))
      const o = { a: 1, b: 2 }
      const obj = { ...o, c: 3 }
      console.log(obj)
      // ... 剩余运算符 用于赋值号左边或函数形参
      const [a, ...args] = [1, 2, 3, 4]
      console.log(args) // [2,3,4]

      const fn = (...args) => {
        console.log(args)
        let sum = 0
        args.forEach((item) => {
          sum += item
        })
        return sum
      }

      console.log(fn(1))
      console.log(fn(1, 2))
      console.log(fn(1, 2, 3))
    </script>