书接上回我们说了展开，展开有什么用呢？
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
在页面中引入模块，type是一定要声明的，目前在谷歌浏览器中测试的时候，如果不声明会报错。
es6的这些新特性是不是很神奇，好了，今天我们先说到这里，工作中大家可以使用，具体的原理，我们后面讲。
微信搜索“魏三公子”，欢迎关注