Es6新增语法

174 阅读3分钟

Es6新增语法

  • let声明变量

  1. let声明的变量只在所处于的块级有效
  
   if(true) {
  let a = 10;
  }
  console.log(a)  // a is not defined
  1. 在业务逻辑比较复杂时,能够防止内层变量覆盖外层变量
  2. 拥有块级作用域的变量还有一个好处 防止循环变量变成全局变量
  3. 不存在变量提升 只能先声明再使用

    console.log(a); // a is not defined
    let a = 20
  1. 暂时性死区 在块级作用域内使用let关键字声明的变量会被整体绑定在这个块级区域 不再受外部代码影响
    var temp = 123;
    if(true) {
    temp = 'abc';
    let temp;
    }
  • const 声明常量,常量就是值(内存地址)不能变化的量**

  1. 具有块级作用域
  if(true) {
  const a = 10;
  }
  console.log(a); // a is not defined
  1. 声明常量时必须赋值
const PI// 丢失了初始值
  1. 常量赋值后,值不能修改

                     对于基本数据类型来讲,一旦赋值 值不可更改,比如数值或者字符串

                    对于复杂数据类型来讲,不能重新赋值,但是可以更改数据结构内部的值 比如数组或者对象

const PI = 3.14;
PI = 100; // Assignment to constant variable 不能更改此常量的值
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']
ary = ['a', 'b']; // Assignment to constant variable
  • let、const、var的区别:

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

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

  • 数组解构:将数组中的值提取出来,然后赋值给另外的变量

  let [a, d, c] = [123];
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
  
  //解构不成功则为undefined
    let [foo] = [];
    let [bar, foo] = [1];
  • 对象结构:{变量名} = {具体被解构的对象} ,实际上是属性匹配 变量的名字匹配对象中属性的名字 如果匹配成功 就将对象中属性的值赋值给变量
  let person = {name'zhangsan'age20};
  let {name, age} = person;
  console.log(name); // 'zhangsan'
  console.log(age); // 20
  • 第二种写法:
  let {name: myName, age: myAge} = person; // myName myAge属于别名
  console.log(myName); // 'zhangsan'
  console.log(myAge); // 20
  • 箭头函数

  • 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this 箭头函数被定义在哪 箭头函数中的this就指向哪
  • 剩余参数

  • 当函数实参个数大于形参个数时,我们可以将剩余的实参放到一个数组中,剩余参数语法允许我们将一个不定数量的参数表示为一个数组
    function sum (first, ...args) {
    console.log(first); // 10
    console.log(args); // [20, 30]
   }
     sum(102030);
  • 剩余参数和解构配合使用

let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
  • 展开运算符

  • 展开运算符可将数组或者对象转为用逗号分隔的参数序列
    let ary = [123];
    ...ary; // 1, 2, 3 
    console.log(...ary); // 1 2 3 参数序列中的逗号被当作方法的参数分隔符