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=>{
//失敗的返回值
})