ES6——函数提升，函数参数，展开运算符，箭头函数，解构赋值，使用分号的两种情况

1.函数提升

把所有函数声明提升到当前作用域的最前面

只提升函数声明，不提升函数调用，赋值

函数表达式必须声明后调用

2.函数参数 

1.动态参数（伪数组）

 

示例——计算不确定个数的和

<script>
    function getSum() {
      //arguments 动态参数 只存在于函数里面
      //是一个伪数组
      let sum = 0
      for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i]
      }
      console.log(sum)

    }
    getSum(2, 3, 4)
  </script>

2.剩余参数 （真数组）

...后面的参数随便取名字，不一定是arr

 示例

<script>
    function getSum(...arr) {
      // console.log(arr)//使用的时候不需要加...
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      console.log(sum)

    }

    getSum(2, 3)
    getSum(2, 3, 4)
  </script>

3.展开运算符 

不会修改原数组

示例

 <script>
    const arr1 = [1, 2, 3]
    //展开运算符 可以展开数组
    // console.log(...arr)
    // 用法
    // 用于求数组最值
    console.log(Math.max(...arr1))
    console.log(Math.min(...arr1))
    // 2.用于合并数组
    const arr2 = [4, 5]
    const arr = [...arr1, ...arr2]
    console.log(...arr)
  </script>

4.箭头函数

1.含义

示例 

<script>
    // const fn1 = function () {
    //   console.log(123)

    // }
    // 基本语法
    const fn = () => {
      console.log(123)

    }


    // 只有一个形参的时候，可以省略小括号
    fn()
    const fn2 = x => {
      console.log(x)

    }
    fn2(2)


    // 只有一行代码时可以省略大括号
    const fn3 = x => console.log(x)
    fn3(1)


    // 只有一行代码时可以省略大括号和return
    const fn4 = x => x + x
    console.log(fn4(1))


    // 箭头函数可以直接返回一个对象
    // 对象用小括号包起来，用于区分函数体和对象
    const fn5 = (uname) => ({
      uname: uname
    })
    console.log(fn5('刘德华'))
  </script>

2.箭头函数的参数

箭头函数没有动态参数arguments。

有剩余参数...

利用剩余参数求和 

<script>
    // 利用箭头函数来求和 使用剩余参数
    const getSum = (...arr) => {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      return sum
    }
    const result = getSum(1, 2, 3)
    console.log(result)
  </script>

3.箭头函数与this指针

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

 1.普通函数的this

// script里的this指向Window
    console.log(this) //指向Window
    // 普通函数中
    function fn() {
      console.log(this)
    }
    fn() //普通函数的调用者默认是Window，所以这里指向Window

    const obj = {
      name: 'andy',
      way: function () {
        console.log(this) //指向obj

      }
    }
    obj.way()

2.箭头函数的this

 

示例

// 箭头函数的this 是上一层作用域的this 
    const fn = () => {
      console.log(this) //window,因为上一层就是script
    }
    fn()

    // 对象方法箭头函数this
    const obj = {
      uname: '小红',
      way: () => {
        console.log(this) //指向Window

      }
    }
    obj.way()
    // 对象中使用普通函数，普通函数里再套箭头函数
    const obj1 = {
      uname: 'pp',
      way: function () {
        let i = 10
        const count = () => {
          console.log(this) //指向obj，因为它的上一层指向obj

        }
        count()
      }
    }
    obj1.way()

5.解构赋值 

1.数组解构

1.含义

// 基本语法
    const arr = [100, 60, 80]
    //数组解构
    // const [max, min, avg] = arr
    const [max, min, avg] = [100, 60, 80]
    console.log(max)

 2.典型应用——交换两个变量的值

    // 交换两个变量的值
    let a = 1
    let b = 2;//分号一定要加，和后面的数组隔开
    [b, a] = [a, b]
    console.log(a, b)

3.利用剩余参数解决变量少单元值多的问题 

const [aa, bb, ...c] = [1, 2, 3, 4, 5]
    console.log(aa) //1
    console.log(bb) //2
    console.log(c) //3,4,5且返回的是真数组

4.解决undefined 

5.可以按需导入，并忽略某些值

 

6.支持多维数组解构

const [a, b, [c, d]] = [1, 2, [3, 4]]
    console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)

2.对象解构

1.含义

// 基本语法
    const {uname,age} = {uname: '小红',age: 18}
    console.log(uname)
    console.log(age)

2.有冲突时给新的变量名赋值 

 3.解构数组对象

//解构数组对象

    const pig = [{
      uname: 'peiqi',
      age: 18
    }]
    // 解构拿到数据
    const [{
      uname,
      age
    }] = pig
    console.log(uname)
    console.log(age)

4.多级对象解构 

// 多级对象解构
    const pig = {
      name: 'peiqi',
      family: {
        mother: 'mom',
        father: 'baba',
        sister: 'qiaozhi'
      },
      age: 6
    }

    // 解构
    const {name,family: {mother,father,sister},age} = pig
    console.log(name)
    console.log(mother)
    console.log(father)
    console.log(sister)
    console.log(age)

 

6.使用分号的两种情况 

1.立即执行函数

2.使用[1,2,3]不直接使用数组名时

 // 1.立即执行函数
    (function () {})();
    (function () {})();
    // 2.使用数组且不使用数组名的时候 且使用的时候前面有代码会干扰时
    // const arr = [1, 2, 3]
    const str = 'ppp'; //这样的就是会干扰,所以要加上逗号
    [1, 2, 3].map(function (item) {
      console.log(item)

    })