JS-ES6新增语法

81 阅读2分钟

为什么使用ES6

  • 变量提升特性增加了程序运行时的不可预测性
  • 语法过去松散,实现相同的功能,不同的人可能会写出不同的代码

let

声明变量的关键字

  • 不存在变量提升
  • 块级作用域
  • 暂时性死区

const

声明常量的关键字(常量就是值,内存地址不能变化的量)

  • 块级作用域
  • 声明常量时必须赋值
  • 常量赋值后,值不能修改

varletconst 区别

  1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升
  2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
  3. 使用 const 声明的是常量,在后面出现的代码中不能修改该常量的值 | var | let | const | | :----: | :----: | :----: | | 函数级作用域 | 块级作用域 | 块级作用域 | | 变量提升 | 不存在变量提升 | 不存在变量提升 | | 值可更改 | 值可更改 | 值不可更改 |

解构赋值

ES6中允许从数组中提取值,按照对应位置,对变量赋值;对象也可以实现解构

数组解构

    let arr = [1, 2, 3]
    let [a, b, c, d] = arr
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(d) // undefined

如果解构不成功,变量的值为 undefined

对象解构

    let obj = { name: '张三', age: 18 }
    let { name, age } = obj
    console.log(name) // 张三
    console.log(age) // 18
    
    let { name: myName, age: myAge } = obj // myName myAge 属于别名
    console.log(myName) // 张三
    console.log(myAge) // 18

箭头函数

    () => {}
    const fn = () => {}

函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号

    function sum(num1, num2) {
        return num1 + num2
    }
    const = sum = (num1, num2) => num1 + num2

如果形参只有一个,可以省略小括号

    function fn(num) {
        return num
    }
    const fn = num => num

箭头函数不绑定 this 关键字,箭头函数中的 this ,指向的是函数定义位置的上下文 this

    const obj = { name: '张三' }
    function fn() {
        console.log(this)
        return () => {
            console.log(this)
        }
    }
    const = resFn = fn.call(obj)
    resFn()

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

    function sum(num1, ...args) {
        console.log(num1) // 10
        console.log(num1) // [20, 30]
    }
    sum(10, 20,30)
    
    const sum = (...args) => {
        let total = 0
        args.forEach( (item) => {
            total += item
        })
        return total
    }
    console.log(sum(10, 20)) // 30
    console.log(sum(10, 20, 30)) // 60

剩余参数和解构配合使用

    let uname = ['张三', '李四', '王五']
    let [uname1, ...unameN] = uname
    console.log(uname1) // 张三
    console.log(unameN) // ['李四', '王五']