ES6和ES5的差別

1. ES5和ES6的差別？

ECMAScript 5 (ES5)：ECMAScript 的第五版，于2009年标準化，該标準已在所有現代浏覽器中完全支援。

ECMAscript 6 (ES6)：ECMAscript 第 6 版，2015 年标準化。這個标準已經在大多數現代浏覽器中部分實作。

兩者之間的差別：

箭頭函數和字元串插值

const foo = (name)=>{
	return `hello ${name}`;
}
           

等價于=>

const foo = name => `hello ${name}`;
           

const：const表示無法修改變量的原始值。const表示對值的常量引用。可以改變被引用對象的屬性值，但不能改變引用本身。

const arr = [];
arr.push = ("name");
console.log(arr.length === 1);		//true
arr = ["age","address"];		//false
           

塊作用域: ES6中，let和const會建立塊作用域，不會var聲明變量一樣被提升。

預設參數：預設參數是可以使用預設值初始化函數。當參數省略或undefined時使用預設參數值。

function foo(a,b = 2) {
	return a*b;
}
foo(5);		//10
           

類定義與繼承

ES6 引入了對類(class關鍵字)、構造函數(constructor關鍵字)和 extend 關鍵字(用于繼承)的語言支援。

for-of 運算符

for…of 語句建立一個周遊可疊代對象的循環。

Spread 操作符用于對象融合

const obj1 = {};
const obj2 = {a:2, c:3, d:4};
const obj3 = {...obj,...obj2}
           

Promises

Promises提供了一種處理異步操作的結果和錯誤的機制。你可以用回調來完成同樣的事情，但是promises通過方法連結和簡潔的錯誤處理提供了更高的可讀性。

const isGreater = (a,b) => {
	return new Promise((resvolve,reject)=>{
		if(a>b) {
			resolve(true)
		} else {
			reject(false)
		}
	})
}
isGreater(1,2){
	.then(result => {
		console.log('greater')
	})
	.catch(result => {
		console.log('smaller')
	})
}
           

子產品導出和導入

子產品導出:

const myModule = {x:1,y:() => {console.log('this is helloworld')}}
export default myModule;
           

導出：

import myModule from './myModule'