ES6在ES5的基礎(chǔ)上增加了許多新功能和新用法，使JavaScript更加傾向于面向?qū)ο蟮恼Z言了。

前端知識的更新速度真的讓我這樣的小白崩潰啊

塊級作用域

在ES5里，我們用function來劃分作用域，叫做函數(shù)作用域。
通過var來申請的變量只識別函數(shù)作用域。

 var p = 1;
        function test(){
            console.log(p);     //undefined（此處下面的變量聲明會提升，但是還沒有進(jìn)行賦值）
            var p = 2;
            console.log(p);    //2
        }
 test();

在ES6里，增加了let，const 聲明，可以用代碼塊{ }來劃分作用域，叫做塊級作用域。

{
   var a = 1;
}
console.log(a); // 1 (var 不識別該作用域)

{
   let a = 1;
}
console.log(a); // 報錯?。。╨et識別塊級作用域，所以會報錯）

存在暫時性死區(qū)
ES6規(guī)定，在塊級作用域里定義的let和const形成了封閉作用域，所以在聲明前進(jìn)行賦值就會報錯。

var test = 123;
if (true) {
    test = 'abc';  //報錯
    let test;   
}

在同一個作用域之內(nèi)，const和let不允許重復(fù)聲明同一個變量，包括變量和形參的名字相同的情況

const message = 'hello';
const message = 'world';//報錯 Identifier 'message' has already been declared

let tt = 'hello';
let tt = 'world';//報錯 Identifier 'tt' has already been declared

const一旦聲明常量的值就不能更改,但是let可以

const message = 'hello';
message = 'world';//報錯 Assignment to constant variable.

let tt = 'hello';
tt = 'world';
console.log(tt);  //world

聲明一個常量必須馬上初始化

const message ;//報錯 Missing initializer in const declaration

對象內(nèi)部屬性值都是可以變的，但是引用的地址是不能變

const foo = {};
foo.prop = 123;
console.log(foo.prop);//123
foo.prop = 0;
console.log(foo.prop);//0

const foo = {};
foo = {};//報錯 Assignment to constant variable.

來看一個經(jīng)典的小面試題

        function test() {
            var arr = [];
            for(var i=0; i<10; i++){
                arr[i]= function () {
                    console.log(i);
                }
            }
            return arr;
        }
        var demo = test();
        for (var j = 0; j<10; j++){
            demo[j]();
        } //打印結(jié)果 10個10

這就是著名的閉包問題??！

//在es5中，解決這個問題我們用到了立即執(zhí)行函數(shù)
        function test() {
            var arr = [];
            for(var i = 0; i<10; i++){
                (function (i) {
                    arr[i] = function () {
                        console.log(i);
                    }
                })(i);
            }
            return arr;
        }
        var demo = test();
        for (var j = 0; j<10; j++){
            demo[j]();
        }

//es6更加輕松的解決了這個問題
//將var 換成let就可以了
        function test() {
            var arr = [];
            for(let i=0; i<10; i++){
                arr[i]= function () {
                    console.log(i);
                }
            }
            return arr;
        }
        var demo = test();
        for (var j = 0; j<10; j++){
            demo[j]();
        }

在es6中，var和function 命令聲明的全局變量，依然是window的屬性
let、const、class聲明的全局變量，不再是window的屬性了。

解構(gòu)賦值

es6允許按照一定的模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)賦值

var [a,b,c] = [1,2,3];
//等同于var a = 1, b = 2, c = 3;

可以任意嵌套

var [a,[b,[c,[d]]]] = [1,[2,[3,[4]]]];

如果解構(gòu)失敗(左邊的值多)

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

如果不完全解構(gòu)（右邊的值多）
這樣的情況也是可以解構(gòu)成功的，按照變量對應(yīng)的位置進(jìn)行解構(gòu)即可。

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

如下情況會報錯 右邊不是數(shù)組（或者嚴(yán)格地說，不是可遍歷的結(jié)構(gòu)）
涉及到Iterator遍歷器的概念,以后我們會詳細(xì)說。

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

默認(rèn)賦值

當(dāng)右邊的值嚴(yán)格等于undefined的時候（即 “===”），會使用左邊的值

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

var [a = 1] = [undefined]
console.log(a); //1

var [a = 1,b = 2,c = 3] = [null];
console.log(a,b,c);//null 2 3 ( null == undefined 是不嚴(yán)格等于)

惰性求值

如果默認(rèn)值是一個表達(dá)式，那只有在用到的時候，才會求值

function val() {
    return 666;
}
var [a = val(),b = 2,c = 3] = [];
console.log(a,b,c); //666 2 3

如果a能取到值，就不會執(zhí)行 val() 函數(shù)。

function val() {
    return 666;
}
var [a = val(),b = 2,c = 3] = [1];
console.log(a,b,c); //1,2,3

從左向右解析

var [a = 1,b = a] = [];
console.log(a,b);// 1 1 

var [a = b,b = 1] = [];
console.log(a,b); //undefined 1

var [a = 1,b = a] = [1,2];
console.log(a,b); // 1,2

let [a = b,b = 1] = [];
console.log(a,b);//報錯 b無法進(jìn)行變量聲明提升

對象的解構(gòu)賦值

數(shù)組的元素是按照次序排序的，因此它們賦值也是按照順序賦值的，但是對象的屬性是沒有次序的，變量必須與屬性同名，才會被賦值

注意：

var a;
{a} = {a:1};

會報錯。js引擎誤以為{a}是一個代碼塊
所以我們要告訴js引擎，這不是一個代碼塊，是個表達(dá)式

var a;
({a} = {a:1});

由于數(shù)組本質(zhì)也是特殊的對象，因此可以對數(shù)組進(jìn)行對象屬性的解構(gòu)

var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
console.log(firsrt,last);//1 3

字符串也可以被解構(gòu)賦值，和數(shù)組相似

const [a, b, c, d, e] = 'hello';

由于類數(shù)組和對象都有l(wèi)ength屬性，還可以專門對這個屬性進(jìn)行解構(gòu)賦值：

var {length : len} = 'hello';
console.log(len); // 5

解構(gòu)賦值的時候，如果等號右邊是數(shù)組和布爾值，則會有限轉(zhuǎn)化成對象

函數(shù)的解構(gòu)賦值

function fn([a,b]) {
      console.log(a,b);
}
fn([1,2]); //1,2

參數(shù)在傳入數(shù)組的一瞬間就被解構(gòu)賦值成了a,b兩個變量，因此在函數(shù)內(nèi)部使用的變量而不是數(shù)組。

function fn([a,b]=[10,20]) {
     console.log(a,b);
}
fn([1,2]);  //1 2 (傳了參數(shù)，就不會走默認(rèn)賦值)

看一個吧

function move({x = 0, y = 0} = {}) {
  return [x, y];
} 
move({x: 3, y: 8}); // 3  8
move({x: 3}); // 3  0
move({}); //  0  0 
move(); // 0  0

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

第一種是給x、y變量指定默認(rèn)值，而第二種是給move函數(shù)指定默認(rèn)值而不是x、y變量

解構(gòu)賦值用途

• 交換變量

[a, b] = [b, a];

• 從函數(shù)返回多個值

function example () {
    return [1,2,3];
}
var [a, b, c] = example();

• 函數(shù)參數(shù)的定義

function f2({x,y,z}) {
    console.log(x,y,z);
}
f2({z:3,x:2,y:1});

• 提交json數(shù)據(jù)

var jsonData= {
    id: 42,
    status: 'ok',
    data:[888,999]
}
let {id,status,data:number} = jsonData;
console.log(id, status,number);