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

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

const關鍵字

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

需注意：若這個變量是數組或者對象的話，它里面持有的內容是可以被更新的。

因為使用const聲明一個復合類型的數據(主要是對象和數組)，變量名不指向數據，而是指向數據的地址。

舉例如下：

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

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

let關鍵字

被let關鍵字聲明的變量可以被改變。

舉例如下：

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

需注意：

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

不存在變量的提升：使用let聲明的變量要在聲明后使用，否則會報錯。

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

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

typeof不再是一個百分百安全的操作

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

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

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

ES5中，頂層對象的屬性和全局變量是等價的。舉例：

window.a = 1;
a  //1

a = 2;
window.a   //2

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

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

var a = 1;
window.a  //1

let b=2;
window.b  //undefined

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

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

模板字符串(template string)是增強版的字符串，用反引號(`)標識。可以當做普通的字符串使用。也可以用來定義多行字符串，或者在字符串中嵌入變量。

舉例如下：

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

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

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

let greeting = `Yo` world

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

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

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

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

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

若箭頭函數需要多個參數，則參數要用圓括號括起來。

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

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

由于大括號被解釋為代碼塊，所以，如果箭頭函數直接返回一個對象，必須在對象外面加上括號，否則會報錯。

//報錯
let getTempItem = id => {id:id,name:"temp"};

//不報錯
let getTempItem = id => ({id:id,name:"temp"});

箭頭函數與變量結構可以結合使用

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

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

由于JavaScript是沒有模塊這一系統的，前輩們為了解決這一問題，提出來很多規范，其中最長用的就是 CommonJs 和 AMD 兩種。前者用于服務器，后者用于瀏覽器。

簡單看一下CommonJs的模塊化方法

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

示例代碼：

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

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

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

好了，言歸正傳~ ES6提供了簡單的模塊系統，可以取代 CommonJs 和 AMD 規范。那就是export 和 import 。

ES6中新增了兩個命令export和import，export命令用于暴露出模塊對外的接口，而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

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

然而，babel 只能轉新的JavaScript句法（syntax）而不能轉新的API，而且像import和export兩個命令在現在任何瀏覽器都是不支持的，同時babel也無法轉換其為瀏覽器支持的ES5，因為：

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

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