ES6語法糖集錦

sublime3安裝Es6插件
javascriptNext，然后安裝即可
Java​Script​Next - ES6 Syntax()高亮插件
-----------------------------------------------------------------
let、const命令 與var聲明
let塊級作用域
let不允許在代碼塊內重復聲明一個變量
function aa(){
 let a=3
  {
    let a=5 //子作用域
  }
}
使用var聲明的變量，其作用域為該語句所在的函數內，且存在變量提升現象；
使用let聲明的變量，其作用域為該語句所在的代碼塊內，不存在變量提升；
使用const聲明的是常量，在后面出現的代碼中不能再修改該常量的值。
-----------------------------------------------------------------
數組結構:
let [a,b,c,d] = ["aa","bb","23","44"]
對象解構
函數參數解構
-----------------------------------------------------------------
Symbol(值類型數據，唯一的)
let a = 3
let b = 3
alert(a=b) //true
-------------------
let a = Symbol(3)
let b = Symbol(3)
alert（a=b）//false
-----------------------------------------------------------------
Set
var set = new Set([1,2,3,4,5,2,8,4])//自動合並了重復值
for(var key in set){
  console.log(key)  //1,2,3,4,5,8
}
---------------------------------
let arr = [1,2,3,4,2,86,4]
arr.map(function(item){
  set add(elem) //添加元素
})
map---->Es5語法
-----------------------------------------------------------------
WeakSet(與Set類似唯一區別就是成員只能是對象)
var weakset = new WeakSet();
-----------------------------------------------------------------
Map遍歷 鍵可以是各種類型
let obj1 = {};
let obj2 = {};
let obj = new Object();
obj[obj1] = 33;
obj[obj2] = 66;
for(let key in obj){
  console.log(key) //只循環出一個object
}
---------------------------------------
var mapData = new Map();
var obj1 = {};
var obj2 = {};
mapData.set(obj1,"22")  //添加新元素
mapData.set(obj2,"22")  //添加新元素
console.log(mapData.get("obj1")) //獲取鍵
console.log(mapData.has("obj1")) //判斷是否含有鍵
console.log(mapData.delete("obj1")) //刪除鍵
mapData.clear() //清空

-----------------------------------------------------------------
WeakMap不可遍歷沒有size屬性
var wm = new WeakMap();
var obj = new Object();
console.log(wm.get(obj)) //undefined
console.log(wm.has(obj)) //false
-----------------------------------------------------------------
Itrator遍歷器
let arr = ["bob","pop","wow"];
let op = arr[Symbol.iterator]();
console.log(op.next());
console.log([...arr]) //依舊是數組
-----------------------------------------------------------------
Generator函數；
1.function的關鍵字和函數名稱之間有個*號
2.函數體內可以用yield語句
3.函數調用后不會立即執行，返回的是一個遍歷器對象；
function Es.(){
function *aa(){
yield"中國";
yield"美工";
yield"技術";
return "end";
}
let a = aa();
console.log(a.netx());
}
-----------------------------------------------------------------
Promise對象
三種狀態：Pending(等待)、resolve（成功）、reject（失敗）
異步操作解決方案，比原有的回調函數等方式更為合理
該對象改變狀態只有兩種可能Pending轉變為resolve，Pending轉變為reject；

function aa(){
function bb(){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(123456)
},1000)
})
}
}
-----------------------------------------------------------------
async函數：（ES7）
await Promise.reject("出錯了") //拋出例外，直接到例外處理處
var asyncFun = async function(){
var a1 = await function(){
setTimeout(function(){
console.log(111)
},3000)
}();
var a2 = await function(){
setTimeout(function(){
console.log(222)
},1000)
}();
console.log("執行完畢")
}
asyncFun();//先打印222再打印111；
---------------------------------
let asyncFun1 = async function(){
console.log("aaa")
return "第一個"
}
let asyncFun2 = async function(data){
console.log("bbb"+data)
return "第二個"
}
asyncFun1().then(asyncFun2).then(function(data){
console.log("這是最后執行"+data)
})

-----------------------------------------------------------------
箭頭函數：(省去function關鍵字內部沒有prototype和構造器constructor,不支持new操作，this指向會改變)

Es5寫法
function a(a=6){
return a*a
}

Es6寫法
let fn = (a=6)=>a*a;
console.log(fn(9));//81

Es5函數內部this不會改變，異步操作this也會改變如（async和setTimeout）
-----------------------------------------------------------------
class類(方法沒有重載也就是說不可以覆蓋)
class Person{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}

getName(){
console.log(this.name)
}
}
let person = new Person("bob",18,"男");
person.getName();