書接上回，昨天我們說了展開，展開有什麼用呢？
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]可以看到展開後可以做合併和賦值。
6、數組有了新方法，遍篩累加很省勁兒。
map和forEach都可以遍歷數組，既然都可以遍歷數組，爲什麼要定義兩個方法呢？
其他這兩個方法是有不同的地方的：
內部代碼在return的時候,forEach不會生成新數組。map會生成一個新數組。
foreEach要想改變數組需要在callback函數中去改。
//map改變數組
let arr=[1,3,5];
let curArr=arr.map(function(item,index){
return item*2;
});
console.log(curArr);//[2,6,10]
//forEach改變數組
let arr=[1,3,5];
let curArr=arr.forEach(function(item,index){
return arr[index]=item*2;
})
console.log(arr);//[2,6,10]
console.log(curArr);//undefined;filter是過濾器的意思，可以根據條件用來篩選數組中的元素。就好比流水線上的檢查員，篩選出合格的產品。
let arr=[1,2,6];
let curArr=arr.filter(function(item,index){
return item%2;
})
console.log(curArr);reduce是減少的意思，它可以執行數組的累積運算然後返回一個數。就好比搭積木，多個積木最後搭成一個東西。
let arr=[1,2,6];
let sum=arr.reduce(function(prev,cur,index,arr){
//prev是前一步的操作和
//cur是當前值
//index是當前的索引
//arr是當前的數組
return prev+cur;
})
console.log(sum);7、對象繼承新形式，聲明繼承更簡單。
我們先看下之前的對象聲明和繼承是怎麼做的。
//定義父類
function Animal(name,color){
this.name=name;
this.color=color;
}
Animal.prototype.showName=function(){
console.log(this.name);
}
Animal.prototype.showColor=function(){
console.log(this.color);
}
let obj1=new Animal('mimi','白色');
obj1.showName();//mimi
obj1.showColor();//白色
//定義子類
function Cat(name,color,age){
Animal.apply(this,arguments);
this.age=age;
}
//繼承
Cat.prototype=new Animal();
Cat.prototype.constructor=Cat;
Cat.prototype.showAge=function(){
console.log(this.age);
}
let obj2=new Cat('hh','紅色',3);
obj2.showName();
obj2.showColor();
obj2.showAge();之前的繼承做法是通過原型鏈先指向父類的原型，然後把子類的構造函數指向定義的構造函數。
這樣原型鏈上就有了父類的方法，構造函數裏面也會有父類的構造函數。
這樣定義有個問題就是類和構造函數是一起的，單把構造函數拿出來，也能做類也能做函數。
es6裏面更嚴謹了，聲明類有了專門的class,繼承有了extends
//父類聲明
class Animal{
//構造函數聲明
constructor(name,color){
this.name=name;
this.color=color;
}
//對象的方法聲明
showName(){
console.log(this.name);
};
showColor(){
console.log(this.color);
}
}
let obj1=new Animal('mimi','白色');
obj1.showName();//mimi
obj1.showColor();//白色
//子類使用extends繼承
class Cat extends Animal{
constructor(name,color,age){
//構造函數內繼承父類的構造函數
super(name,color);//super在這裏代表了父類的構造函數
this.age=age;
}
showAge(){
console.log(this.age);
}
}
let obj2=new Cat('haha','紅色',6);
obj2.showAge();//6
obj2.showName();//haha
obj2.showColor();//紅色8、異步回調好麻煩，aysnc和await來幫忙
我們常見的異步回調會操作地獄回調，讓你傻傻分不清，經常問自己，我代碼在哪裏呢？我邏輯走到哪裏去了？
$.ajax({url:'/data.txt'},function(){//第一步
$.ajax({url:'/data2.txt'},function(){//第二步
$.ajax({url:'/data3.txt'},function(){//第三步
$.ajax({url:'/data4.txt'},function(){//第四步
$.ajax({url:'/data5.txt'},function(){//第五步
})
})
})
})
})如果我們用async和await就可以實現同步寫法實現異步回調的作用。
(async ()=>{
let res=await $.ajax({
url: '/data.txt'
});
//第一步
console.log(res);
let res2=await $.ajax({
url: '/data2.txt'
});
//第二步
console.log(res2);
let res3=await $.ajax({
url: '/data3.txt'
});
//第三步
console.log(res3);
let res4=await $.ajax({
url: '/data4.txt'
});
//第四步
console.log(res4);
let res5=await $.ajax({
url: '/data5.txt'
});
//第五步
console.log(res5);
})()
show();
當然現在有很多提到Promise，Promise鏈式調用，我們來看下如果用Promise要怎麼用
let p1=new Promise(function(resolve,reject){
$.ajax({
url: 'data.txt',
})
.done(function(data) {
resolve(data);
})
.fail(function(err) {
reject(err);
})
})
p1.then(function(data){
//成功
console.log(data);
return $.ajax({url: 'data2.txt'})//拋出Promise
},function(err){
//失敗
console.log(err);
})
//第二個Promise的處理
.then(function(data){
console.log(data);
},function(err){
console.log(err);
})9、模塊導入新方法，import和export要配合
es6用export來暴露模塊的屬性和方法，用import來引入模塊。
a.js
let a=2;
let b=3;
export {a,b}index.html
<script type="module">
import {a,b} from './a.js';
console.log(a);
console.log(b);
</script>在頁面中引入模塊，type是一定要聲明的，目前在谷歌瀏覽器中測試的時候，如果不聲明會報錯。
es6的這些新特性是不是很神奇，好了，今天我們先說到這裏，工作中大家可以使用，具體的原理，我們後面講。
