es6中有新意的特性（2）

书接上回我们说了展开，展开有什么用呢？

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的这些新特性是不是很神奇，好了，今天我们先说到这里，工作中大家可以使用，具体的原理，我们后面讲。

微信搜索“魏三公子”，欢迎关注
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,402评论 6赞 499
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,377评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,483评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,165评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,176评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,146评论 1赞 297
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,032评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,896评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,311评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,413评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,008评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2赞 353

推荐阅读更多精彩内容

  • 你不可不知的ES6
    本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯！ babel babel负责将JS高级语法转义，...
    Devildi已被占用阅读 1,983评论 0赞 4
  • es6
    [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,781评论 0赞 1
  • Promise分析与总结
    title: promise总结 总结在前 前言 下文类似 Promise#then、Promise#resolv...
    JyLie阅读 12,239评论 1赞 21
  • ES6语法特性精华
    以下内容是我在学习和研究ES6时，对ES6的特性、重点和注意事项的提取、精练和总结，可以做为ES6特性的字典；在本...
    科研者阅读 3,126评论 2赞 9
  • urlencode
    这个方法可以将字典对象转化为查询字符串 实例
    leomei91阅读 311评论 0赞 0