Web前端框架通用技术 ES6 5_数组中新增加的高级函数 学习猿地原创

大家好，我是学习园地的特约讲师高洛峰，上节课咱们学习了箭头函数，那箭头函数呢，可以让函数表达的更加简洁，但是呢，由于别的语言里边很少使用这种镜头函数这种格式，所以呢，咱们刚接触的时候呢，感觉会很别扭，不太舒服，但是一旦你用习惯，那你就觉得它很简洁。那建造函数的应用场景呢，主要有两个，一个呢是能够简化回调函数，也就是一个函数需要一个参数，这个参数是另外一个函数的时候，那么我们用建造函数，那就会比较简洁，也比较简化。那另外一点呢，就是关于这次的问题，因为这次呢，呃，默认的不用建造函数的时候，这次指向它调用表，而建造函数的这次呢，它本身是没有的，它是继承过来的，所以有的时候用这个继承过来Z解决我们的问题呢，会更方便，所以这是应用的两点，那咱们趁热打铁，这节课呢，咱们来学习一下。数组的新增的高级方法，高级方法那当然了，不光是这三个方法，还有像什么萨姆啊，埃啊，艾瑞艾瑞啊这样的方法也有很多啊，只不过这三个方法是比较常用的，那咱们讲完这个函数的学这几个方法呢，也可以在这几个方法，因为它都需要回调函数作为参数嘛，所以呢，咱们也用这几个，嗯，函数咱们再巩固一下，回到函数这样的，那在这几个看方学习这几个方法之前呢，我先给大家列一个需求。

然后咱们引出这几个方法怎么用啊，它可以单独使用，也可以结合在一起用，我们还是建一个嗯加件就叫吧数吧。比如说我现在有一个这样的需求，假如说在页面上有一个商品列表。有一个商品列表，我想干什么呢？因为商品的价格是不同的，比如说有呢是一些免费的商品，那有一些呢是一块钱的商品，对吧，价格很少的，有的呢是很贵的，那咱们第一件事就是。呃，将大于十元的。十元或者是十元以上的商品，咱们打折对吧，打折那那首先呢，第一步就是取出。

大于十元的。商品。这是第一步，第二步。第一步就是取出这个，那取出来之后怎么办？将十元以上的商品，比如说打八折，打五折对不对，打五折吧，打五折第三步。我想知道这些打完折的商品总价是多少？打完折的商品总价是多少？如果我们不学这几个高阶函数的话，我们也一样能做，对吧，也一样是可以完成我们的需求的，但是呢，就是代码一是可读性比较差，另外呢也比较繁琐，当我们用上这个高级函数呢，那解决这样的需求呢，就很方便，你比如说。我们现在呃，用传统的方法来解决一下，那我们声明一个数组，既然咱都学完light cost了，你可以用cost light上面都可以啊，我们声明一个商品数组吧，对吧？一个商品数组那里边价格有大于十元的，比如说有30的，有80的，有50的，对吧？然后呢，还有还有五块钱的，还有三块钱的，还有一块钱的对吧？然后还有60块钱的，还有九元的。

就假如说这么多对吧，当然你可以很多啊，当然我这就是放商品的价格，没有放别的，因为咱准备价格进行处理的，模拟一下这样的一个操作，那我们现在就要完成什么，第一步，将大于十元的商品拿出来。这一步就行，取出大于十元的商品，那怎么做呢？那我把大于十元的商品呢，我们生明一个数度，比如说呃，Y good，一吧，就是第一步，这里边的第一步对吧，等于这叫公作一，随便起个名，等于一个空数，你把拿出的数组放到这里边来，然后O循环，YI等于零，I小于what点乱对吧。它的长度，然后I加加，这样的话我们可以一个一个取出来，那在新的方法里边还有另外一个简便的方法，比如说我们取对象的时候，我们通常都是呃，Light of对吧，In，然后后边呢，一个什么对象之类的都可以，对不对？那针对数组呢，也有一个简化的一个操作，比如说词的变量，那么呃。

