常用es6新特性 笔记

常用es6新特性

1.let/const

1. let/const 和 var 的区别
        1-1. 预解析
          => 在预解析的过程中, var 定义的变量会被预解析
          => let 和 const 不会, 只能先定义后使用   不会解析
        1-2. 重复声明(重名变量)
          => 使用 var 可以定义两个一模一样的变量, 只是第二次定义没有意义, 赋值有意义
          => let 和 const 不允许声明重名变量
        1-3. 块级作用域
          => var 没有块级作用域
          => let 和 const 有块级作用域, 每一个可以书写代码段的 {} 都能限制变量的使用范围

      2. let 和 const 的区别
        2-1. 赋值问题
          => let 可以再声明的时候不赋值
          => const 在定义的时候必须赋值
        2-2. 修改值
          => let 定义的变量值可以被修改
          => const 定义的值, 在定义时赋值, 一旦赋值不允许修改

2.箭头函数

 箭头函数 和 函数表达式的区别
        1. 箭头函数内没有 arguments
          => 函数内一个伪数组, 是所有实参的集合
        2. 箭头函数内没有 this
          => 官方: 箭头函数内的 this 是上下文(context) 的 this
          => 私人: 箭头函数外面的函数 this 是谁, 箭头函数内的 this 就是谁

      箭头函数的两个特点(不强制要求)
        1. 可以省略小括号不写
          => 当你的形参有且只有一个的时候, 可以不写小括号
          => 如果你没有形参或者两个及以上, 那么必须写
        2. 可以省略大括号不写
          => 当你的代码有且只有一句话的时候, 可以不写大括号
          => 并且会自动把这一句话的结果当做返回值

3.函数的参数默认值

     函数的参数默认值
        + 当你不传递实参的时候使用的值
        + 在函数形参位置使用 赋值符号(=) 给形参赋值就行
        + 箭头函数也能设置参数默认值
          => 注意: 如果你设置了参数默认值, 那么不管多少个形参
          => 都需要书写小括号
    
eg:

    function fn1(a = 10, b = 20) {
      // 给形参 a 设置默认值为 10, 给形参 b 设置默认值为 20
      console.group('fn1 函数内的打印')
      console.log(a)
      console.log(b)
      console.groupEnd()
    }

4.模板字符串

模板字符串的特点:
        1. 可以换行书写字符串
        2. 可以在字符串内拼接变量
        3. 使用反引号(``)
          => 当你需要使用变量的时候, 书写 ${ 变量 }

5.解构赋值

 解构数组
        + 快速从数组中获取一些数据
        + 注意: 解构数组使用 []
        + 语法: let [ 变量1, 变量2, 变量3, ... ] = 数组
          => 按照数组的索引依次给 解构 内的 变量进行赋值
          
 解构对象
        + 快速从对象内获取一些数据
        + 注意: 解构对象使用 {}
        + 语法: let { 键名1, 键名2, ... } = 对象
        + 别名: let { 键名: 别名 } = 对象         

6.扩展运算符

展开运算符
        => 展开数组或者对象
        => 多用于数组
        => 当你使用在 数组 或者 对象 或者 函数实参位置的时候叫做 展开运算

      合并运算符
        => 用于合并多个数据
        => 当你使用在 解构数组 或者 函数的形参位置的时候叫做 合并运算
        
        1. 展开运算符
    // const arr = [ 100, 200, 300 ]
    // // console.log(arr)
    // // console.log(100, 200, 300)
    // // console.log(...arr)
    // const arr2 = [...arr, 400, 500, ...arr]
    // console.log(arr2)

    // 2. 合并运算符
    // const arr = [ 100, 200, 300, 400, 500 ]
    // 在解构中使用合并运算符
    // 把 arr 中 [0] 赋值给 a
    // 把 arr 中 [1] 开始到末尾的所有内容都赋值给 b, 以一个新数组的形式出现
    // 注意: 合并运算符必须写在最后一个的位置
    // const [ a, ...b ] = arr
    // console.log(a)
    // console.log(b)

    // 在函数形参位置使用
    // a 接受第一个实参
    // 剩下的所有实参给到 b, 以一个新数组的形式出现
    // 注意: 合并运算符必须写在最后一个的位置
    // function fn(a, ...b) {
    //   console.log(a)
    //   console.log(b)
    // }

7.对象简写

对象简写语法
        1. 当 key 和 value 一模一样, 并且 value 是一个变量的时候
          => 可以省略 value 和 冒号(:) 不写
        2. 当某一个 key 的值是一个函数, 并且不是箭头函数的时候
          => 可以直接省略 function 关键字和 冒号(:) 不写