Ecmascript 6新特性

Posted 2020-08-13 超人会飞555

1. 声明变量由var变成let。let实际上为javascript新增了块级作用域。let与var相比具有的特性有

1、不允许重复声明一个变量

var a=5;
var a=7;
let b=6;
let b=8;//Uncaught SyntaxError: Identifier ‘a‘ has already been declared重复声明变量报错，而var重复声明的变量不会报错

2、不存在变量提升，也就是预解析过程。只有变量声明后才可以调用，在该变量声明前使用会报错

console.log(a);//undefined     var存在变量提升过程
var a = 6;
console.log(b);//ReferenceError: b is not defined不存在变量提升过程
let b = 8;

3、let声明的变量具有作用域，只在代码块内有作用域。只在块级作用域内有效。

    for(let i=0;i<6;i++){
        console.log(i);
    }
    console.log(i);//ReferenceError: i is not defined  i只在for循环有效
    //var声明的在全局内有效
    for(var j=0;j<6;j++){
        console.log(j);
    }
    console.log(j);//6

4、暂时性死区：只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，在代码块内，使用let命令声明变量之前，该变量都是不可用的。

var tmp = 123;

if (true) {
  tmp = ‘abc‘; // ReferenceError
  let tmp;
}

利用let的块级作用域这一特性，可以用于for循环的计数，添加索引值以及立即执行的匿名函数不再需要了。

//a[i]为DOM元素按钮的集合，点击按钮添加事件
for (let i = 0; i < 10; i++) {
  a[i].onclick = function () {
    console.log(i);
  };
}

 

        2.块级作用域：主要还是通过let来实现。{}表示代码块。只在代码块内有效

{
      let a=4； 
} 
console.log(a);//报错

         3、使用const定义一个只读的常量。一旦定义不可修改。且一旦定义必须初始化。

const a=5;
a=10;//报错  TypeError: Assignment to constant variable.
const c;//报错  SyntaxError: Missing initializer in const declaration

若为引用类型，因为变量名不指向数据，只指向数据所在地址，所以const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，例如

//若为数组
const arr = [1, 2, 3];
arr.push(4);
console.log(arr);  //[1,2,3,4]
arr=[1,2,3,4];//报错

//若常量为对象
const obj = {name: ‘123‘};
obj.name = "hxc";
console.log(obj);//{name:‘hxc‘
obj = {name:‘345‘};//报错

因此在定义对象或数组常量时要格外注意。const的其他特性与let一样，只在代码块内有效，不存在变量提升，暂时性死区。

        4.解构赋值：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。ES5之前对变量复制是指定值复制例如

var a = 1;
var b = 2;
var c = 3;

而es6允许解构赋值，例如

var [a,b,c] = [1,2,3];
console.log(a,b,c);     //1,2,3
var [c,d,e,f] = [1,[2],3];
console.log(c,d,e,f);     //1,[2],3,undefined

数组的解构赋值是按照对应顺序结构，且允许数组嵌套，如果解构不成功则为undefined。

对象也可以解构赋值，根据对象的属性解构赋值,变量必须与对象的属性名相同。未解构到的返回undefined；与数组相同允许嵌套。

var obj = {
      name: ‘hxc‘,
      age: 18
 }
 var {name, age}=obj;

 console.log({name, age});
 var {birth} = obj;            //undefined