ES6 的新特性(1)ECMAScript 6（简称 ES6）是于 2015 年 6 月正式发布的 JavaScript

简介

ECMAScript 6（简称 ES6）是于 2015 年 6 月正式发布的 JavaScript 语言的标准，它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

let

新增 let 命令，用来声明变量，使用 let 语句声明的变量，该变量的范围限于声明它的块中；

{
    let b = 0;
}
    console.log(b);//b is not defined

不存在变量的提升

console.log(c); // undefined
console.log(b); // Cannot access 'b' before initialization
let b = 0;
var c = 1;

不允许重复声明

let b = 0;
let b = 1;
//Identifier 'b' has already been declared

暂时性死区只要块级作用域内存在let，该声明就会绑定到这个区域，外部无法影响

  let x = 0;
    function name() {
        console.log(x);
        let x = 0;
    }
    name();//Cannot access 'x' before initialization at name

const

新增 const 声明的是一个只读的常量，一旦声明就可以在改变，特性接近let常指向一个数据不可变的内存地址，对于多样的数据类型（数组|对象）只会指向这个数据指针，并不会监视内部数据的变动。

不可变

const a = 0;
      a = 1;//TypeError: Assignment to constant variable.

声明对象或数组但是不可以重新赋值

    //数组
    const a = [0, 2, 3, 4];
          a[0] = 2222222;
    console.log(a);//[2222222, 2, 3, 4]

    //对象
    const a = { name: 'a', age: 18 };
          a.name = 'luojing';
    console.log(a); //{name: "luojing", age: 18}

    //赋值
    const a = { name: 'a', age: 18 };
          a = 1;
    console.log(a); // TypeError: Assignment to constant variable.

数值的扩展

数组的元素是按次序结构

解构赋值模式匹配

//之前
let a = 1;
let b = 2;
let c = 3;
let d = 4;
//ES6
//按照对应的位置从数组中取值赋值
let [a,b,c,d] = [1,2,3,4]

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

//...回把剩余的参数拿到并组成一个数组
let [, a, ...b] = [1, 2, 3, 4];
console.log(a, b); //2 , [3, 4]

//如果解构不成功，变量的值就等于undefined;
let [a, b] = [ 1 ];
console.log(a, b); //1 undefined

默认值

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

// 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
let [a, b, c = 1] = [1, 2, 'undefined'];
console.log(a, b, c); //1 2 'undefined'

let [a, b, c = 1] = [1, 2, null];
console.log(a, b, c); //1 2 null

//表达式作为默认值
function fn() {
        console.log('执行了');
        return '123';
    }
let [a = fn(), b] = [undefined, 'b'];
console.log(a, b); //执行了 123 'b'

//只有在用到的时候才会调用fn
function fn() {
        console.log('执行了');
        return '123';
    }
let [a = fn(), b] = ['a', 'b'];
console.log(a, b); //a b

//默认值可以使用其它已声明的变量
let value = 666;
let [a = value, b] = [undefined, 'b'];
console.log(a, b); //666 "b"

等号右边不为数组（或者严格地说，不是可遍历的结构）将会报错

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

对象的结构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

基础用法

let { name, age } = { name: 'LuoJing', age: 100 };
console.log(name, age);//LuoJing 100

let { name, abc, age } = { name: 'LuoJing', age: 100 };
console.log(name, abc, age); //LuoJing undefined 100

解构现有对象的方法

const { log } = console;
log('输出'); //输出

解构赋值

//log赋值到myLog变量
const { log: myLog } = console;
myLog('输出'); //输出

嵌套解构

let [a, man] = [0, { man: { name: 'LuoJing', age: 666 } }];
console.log(a, man);//0  man: {name: "LuoJing", age: 666}

//man是匹配模式不是变量，因此不会被赋值
let [a,{man: { name: cName, age: cAge },},] = [0, { man: { name: 'LuoJing', age: 666 } }];
console.log(a, cName, cAge);//0 "LuoJing" 666

//添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值过程
let obj = {};
let arr = [];
({ name: obj.name, age: arr[0] } = { name: 'luojing', age: 100 });
console.log(obj, arr); //{name: "luojing"} [100]

可以解构继承得到的属性

const obj1 = {};
const obj2 = { name: 'LuoJing' };
Object.setPrototypeOf(obj1, obj2);
let { name } = obj1;
console.log(name); //LuoJing

默认值默认值生效的条件是，对象的属性值严格等于 undefined

let obj = { name: 'LuoJing', age: 100, abc: undefined };
let { name, abc = 'empty' } = obj;
console.log(name, abc); //LuoJing empty

let obj = { name: 'LuoJing', age: 100, abc: 'undefined' };
let { name, abc = 'empty' } = obj;
console.log(name, abc); //LuoJing 'undefined'