Off，然后what，它会呢，将按照这个数组长度来执行循环的个数，来执行这个循环的个数，然后呢，分别把数组中的每一个值，每一个元素赋给这个Y生命电量，咱们的自己生命的一个N，那我们叫N对吧，也是变数组方法比较简单啊，大家记住，以后有可能变数组都使用这个方法，大家知道小面后边写浪，写那个浪了，那个长度了，那这里边判断一下，如果N大于等于十，就大于十块的包括十块的对不对？那我们干嘛？我们将在这个GOOD1里边push一下，把它加到这里边，把N加到这里边来，然后呢，我们在外边打一下put1.locklog打一下，看一下结果。实现了我们第一步的一个这样的一个需求，F12看一下，你看数组里边有四个点，三十八十五十六十，长度是四，那我们把这个就会成了三十八十五十六十，你看有四个我们取出来了，对不对，那在第二步。

这是第一步，我们获取到这四个对吧，不对一的这块，那第二步我们再生为一个速度，因为把拿过来的商品打五折对吧，那我们就需要怎么办呢？L要来生成一个过二第二部嘛，等于一个空数度，然后我们同样去便利一下。同样去便利一下。但是我们这份便利呢，就。重写一下吧。在外边上light n of good1，我们便利的是这个商品，Good c这个商品也就是这一步我们获取到的结果对吧，然后把这个结果里边所有的商品都乘以呃，0.5打五折嘛，打五折之后放到这速度里边，所以这块。加上每次在这里边布实一下，再加谁呢？将这个里边的每个元素乘以0.5放进来，这是第二步。然后我们再。二。你看我们看一下是不是打五折了。

看第二步十五四十二十五是不是就上面的五折对吧，然后还要想知道它的总数是多少总数，那总数呢？那我们就是sum和默认定义一个零对吧，那总数部分了，那我们同样需要变定一下。N of，呃，是打完折之后商品的总和，那应该是变利公二对不对？第二步的，然后我们要sum，加等于谁啊，加等于啊，N。就每次都累加在这里边，然后我们最后点log，就是这个的总数，来我们看一下结果。110，你这几个加起来看看是不是一百一啊，15加40加这个48正好一百一对吧。结果你不用怀疑，这是我们传统不用方函数的一个方程去做的，那我们这些步骤我们能不能把它简化呢？可以。那首先比如说完成第一步，我们获取什么，取出大于十元的商品，我们怎么做呢？你看啊。

我把这个。拿过来整体复制一下，这样看起来是比较比较方便一些。你看我们现在呢，就可以用一个过滤的一个高级函数，也就是通过数组里边有个Fi。LTR过滤。那过滤呢，这里边需要一个你看这里的参数回调方法对吧，回调方法其他参数咱们不写了，然后呢，这个回调方法值呢，需要一个负尔型的一个值，那我们翻是先用传统的经理写在不用技能函数啊这里边，然后呢，这里边需要传一个N什么意思。这里边的是一个轨调函数数组相当于咱们这就不用循环遍历了，数组里边有几个元素，数组里边有几个元素，那么我就相当于调用几次这个轨函数。每次调用的时候呢，第一次调用的时候，将数组的第一个元素赋给这个参数。第二次调的时候，将数组里面第二元素这个参数。

然后为什么叫过滤呢？如果这个方法里边返回的是一个过尔行值，如果返回处就留下，返回下就不要，比如说我这里边返回甲，那我相当于我们有根据条件判断全返回甲，那怎么着，这里边分别执行对不对，然后把过滤后的内容。给谁啊，不然我们这块再打一下你看。Good一点。来我们看一下结果，你看一下它应该是一个空的数度，因为我们全过滤掉了对不对，那我们如果全保留这块就就可以了，你看这个数度跟原来的数度是一模一样的，那我们这里边可以根据条件判断，如果大于十的对不对，返回处小于十的返回倍是不是就行了，因为它不准行，那我们就不能简便的方法写吗？什么叫简便方法写呢？你比如说N。大于等于十。这个用逻辑运算出，算完之后不就不尔性质方大于等于十的，那肯定这个算完之后它就是真的，那我们就返回，如果小于等于十的就是假，反回假，所以呢，这一个方法就可以了，你看。

