ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標准。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。也就是說，ES6就是ES2015。雖然目前並不是所有瀏覽器都能兼容ES6全部特性，但越來越多的程序員在實際項目當中已經開始使用ES6了。今天就來總結一下在工作中es6常用的屬性方法
1.let
ES6新增了let命令，用來生命變量。它的用法類似於var,但是所聲明的變量，只在let命令所在的代碼塊內有效。
for (let i = 0; i < 10; i++) {
}
console.log(i) //ReferenceError: i is not defined
for(var i=0;i<10;i++){
}
console.log(i) //10
上面代碼中，計數器i只在for循環體內有效，在循環體外引用就會報錯。let具有塊級作用域的。var不存在塊級作用域問題，具有全局變量提示的問題存在，
2.const
const聲明一個只讀的常量，一旦聲明，常量的值就不能改變。
const a = 10；
a = 20；
console.log(a) //TypeError: Assignment to constant variable.
上面代碼表明改變常量的值會報錯。
const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。
const a;
console.log(a)
上面代碼表示，對於const來說，只聲明不賦值，就會報錯。
let與const
1.都不能重復聲明
2.都存在塊級作用域問題
3.只在聲明所在的塊級作用域內有效。
3.模板字符串
模板字符串就是一種字符串的新的表現形式
（1）基本用法
let s1 = ` hello `
let s2 = ' hello '
（2）字符串和變量拼接
let s3 =" a " + s1 + " b " + s2;
let s4 = ` a ${s1} b ${s2}`;
(3)字符串換行
var box =`<div> <p> <span>123</span> </p> <p>${a1}</p> </div>`;
模板字符串的出現，極大的改變傳統字符串的拼接方法，減少代碼出現錯誤的幾率。提高開發效率
4.解構賦值
ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構
4.1:對象結構賦值
var obj ={ name:"abc",age:18 };
//用解構賦值的方式獲取name、age
let { name } = obj; //創建了一個變量name，值=obj.name
console.log(name); //"abc"
let { age } =obj;
console.log(age); //18
4.1:函數參數結構賦值
function f1(obj){
console.log(obj.age);
console.log(obj.height)
}
//等價於
function f1({ age,height }){
console.log(age);
console.log(height)
}
f1({age:5,height:180})
5.rest參數
ES6 引入 rest 參數（形式為...變量名），用於獲取函數的多余參數，這樣就不需要使用arguments對象了。rest 參數搭配的變量是一個數組，該變量將多余的參數放入數組中。
function fn(){ //arguments是函數內部的一個局部變量， //arguments.length表示函數的實參的個數 console.log(arguments.length); for(var i =0 ; i<arguments.length; i++){ console.log(arguments[i]); } } fn(1,3,5) //3 // fn("a","b","c","d","e") //5
es6箭頭函數內部不能使用arguments，為了彌補這個問題，rest參數應孕而生
//...args就是rest參數
//-->產生了一個變量，這個變量是一個數組，數組里面包含了這個函數調用時傳遞的所有實參
function q(...args){
//驗證args是不是數組？
console.log(args instanceof Array);//true
console.log(Object.prototype.toString.call(args));//"[object Array]"
console.log(Array.isArray(args)); //true es5中的新方法
console.log(args);
}
q(1,3,5);
q(2,3,4,5,6,7,8);
6.箭頭函數
ES6 允許使用“箭頭”（=>）定義函數。
場景：用於
替換匿名函數
基本用法
//匿名函數
div.onclick=function(){
console.log("你好")
}
//箭頭函數
div.onclick=()=>{
console.log("你好")
}
有一個參數的箭頭函數
var fn=(a)=>{
console.log("abc");
}
//等價於：
var fn=a=>{
console.log("abc");
}
有2個及更多參數的箭頭函數
var f=(a,b,c)=>{
console.log("abc")
}
var p={
age:18,
//es6中對象方法的箭頭函數表示形式
run:()=>{
setTimeout(()=>{
//this:window
console.log(this);//this是window
},100)
},
travel:function(){
//this:p
setTimeout(()=>{
console.log(this);//this是p
},100)
},
//推薦使用的方式☆☆☆：es6中對象方法的簡寫形式
say(){
console.log("say方法中的this：",this);
setTimeout(()=>{
console.log("say內部的延遲函數：",this);//this是p
},100)
},
}
p.run();
p.travel();
p.say();
箭頭函數和普通匿名函數有哪些不同？
1.函數體內的this對象，就是定義所在的對象，而不是使用所在的對象
2.不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤
3.不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。
4.不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。
5.generator函數現在經常用async替代
7.對象的擴展
擴展運算符（spread）是三個點（...）。用於取出參數對象的所有可遍歷屬性，拷貝到當前對象中
7.1Object.assign：實現拷貝繼承
//Object.assign 就是進行對象的淺拷貝
var source={ age:18,height:170,className:"3年2班" }
//克隆一個新對象出來
var newObj=Object.assign({},source);
console.log(newObj);
var newObj2={};
Object.assign(newObj2,source);
console.log(newObj2);
上面可以實現淺拷貝，但是代碼有點多，es6這個對象擴展，牛掰的一個方法，解決淺拷貝的問題，
var car={ brand:"BMW",price:"368000",length:"3米" }
//克隆一個跟car完全一樣的對象出來：
var car2={ ...car }
console.log(car2);
//新車子，跟car的長度不同，其他相同
var car3={ ...car,length:"4米" }
console.log(car3);
var car4={ ...car,type:"SUV"}
console.log(car4);
var car5={...car4,price:"69800",brand:"BYD"};
console.log(car5);
對象擴展，簡單方便，代碼更加簡介，更少的代碼實現更強大的功能。
8.Promise
Promise是異步編程一種解決方案(回調地獄)
在沒有promise都是這樣寫的回調，一層一層的寫，
$.get("/getUser",function(res){
$.get("/getUserDetail",function(){
$.get("/getCart",function(){
$.get("/getBooks",function(){
//...
})
})
})
})
promise的基本用法
var promise=new Promise((resolve,reject)=>{
//b 把需要執行的異步操作放在這里
$.get("/getUser",res=>{
//獲取數據的異步操作已經執行完畢了，等待下一步的執行，通過執行resolve函數，告訴外界你可以執行下一步操作了
//c、
resolve(res)
//而執行的下一步操作，其實就是寫在then的回調函數中的
})
})
//a、
promise.then(res=>{
//d、執行后續的操作
console.log(res);
})
promise實現多層回調
new Promise((resolve,reject)=>{
$.get("/getUser",res=>{
resolve(res)
})
}).then(res=>{
//用戶基本信息
return new Promise(resolve=>{
$.get("/getUserDetail",res=>{
resolve(res)
})
})
}).then(res=>{
//用戶詳情
return new Promise(resolve=>{
$.get("/getCart",res=>{
resolve(res)
})
})
}).then(res=>{
//購物車信息
})
promise實現錯誤處理
new Promise((resolve,reject)=>{
$.ajax({
url:"/getUser",
type:"GET",
success:res=>{
resolve(res);
},
error:res=>{
reject(res)
}
})
}).then(resSuccess=>{
//成功的返回值
},resError=>{
//失敗的返回值
})