摘要：定義父類白色白色定義子類繼承紅色之前的繼承做法是通過原型鏈先指向父類的原型，然后把子類的構造函數(shù)指向定義的構造函數(shù)。這樣原型鏈上就有了父類的方法，構造函數(shù)里面也會有父類的構造函數(shù)。

書接上回，昨天我們說了展開，展開有什么用呢？

var arr1 = ["a", "b"];
var arr2 = ["c"];
var arr3 = ["d", "e"];
// ES5 的合并數(shù)組
arr1.concat(arr2, arr3);
// [ "a", "b", "c", "d", "e" ]
// ES6 的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ "a", "b", "c", "d", "e" ]

可以看到展開后可以做合并和賦值。

map和forEach都可以遍歷數(shù)組，既然都可以遍歷數(shù)組，為什么要定義兩個方法呢？

其他這兩個方法是有不同的地方的：

內部代碼在return的時候,forEach不會生成新數(shù)組。map會生成一個新數(shù)組。

foreEach要想改變數(shù)組需要在callback函數(shù)中去改。

//map改變數(shù)組
let arr=[1,3,5];
let curArr=arr.map(function(item,index){
    return item*2;
});
console.log(curArr);//[2,6,10]

//forEach改變數(shù)組
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是過濾器的意思，可以根據(jù)條件用來篩選數(shù)組中的元素。就好比流水線上的檢查員，篩選出合格的產品。

let arr=[1,2,6];
let curArr=arr.filter(function(item,index){
    return item%2;
})
console.log(curArr);

reduce是減少的意思，它可以執(zhí)行數(shù)組的累積運算然后返回一個數(shù)。就好比搭積木，多個積木最后搭成一個東西。

let arr=[1,2,6];
let sum=arr.reduce(function(prev,cur,index,arr){
//prev是前一步的操作和
//cur是當前值
//index是當前的索引
//arr是當前的數(shù)組
    return prev+cur;
})
console.log(sum);

我們先看下之前的對象聲明和繼承是怎么做的。

//定義父類
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();

之前的繼承做法是通過原型鏈先指向父類的原型，然后把子類的構造函數(shù)指向定義的構造函數(shù)。

這樣原型鏈上就有了父類的方法，構造函數(shù)里面也會有父類的構造函數(shù)。

這樣定義有個問題就是類和構造函數(shù)是一起的，單把構造函數(shù)拿出來，也能做類也能做函數(shù)。

es6里面更嚴謹了，聲明類有了專門的class,繼承有了extends

//父類聲明
class Animal{
   //構造函數(shù)聲明
    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){
        //構造函數(shù)內繼承父類的構造函數(shù)
        super(name,color);//super在這里代表了父類的構造函數(shù)
        this.age=age;
    }
    showAge(){
        console.log(this.age);
    }
}
let obj2=new Cat("haha","紅色",6);
obj2.showAge();//6
obj2.showName();//haha
obj2.showColor();//紅色

我們常見的異步回調會操作地獄回調，讓你傻傻分不清，經(jīng)常問自己，我代碼在哪里呢？我邏輯走到哪里去了？

$.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就可以實現(xiàn)同步寫法實現(xiàn)異步回調的作用。

 (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();

當然現(xiàn)在有很多提到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);
   })

es6用export來暴露模塊的屬性和方法，用import來引入模塊。

a.js

let a=2;
let b=3;
export {a,b}

index.html

在頁面中引入模塊，type是一定要聲明的，目前在谷歌瀏覽器中測試的時候，如果不聲明會報錯。

es6的這些新特性是不是很神奇，好了，今天我們先說到這里，工作中大家可以使用，具體的原理，我們后面講。