还是把这个数过滤出来，对吧，这就是我们的什么过滤的一个方法，非常简单。对吧，和我们上面自己写循环是一样的，那你就不需要循环了，那第二步。第二步，看一下我们用什么let boots2我们用map。这个数组里边用一，这里边已经上面已经把大于十元的取出来，对对麦映射。里边action。也是用法是一模一样的。拿过来，那它的作用是一样的，这个数组里边有几个元素，回调几次，回调几次，那回调的时候会干嘛呢？也是相当于麦克映射嘛，将数组里边的每一个元素赋给这个参数N。会给参数，然后我们在这里边返回，因为它是映射，你返回什么值，就把什么值将追加到这个里边，你比如说我这里边。

既然返回100，那有几次循环几次，那就是固定值返回100，那我们2.log看一下结果。你看里边的所有值都是100。那所有值都是100。那如果我要返回N，那就是原封不动的这个值。你看啊，这上面值是一样的，那如果我现在返回这个N乘以0.5什么意思啊，是不是打五折把这里边分别卖克映式打五折算完之后再返回这里和过滤的用法只不都差不多，只不过过滤的是要还不要这里边呢，是计算后的结果返回到这个速度里边，这就ma和呃，U它俩的一个区别，那这样的话我们就完成了第二步的一个操作。完成了第二步操作，打完五折之后的，打完五折之后的第二步，那在第三步我们说汇总，那汇总的时候，原来我们也是这种便利的，那现在呢，我们使用reduce这个方法，你比如说。呃，Light总数sum等于。二。Reduce reduce这个方法，这个方法理解起来呢，稍稍有点呃，有点困难，它不像这个回断函数就全是一个参数，它呢是两个参数，你比如说呃，S和N。

是两个参数，那当然了，整个回调函数，你还可以使用第二个参数，我这加个零一会我再说什么意思，你看它什么意思，默认。默认这里面。因为这里边也是一样的，数组里边有几个元素就会调用几次这个回调函数，但是呢，这里边我给大家写个注释说明。这个说明的。第一次这里边的啊，S参数是什么？是零。是这个初始化的值给第一个参数初始化的。然后N呢是就第二参数，N是数组中的第一个元素，第一个元素，你看这个数组中第一个元素什么15对不对，如果按这个来说的话，那就是15。

对吧，那同样第二次。第二次就不能说参数。参数。参数，那第二个S的参数什么呢？是什么是第一次回调。为要。回调函数的返回值，也就是你这里边第一次这里边有返回什么值，那第二次的时候，这第二次的时候S就是这个返回值，那N呢，依次是数组元素中的。就变成数组中的第二个元素了，那第二个元素我们看一下这里边是多少呢？是40。是40那第三次。你看下第三次N的函数中的变成了什么？第三个元素对不对，是25。

35吧。啊是25，然后30，然后呢，这个呢是第二次的。函数的返回值对吧，你就看第二次里边返回什么了。那这是第三次，第四次。数组里边一共调用第四个元素嘛，对吧，那这块就数组里边最后一个元素，大家不执行了，那它还是什么，这个也是上一次的返返回值。上一次，每次都是上一次的，上一次的你还是。所以我们在这里边。看一下，如果我直接return。I提完返回十，那这里边儿我们打印一下。R是s.rog。这里边儿我们加上。加上。嗯。这串S。等于。嗯，加上S，再加上。逗号N等于再加上N，我们看一下这里边返回的值啊，你看第一次这里边我们我们每次都返回一个十，你看这个结果。

