ES6篇.day01-let,const,参数默认值,箭头函数,解构赋值,扩展运算符

目录

1. 变量声明(var,let,const)

2. 参数默认值

3. 箭头函数

4. 解构赋值

5. 扩展运算符(...)

1. • 变量声明

var关键字

以前使用 var关键字声明变量
-> 有作用域的提升
-> 没有块作用域的概念
-> 使用var可以重复的声明变量
-> 使用var声明变量时,可省去关键字

ES6新增命令(let,const)

let关键字: 声明变量, 先声明,再使用(否则报错), 有块级作用域, 不允许重复声明变量
const关键字: 声明一个只读的常量(声明后值不可修改), 必须初始化,有块级作用域

暂时性死区: 在代码块内,使用let命令声明变量之前,该变量都是不可用的
注意:
-> 区块中使用let/const,区块形成封闭作用域, 先声明再使用,否则报错
-> ES6允许块级作用域的任意嵌套
-> 外层作用域无法读取内层作用域变量
-> 内层作用域可以定义外层作用域的同名变量
-> 块级作用域的出现,实际上使得广泛应用的立即执行函数表达式(IIFE)不再必要了(可以不在使用闭包,立即执行函数)

      {
        var a = 10
        var a = 100
      }
      console.log(a)  //100

      {
        let num = 20
        num = 200
        console.log(num)
      }
      // console.log(num)

      // 遍历数组
      let arr = [1, 2, 3]
      for (var i = 0; i < arr.length; i++) {
        setTimeout(function () {
          console.log(i)  //由于var声明的变量没有块作用域,故会打印3个3, 可使用闭包解决
        },1000)
      }
      // 闭包解决
      for (var i = 0; i < arr.length; i++) {
        (function (a) {
          setTimeout(function () {
            console.log(a)
          },1000)
        })(i) //闭包
      }
      // let声明
      for (let i = 0; i < arr.length; i++) {
        setTimeout(function () {
          console.log(i)  // 0 1 2
        },1000)
      }

      var tmp1 = 1
      function fun(){
        // var tmp;  局部变量提升,覆盖外层全局变量
        var tmp2 = 2
        console.log(tmp1);  //undefined 
        if(true){
          var tmp1 = 'hello'
          // tmp = 'hello'
        }
      }
      fun()
      // console.log(tmp2);  //无法访问内部作用域的变量

      // const关键字: 声明一个只读的常量(声明后值不可修改),必须初始化
      const p = 3
      // p = 1      修改会报错 Assignment to constant variable.赋值给常数变量
      console.log(p);

      // ES5中定义常量
      Object.defineProperty(window,'PI',{
        value: 3.14
      })
      console.log(PI);

2. • 参数默认值

    // ES5设置默认值 if或者||
    function sum1(a,b,c){
      c = c || 10
      return a + b + c
    }
    console.log(sum1(1,2)); // 13

    // ES6中设置默认值  设置默认值的形参需写在最后 s数组,对象均可
    function sum2(a, b = 11, c = []){
      return a + b + c
    }
    console.log(sum2(1,2));  // 3

3. • 箭头函数

• ()=>{ }

• 箭头函数中的this, 指向函数定义时this的指向(通常函数定义时指向的是window)

• 箭头函数没有arguments

      // 箭头函数 可理解为函数表达式的缩写
      // 函数表达式:  变量 = 匿名函数
      let fun1 = function () {
        console.log('111')
      }
      // 箭头函数  也可设置默认值
      let getMax = (a, b) => {
        return Math.max(a, b)
      }
      console.log(getMax(12, 13)) // 13
      // 当只有一个参数时, 可省略箭头函数的()
      // 当只有一条语句时, 可省略箭头函数的{}, return可不写, 结果自动返回
      // let getAbs = (a)=>{
      //   return Math.abs(a)
      // }
      let getAbs = (a) => Math.abs(a)

      // 箭头函数和普通函数中this指向问题区别
      let a = 1000 //无变量提升, 不会挂着window对象上
      var obj = {
        a: 100,
        getA1: function () {
          // 普通函数中的this,指向函数调用者
          console.log(this) //{a: 100, getA1: ƒ, getA2: ƒ}
          return this.a
        },
        getA2: () => {
          // 箭头函数中的this, 指向函数定义时this的指向(通常函数定义时指向的是window)
          console.log(this) // Window{ }
          return this.a
        },
        getA3: function (n1, n2) {
          console.log('3--arguments-->', arguments)
          return this.a
        },
        getA4: (n1, n2) => {
          console.log('4--arguments-->', arguments)
        },
      }
      console.log(obj.getA1()) // 100
      console.log(obj.getA2()) // undefined
      // console.log(obj.getA2());  // 1000   若var a = 1000

      // 箭头函数没有arguments
      console.log(obj.getA3(1, 2)) //3--arguments--> Arguments(2)
      console.log(obj.getA4(3, 4)) //arguments is not defined

