ES6也出來好久了,最近閒來無事就想著吧es6做一個系統的總結,鞏固自己的知識,豐富一下部落格.

為什麼叫ES6

　　實際上是ECMA的一個打的標準,這個標準是在2015年6月釋出的,正式的名字實際是es2015,ecma這個組織規定每年6月份對這個版本進行更新,所以有es2016,es2017,es2018,有的人也稱其為es7 es8,當然es6較之前的es5確實做了非常大的更新,對我們開發這也是非常友好

變數的宣告

　　廢話不多扯,進入正題,

//之前的變數宣告是js的var宣告列如
var a=1

　　在es6中推出來let和const這兩個宣告變數的關鍵字

　　let          相當於之前的var 

　　const     常量定義好了不能改變 

　　在之前只有全域性作用域和函式作用域,但是在es6有了塊級作用域,(只要遇見{}都可以當做塊)

　　因此,let和const的作用域只是當前的塊

　　舉個列子:

　　之前沒有塊級作用域的時候

var a=1
function f(){
  if(false){
      var a=2  
}  
console.log(a)    
}
f()

　　不管最後的if執行不執行最後都會輸出undefined因為存在預解析,函式內的a提升到函式頂部,因此輸出的事undefined

但是當用let定義就不會出現這個問題

var a=1
function f(){
  if(false){
      let a=2  
}  
console.log(a)    
}
f()

最後輸出的一定是1,

從上邊可以看出let沒有預解析,不存在變數提升,並且作用域僅僅是當前的塊,

再舉一個典型的例子

for(var i=0;i<8;i++){
    setTimeout(function(){
       console.log(i)
},1000)
}

一秒後輸出8個8,要解決就得用閉包

但是用let定義之後

for(let i=0;i<8;i++){
    setTimeout(
 
function(){
       console.log(i)
},1000)
}

用了let之後1秒後輸出1,2,3,4,5,6,7,8

還有一個列子

   var arr =[];

       for(var i=0; i<10; i++){
           arr[i]=function(){
               console.log(i);
           }
       }

       arr[5]();//輸出的是10
//用let定義之後

for(let i=0; i<10; i++){
    arr[i]=function(){
        console.log(i);
    }
}

arr[5]();//輸出的是5

　還有一個最典型的列子

有三個按鈕點選每個按鈕彈出按鈕的index

    <input type="button" value="aaa">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
//js

let aInput = document.querySelectorAll('input');
//用var定義
for(var=0; i<aInput.length; i++){
    aInput[i].onclick=function(){
        alert(i);
    }
}
不管點選哪一個輸出的永遠是3,相信在實際工作中的都知道這是什麼回事,之前解決就是用閉包
但是用es6之後用一個小小的let就解決了

for(let i=0; i<aInput.length; i++){
    aInput[i].onclick=function(){
        alert(i);
    }
}

const和let的性質一樣 只是const一旦定義不可再更改

比如

const a=1

a=2//Assignment to constant variable.  直接報錯

let 和const還有一個特點就是在一個塊級作用域內定義的變數不能重列如

let a=1

let a=2   //Identifier 'a' has already been declared