你看S第一次是零还是十五四十二十五三十里边每次都是十，都是上一次结果的返回值，那既然都是上一次结果的返回时，那我们就好办了，我们直接返回什么？你看我返回第一次返回S是零了，对不对，加上N。加上。那每次都是上次的返回值加上N，第一次呢是零加15返回去了，对吧，第一次是零对吧，它没有不需要那个返不需要上次返回，第二次的时候是零加15还是15对吧？返回15，然后第三次呢就变成15加40对吧？第四次呢，就是15加40加25，然后再加30，这样返回的结果值你看一下，那我们看一下最终的这个结果。你看。对吧。这是最后一次是80，它在里边打印的返回，那我们要外边整体的这个返回，对吧，因为这里边打印的是最后一次嘛，对吧，我要最外边的返回值，那我这块什么sum.log就是110，我们最终要的那个结果。

对它呢有点不太好理解，但是也没什么不太好理解的，你想知道这函数具体怎么用的话，你按住CTRL点击一下对不对，就可以进去看了啊，没有必要，你记得这么用就行了，这是。呃，这三个高级方法的一个应用，那这三个高级方法有没有更简单的一个应用呢？你看我们不就要那个结果吗？也有更简单的应用，明白吗？我们可以把这三个方法合到一起，你不用每次都几个变量都去弄了，你比如说。我这块就直接。直接这样吧。证明一个变量啊，直接不。点用的商品我先过滤。ILE。出来哦，这个数组我们没有把复制过来，知道拿过来。你看我们可以用什么链式边程去解决这个问题，过点FLTR过滤什么呢？先过滤，但是过滤的时候呢，我们这里边呃，你可以直接用这样的函数，你看我现在再改成用箭头函数，你看多方便啊，建能函数，因为这块刚学完，建能函数大家不熟悉对不对，那现在我给大家再写一下这个间函数，过滤的时候，你看跟这个函数的写法是一样的，我只需要干嘛呀，加上。

嗯嗯。这里边不需要一个箭头函数吗？一个参数嘛，把N传进来对不对，一个箭头函数里边返回什么呢？如果只有一条宇宙和返回值的，那我们直接。这么写就可以了。写两个啊，不是这两个，这是里边是这个值对吧，传这个N到这个箭头函数里边N大于等于十的值返回，它就过滤到这些东西，过滤掉完之后还可以继续直接列式，这叫那个呃列式编程嘛，那我们再直接再呃再卖映射对吧？映射的时候呢，我们也需要。一个参数进能函数，然后我们需要打五折，N乘以0.5，你看这样的话就会。

这个做完之后返回的数组，这个数组再继续点麦对不对，然后卖完之后我们还需要汇总，你看就把上面的很繁琐的就变成一条宇宙就可以。讲达这里边因为是两个参数了，所以呢，我们就需要使用括号对不对，S一个N一个这样的参数，然后我们这到函数函数值里边了，当然返回值S加N就可以了。然后一个分号，那我们直接打一下sum，是不是我们要的结果rog。如果是我们要的结果，你看那么多需求，那通过这一条语句就全部。打印出来了，全部计算完了。你看110跟我们上面的结果是一样，那你想象一下这样的语句是不是就很方便呢？既结合了箭头函数，又结合了列式编程，又用到了我们这三个高阶的一个函数，就实现了我们上面说的这个需求，那比我们不用。当然这种我们也可以用链接还那个列式边程把它连在一起啊，对吧。

比这种循环的方式要好得多，然后循环咱们也用这个简便的这个方式了啊，这就是这三个函数，那这几个高阶函数呢，在我们学习框架的时候，和我们后期的一些开发里面都是经常使用的，嗯，不用这几个，你就得用循环去写，对不对，用这几个呢，很方便，然后呢，你要知道介能函数作为回调函数应用的一个剪接的一个方式，当然了，我也说了。ES6新的输入方法不光是这些对不对，还有。萨，So，对吧，就是一个数组里边，嗯，怎么一些，只要有一个微针就返回针还有一个。嗯，1V1R2就是数组里边。怎么着，必须全为真的时候才发生真，有一个假就为假，这样的话，咱们注一些判断的时候，你就不用一个一个判断了，都放在一个数组里边去找，只要一个为真的就为针，对吧，必须全为针的数候才对，对就这样的一个关系。我就给大家做实验了，更简单一些啊啊，谢谢大家，这节课我们。