JS-ES6 新增语法

8次阅读
没有评论

共计 1375 个字符,预计需要花费 4 分钟才能阅读完成。

    为什么使用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) // ['李四', '王五']

    正文完
     0
    qiaofugui.cn
    版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计1375字。
    转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
    评论(没有评论)
    验证码