ES6新特性總結 一

1.聲明變量的關鍵字：const 和 let

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種聲明變量的方法。

2.頂層對象的屬性

頂層對象，瀏覽器中指的是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

3.模板字符串

傳統的JavaScript語言，輸出模板一般是用字符串拼接起來的，這種寫法至關繁瑣不方便，因而ES6引入了模板字符串來解決這個問題。

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

舉例以下：

//普通字符串
`In JavaScript '\n' 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;

4.箭頭函數

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;
}

5.使用export和import實現模塊化

因爲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文件。