ES6中的新特性(一)

ECMAScript6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

我們來看看ES6都做了哪些擴充套件。

Let和const關鍵字

變數的解構賦值

字串，數值的擴充套件

陣列，物件的擴充套件

函式的擴充套件

for...of

先從let和const這兩個關鍵字看起。

let關鍵字類似於var,但是他又和var有些不同，主要有兩點，

避免了變數提升

只在塊級作用域內起作用

來看一段程式碼

var a = 1;
(function () {
      alert(a);

var a = 2;
})()

這時候彈出的會是undefined，因為在瀏覽器執行的時候，會有變數提升，也就是會先宣告變數a，這段程式碼實際上是這樣的

Var a；

Alert (a);

Var a=2;

而我們使用let關鍵字，就不會有這個問題，

var a = 1;
(function(){
    alert(a);
    let a = 2;
})();

這個時候瀏覽器會報錯，

因為變數沒有提升，所以執行到alert(a)的時候a還是未定義狀態，而且因為let只在塊級作用域裡起作用，所以外部的a也取不到。

然後我們再來看看const。const就是常量的意思，所以他就有了不可更改的屬性，嘗試給一個常量改變值是會報錯的，

const Name='matt';
Name='john';

const和let一樣，只在塊級作用域內作用, 不存在變數提升，必須先定義後使用, 不可重複宣告, 聲明後必須賦值。

const Person={
    'name':'matt'
};
Person.name='john';
Person.age=12;
console.log(Person);

這段程式碼是ok的。怎麼const又可以更改了，這就涉及到了傳值賦值和傳址賦值。你嘗試去給Person賦一個新地址會報錯的，比如Person={}。但是你只是更改它的屬性的話是OK的。

那什麼是傳址賦值呢？就好比，你預約了一個裝修工（張師傅）到你家進行裝修，你把你家的地址告訴了他，他順著地址來到你家，按照你的要求，把你家的門弄成紅色。

 僅僅過了兩天，你覺得不好看，你又找了另一個裝修工（王師傅），你也把地址告訴他，王師傅來到後也是按照你的要求，把門弄成了綠色。

最後，不管是張師傅還是王師傅，通過這個地址來到你家的時候，看到的門肯定是綠色的，因為最後一次修改是改成綠色。

寫成程式碼就是

 varZhang = {"door":"red"};

   //次日，你把地址也告訴了王師傅
   var Wang = Zhang;

   //王師傅按照地址，去到後把門改成綠色
   Wang.door = "green";

   //最後不管是張師傅還是王師傅來到你家，看到門都是綠色的
   console.log(Wang);//結果：輸出 {door: "green"}
   console.log(Zhang);//結果：輸出 {door: "green"}

這就是傳址賦值了。

再來看一個ES6的新特性，for…of。平時我們for迴圈的時候，是這樣寫的

Arr=[1,2,3,4,5,6]

for(vari=0;i<Arr.length;i++)

有了for…of,我們可以更清晰，牛逼得去遍歷陣列。

for(let itemof Arr)可以達到和上面程式碼同樣得效果。

 我們列舉一下for...of的優勢：

寫法比for迴圈簡潔很多；

可以用break來終止整個迴圈，或者continute來跳出當前迴圈，繼續後面的迴圈；

結合keys( )獲取到迴圈的索引，並且是數字型別，而不是字串型別。

比如

var arr= [1,2,3,4,5];
   for(let valueof arr){
        if(value ==3){
            //終止整個迴圈
           break;
        }
        console.log(value);
    }

這樣我們就及時得跳出了迴圈

只會打印出來1和2.

也可以跳過當前迴圈，把break改成continue就可以了。我們也可以得到數字型別得索引，

 vararr = [1,2,3,4,5];
   for(let indexof arr.keys()){
        console.log(index);
    }

就可以打印出來0，1，2，3，4.

ES6有很多好玩的新屬性，我們暫時說這麼多。

常見問題：

1．       ES6的相容問題?

現在瀏覽器對Es6的相容已經很好了，但是肯定還有不相容的瀏覽器，目前常見的相容轉換工具是Babel。

2. 什麼是程式碼塊？

任何一對花括號（這玩意：{ }）中的語句都屬於一個塊，在花括號裡面用let定義的所有變數在花括號外都是不可見的，我們稱之為塊級作用域。

3.什麼是變數提升？

在載入程式之前，瀏覽器會做一些準備工作，變數、函式表示式——變數宣告，預設賦值為undefined；

this——賦值；

函式宣告——賦值；

這三種資料的準備情況我們稱之為“執行上下文”或者“執行上下文環境”。這就是變數提升