摘要：一旦聲明，常量的值不能被改變。頂層對(duì)象的屬性頂層對(duì)象，瀏覽器中指的是對(duì)象，在中指的是對(duì)象。中新增了兩個(gè)命令和，命令用于暴露出模塊對(duì)外的接口，而則用于輸入某一模塊。

JavaScript ES6中引入了另外兩個(gè)聲明變量的關(guān)鍵字：const和let。在ES6中，我們將很少能看到var了。

const關(guān)鍵字

const聲明一個(gè)只讀的常量。一旦聲明，常量的值不能被改變。
const聲明一個(gè)變量，就必須立即初始化，不能留到以后再賦值。

需注意：若這個(gè)變量是數(shù)組或者對(duì)象的話，它里面持有的內(nèi)容是可以被更新的。

因?yàn)槭褂胏onst聲明一個(gè)復(fù)合類型的數(shù)據(jù)(主要是對(duì)象和數(shù)組)，變量名不指向數(shù)據(jù)，而是指向數(shù)據(jù)的地址。

舉例如下：

//這種寫法是不可行的
const str = "hello world";
str = "hello kitty";     //TypeError: Assignment to constant variable

//這種寫法是可行的
const arr = [1,2,3];
arr[0]=9;

let關(guān)鍵字

被let關(guān)鍵字聲明的變量可以被改變。

舉例如下：

//這種寫法是可行的
let str = "hello world";
str = "hello kitty";

需注意：

let聲明的變量只有所在的代碼塊有效。

不存在變量的提升：使用let聲明的變量要在聲明后使用，否則會(huì)報(bào)錯(cuò)。

     //使用var定義的變量，存在變量的提升。
     console.log(a);   //undefined
     var a = 10; 
     
     //使用let定義的變量，不存在變量的提升，所以下面的代碼會(huì)報(bào)錯(cuò)
     console.log(b);  // ReferenceError: b is not defined
     let b = 20;

暫時(shí)性死區(qū)：使用let命令聲明變量之前，該變量都是不可用的。

typeof不再是一個(gè)百分百安全的操作

     typeof c;   // ReferenceError: c is not defined
     let c;

ES6聲明變量的六種方法
ES5只有兩種聲明變量的方法：var和function
ES6除了添加let和const，還有另外兩種聲明變量的方法：import命令和class命令。所以，ES6一共有6種聲明變量的方法。

頂層對(duì)象，瀏覽器中指的是window對(duì)象，在Node中指的是global對(duì)象。

ES5中，頂層對(duì)象的屬性和全局變量是等價(jià)的。舉例：

window.a = 1;
a  //1

a = 2;
window.a   //2

ES6為了改變這一點(diǎn)，一方面規(guī)定，為了保持兼容性，var和function命令聲明的全局變量，依舊是頂層對(duì)象的屬性；
另一方面規(guī)定，let命令,const命令,class命令聲明的全局變量，不屬于頂層對(duì)象的屬性。

也即是說，從ES6開始，全局變量將逐步與頂層對(duì)象的屬性脫鉤。
舉例如下：

var a = 1;
window.a  //1

let b=2;
window.b  //undefined

上述代碼中，全局變量a由var命令聲明，所以是頂層對(duì)象的屬性；全局變量b由let命令聲明，所以它不是頂層對(duì)象的屬性，返回undefined

傳統(tǒng)的JavaScript語(yǔ)言，輸出模板通常是用字符串拼接起來的，這種寫法相當(dāng)繁瑣不方便，于是ES6引入了模板字符串來解決這個(gè)問題。