4. • 解构赋值

      // 针对数组和对象进行解构赋值
      // 数组的解构
      var arr = ['香蕉', '西瓜', '梨', '苹果']
      // ES5中
      // const apple = arr[3]
      // const pear = arr[2]
      // const banana = arr[0]

      // ES6中使用解构改写 不赋值的元素,,
      const [banana, , pear, apple] = arr
      console.log(apple, pear, banana) //苹果 梨 香蕉

      // 把数组中的第一个元素放在变量ba2中,其余放在一个新数组fruits中
      const [ba2, ...fruits] = arr
      console.log(ba2, fruits) //香蕉 (3) ['西瓜', '梨', '苹果']

      // 对象中的解构赋值
      const obj = { a: 10, b: 20, c: 30 }
      // ES5中获取
      console.log(obj.a);  // 10
      console.log(obj['b']); // 20

      // 使用ES6解构赋值改写
      const { a, b } = obj
      console.log(a,b); //10 20
      const { a: num1} = obj
      console.log(num1);  //10
      const { z: num2} = obj
      console.log(num2);  //undefined
      const { x = 50 } = obj
      console.log(x);   //50
      console.log(obj);  //{a: 10, b: 20, c: 30}

5. • 扩展运算符...

// 扩展运算符 ...
      // 1. 拷贝数组
      // ES5中复制数组元素 (拷贝)
      const arr2 = []
      // 方式1: 遍历
      for(let i = 0; i < arr.length; i++){
        arr2.push(arr[i])
      }
      // 方式2: assign()
      Object.assign(arr2,arr)
      console.log(arr2);

      const n1 = [1,2,[3,[4,5]]]
      const n2 = []
      // 浅拷贝           深拷贝是全展开[1,2,3,4,5]
      Object.assign(n2,n1)
      console.log(n2); //[1, 2, Array(2)]

      // ES6使用扩展运算符改写拷贝数组    浅拷贝
      const n3 = [...n1]
      console.log(n3);  //[1, 2, Array(2)]

      // 2. 拼接数组
      const a1 = [1,2]
      const a2 = [1,2]
      const a3 = [1,2]
      // 数组的方式 concat
      const bigArr1 = a1.concat(a2,a3)
      console.log(bigArr1);  // [1, 2, 1, 2, 1, 2]
      const bigArr2 = [...a1,...a2,...a3]
      console.log(bigArr2);  // [1, 2, 1, 2, 1, 2]

      // 3. 解构和赋值连用
      // 把数组中的第一个元素放在变量b3中, 将剩余元素存入一个新数组fruits
      var arr11 = ['香蕉', '西瓜', '梨', '苹果']
      const [b3, ...fs] = arr11
      console.log(b3,fs);  //香蕉 (3) ['西瓜', '梨', '苹果']

      // 4. 作为函数的参数
      const f1 = (...params) =>{
        console.log(params);
        // 进行求和
        let sum = 0
        params.forEach(item => sum += item)
        return sum
      }
      const sum1 = f1(10,12,13)
      console.log(sum1);  //35

      // 对象中扩展运算符的使用
      const obj11 = {a:10,b:20}
      // 对象的拷贝
      const obj22 = {...obj}
      console.log(obj22); //{a: 10, b: 20, c: 30}
      const obj33 = { c: 10, a:30, d: 222,...obj11,}
      console.log(obj33);  // {c: 10, a: 10, d: 222, b: 20}

PreviousNotes:

https://blog.csdn.net/qq_54379580/article/details/126464151?spm=1001.2014.3001.5501