ES6 新增语法

Posted 2021-03-04 landuo629

为什么是 ES6

每一次标准的诞生都意味着语言的完善，功能的加强， javascript 语言本身也有一些令人不满意的地方

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

ES6 新增语法

let

ES6 中新增的用于声明变量的关键字

• let 声明的变量只在所处的块级有效
• 防止循环变量变成全局变量
• 不存在变量提升
• 暂时性死区 和 let 所在的块级区域进行绑定

注意:使用 let 关键字声明的变量才具有块级作用域，使用 var 声明的变量不具备块级作用域特性

const

作用：声明常量，常量就是值(内存地址)不能变化的值

• 具有块级作用域
• 声明常量时必须赋值
• 常量赋值时，值不能修改(不能更改内存地址)

let const var 区别

1. var 作用域为该语句所在打的函数内，且存在变量提升现象
2. let 作用域为该语句所在的代码块内，不存在变量提升
3. const 后面出现的代码中不能修改该常量的值

解构赋值

• S6 中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构
• 按照一定模式，从数组或对象中提取值，将提取出来的值赋给另外的变量

数组解构

• 数组结构允许我们按照一一对应的关系从数组中提取值然后将值赋给变量

一一对应，没有值的话为 undefind

对象解构

箭头函数

() => {}

用来简化函数定义语法的

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

• 函数中如果形参只有一个 形参外侧的小括号也是可以省略的

function fn(v) {
    return v;
}
const fn = v => v;

this 指向问题

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

剩余参数

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

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 ary = [‘zhangsan‘,‘lisi‘,‘wangwu‘];
        let [s1,...s2] = ary;
        console.log(s1); //‘zhangsan‘
        console,log(s2);//‘zhangsan‘, ‘lisi‘