模板字符串(template string)是增強(qiáng)版的字符串，用反引號(hào)(`)標(biāo)識(shí)?？梢援?dāng)做普通的字符串使用。也可以用來定義多行字符串，或者在字符串中嵌入變量。

舉例如下：

//普通字符串
`In JavaScript "
" is a line feed`

//多行字符串
`In JavaScript this is
 not legal`
 
 //字符串中嵌入變量
 let name = "Bob",time = "today";
 `Hello ${name},how are you ${time}`

上述代碼中的模板字符串，都是用反引號(hào)表示的。
需注意：如果再模板字符串中需要引入反引號(hào)，則前面要用反斜杠轉(zhuǎn)義。
舉例如下：

let greeting = `Yo` world

模板字符串中嵌入變量，需要將變量名寫在  ${ }  之中。
模板字符串中還能調(diào)用函數(shù)

function fn(){
    return "Hello World";
}
`foo ${fn()} bar`
//foo Hello World bar;

ES6中允許使用“箭頭”（=>）定義函數(shù)。
舉例如下：

var f = v => v;
//上面的箭頭函數(shù)等同于

var f = function(v){
    return v;
}

若箭頭函數(shù)需要多個(gè)參數(shù)，則參數(shù)要用圓括號(hào)括起來。

var f = () => 5;
//等同于
var f = function(){return 5;}

var sum = (num1,num2) => num1+num2;
//等同于
var sum = function(num1,num2){
    return num1 + num2;
}

由于大括號(hào)被解釋為代碼塊，所以，如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào)，否則會(huì)報(bào)錯(cuò)。

//報(bào)錯(cuò)
let getTempItem = id => {id:id,name:"temp"};

//不報(bào)錯(cuò)
let getTempItem = id => ({id:id,name:"temp"});

箭頭函數(shù)與變量結(jié)構(gòu)可以結(jié)合使用

const full = ({first,last}) => first + "" + last;

//等同于
function full(person){
    return person.first + "" + person.last;
}

由于JavaScript是沒有模塊這一系統(tǒng)的，前輩們?yōu)榱私鉀Q這一問題，提出來很多規(guī)范，其中最長(zhǎng)用的就是 CommonJs 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。

簡(jiǎn)單看一下CommonJs的模塊化方法

在CommonJs中，暴露模塊使用module.exports，加載模塊有一個(gè)全局的方法：require()，用于加載模塊。

示例代碼：

//app.js
let person = {
    age:"20",
    name:"Jolin"
};
module.exports = person;  //所暴露出的對(duì)象

//index.js
let person = require("./app");   //加載app模塊
console.log("姓名"+person.name);  //姓名Jolin

注意：CommonJs 的模塊化方法是運(yùn)行于服務(wù)器端的，直接在瀏覽器端運(yùn)行是不識(shí)別的，所以進(jìn)入安裝 nodejs 的目錄，打開 cmd 命令窗口，鍵入命令node index.js來運(yùn)行吧~

好了，言歸正傳~ ES6提供了簡(jiǎn)單的模塊系統(tǒng)，可以取代 CommonJs 和 AMD 規(guī)范。那就是export 和 import 。

ES6中新增了兩個(gè)命令export和import，export命令用于暴露出模塊對(duì)外的接口，而import則用于輸入某一模塊。

示例代碼：

//export.js
exports var firstName = "Micheal";
exports var lastName = "JackJson";
exports var year = 1958;


//import.js
import {firstName,lastName} from "./export.js"
console.log(firstName+" "+lastName);   //Micheal JackJson

由于瀏覽器目前對(duì)ES2015（ES6）的語(yǔ)法支持不是很強(qiáng)，所以，即便是Firefox和Chrome瀏覽器，若版本較低，可能還是只支持一部分語(yǔ)法，那么如何才能讓ES6語(yǔ)法能夠正常的在各個(gè)瀏覽器運(yùn)行呢？則就需要將編寫的JS文件通過一些編譯工具編譯成ES5的語(yǔ)法，那么babel工具就可以實(shí)現(xiàn)這個(gè)轉(zhuǎn)義。

然而，babel 只能轉(zhuǎn)新的JavaScript句法（syntax）而不能轉(zhuǎn)新的API，而且像import和export兩個(gè)命令在現(xiàn)在任何瀏覽器都是不支持的，同時(shí)babel也無(wú)法轉(zhuǎn)換其為瀏覽器支持的ES5，因?yàn)椋?/p>

babel只是個(gè)翻譯，假設(shè)a.js 里 import 了 b.js, 對(duì)a.js進(jìn)行轉(zhuǎn)碼，只是翻譯了a.js，并不會(huì)把b.js的內(nèi)容給讀取合并進(jìn)來, 如果想在最終的某一個(gè)js里，包含 a.js，b.js 的代碼，那就需要用到打包工具。

所以，我們可以使用webpack工具將帶有import和export語(yǔ)法的JS文件，通過打包工具生成所有瀏覽器都支持的單個(gè)JS文件。