ES6入門
ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。但是現在越來越多的人開始使用ES6。
1. ES6申明語法
let 表示聲明一個變量，和var類似
const 表示申明一個常量，常量不可被修改，相當java裏的 static final 。
let a = 3; const b = 3; a = 2; console.log(a); // 2 b = 2; console.log(b); // 報錯：Uncaught TypeError: Assignment to constant variable.
變量的解構賦值
解構賦值的原則是:只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值,所以聲明時，只要左右兩邊結構相同就可以賦值。
let [a,b] = [1,2];
console.log(a,b); // 1,2
let [[a],[[b],c]] = [[1],[[2],3]];
console.log(a,b,c); // 1,2,3
ES6的塊級作用域
用let所聲明的變量，只在let命令所在的代碼塊內有效。
{
let a = 0;
var b = 0;
}
console.log(b);
還有要註意的是:使用let聲明的變量，在域解析的時候不會被提升。console.log(a); var a = 10; // 10 console.log(b); let b = 10; //Uncaught ReferenceError: b is not defined(…)
2. arrowfunction 箭頭函數
語法：()=>{} , {}裏面表示的是返回值
特性：
a、函數內置 this 的值，取決於箭頭函數在哪兒定義，而非箭頭函數執行的上下文環境。
b、沒有arguments對象
let a = ()=>{};
console.log(a); // undefined
let a = ()=>{
return 5;
};
console.log(a()); // 5
函數內置 this 的值，取決於箭頭函數在哪兒定義，而非箭頭函數執行的上下文環境這句話怎麽理解？
示例1
let a = {
name :‘make‘
}
a.b = function(){
let a = ()=>{ // 這裏用箭頭函數
console.log(this); // Object {name: "make"}
return this;
}
return a();
}
a.b();
示例2
let a = {
name :‘make‘
}
a.b = function(){
let a = function(){ // 這裏用function
console.log(this); // window對象
return this;
}
return a();
}
a.b();
3. 類 class
其他語言不清楚，但如果你對java有那麽一點研究，你會發現，類的申明，extends,super 方法和java幾乎沒什麽區別。
constructor 構造方法
extends 繼承super關鍵字，它指代父類的實例（即父類的this對象）；
class Animal{ // 申明一個動物類
constructor(name){ // 動物類的構造方法
this.name = name; // 給動物類取個名字
}
say(){ // 動物都會說話
console.log(this.name + "說話了");
}
}
let tiger = new Animal("tiger"); // 實例化一個動物類，傳入一個名稱
tiger.say(); // tiger說話了
class Cat extends Animal{ // 有個Cat類繼承了動物類，就擁有動物類所有的方法
constructor(name){
super();
this.name = name;
}
}
let cat = new Cat("cat");
cat.say();
4. Set 和Map
set介紹
Set 是 ES6 新增的有序列表集合，它不會包含重復項。之前我們通常用對象（Object）或者數組（Array）來實現沒有重復項的集合。
let c = new Set([1,2,3]);
console.log(c); // 1,2,3
c.add("b"); // 1,2,3,b
c.delete("b"); // 1,2,3
c.has("b"); // flase
c.size; // 3
console.log(c.keys()); // 1,2,3,
console.log(c.values()); // 1,2,3
c.forEach(function(key,value,set){
console.log(value + "," + key); // {1,1}{2,2}{3,3}
});
add(value) 添加某個值。
delete(value) 添加刪除value這個值。
size() 返回集合的個數
has(value) 判斷是否還有某個值，返回值是 true或false
set.keys() 返回所有的key值
set.values() 返回所有的value值
forEach(key,value,set) // 第一參數為 key ,第二個為 value，第三個為 循環什麽類型，這裏循環的是 set 集合
這裏介紹一個數組去重的方法
原理是set集合會過濾掉重復的值。
new Set(Array);
let a = [1,2,3,1];
let b = new Set(a);
console.log(b); // 1,2,3
Map介紹
首先map對象是一個簡單的鍵/值映射。任何值（包括對象和原始值）都可以用作一個鍵或一個值。
let map = new Map([ [‘a‘,1],[‘b‘,2] ]);
console.log(map); // Map {"a" => 1, "b" => 2}
map.set(‘chen‘,22).set(‘zhou‘,22);
console.log(map); //Map {"a" => 1, "b" => 2, "chen" => 22, "zhou" => 22}
console.log(map.get(‘chen‘)); // 22
map.delete(‘zhou‘);
console.log(map.has(‘chen‘)); //true
console.log(map.size); // 3
console.log(map.values()); //MapIterator {1, 2, 22}
console.log(map.keys()); // MapIterator {"a", "b", "chen"}
map.forEach(function(value,key,map){
console.log(value + "," + key); //1,a; 2,b;22,chen
});
set(key,value) 添加一個鍵值對。
get(key) 拿到key值對應的value
delete(key) 刪除某個值
has(key) 判斷是否有某個值
size 返回map的長度
values() 返回所有的value
keys() 返回所有的key
forEach(key,value,map) // 第一參數為 key ,第二個為 value，第三個為 循環什麽類型，這裏循環的是 map 集合
5.template string
主要是用來連接字符串。
平時的寫法 $(".box").append("<img src=" + urlSrc + ">"); ES6的寫法 $(".box").append("<img src=${urlSrc}>");
不需要去拼接，${}裏面存放一個變量。
ES6入門