• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

JavaScript高阶函数——filter/map/reduce详解——2020.11.21

互联网 diligentman 1周前 (11-22) 4次浏览

一丶详解代码

<!--作者:key-->
<!--浏览工具:Chrome-->
<!--开发工具:WebStorm-->
<!--开发时间:2020/11/21 12:48-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{"原来的数组:"+ nums}}<br>
  {{'过滤掉小于100之后的数组:' + useFilter()}}<br>
  {{'将过滤之后的数组,乘以2后的数组:' + useMap()}}<br>
  {{'乘以2后的数组各元素的和:'+ useReduce()}}<br>
  {{'三种函数,联用:' +  useOnceCount()}}<br>
  {{'一行代码搞定,以上三种需求:' + useOnceRowCount()}}<br>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      nums:[10,20,111,222,333,444,40,50]
    },
    // filter/map/reduce
    methods:{
      // 1.filter过滤器
      // filter中的回调函数有一个要求,必须返回一个boolean值
      // true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
      // false:当返回false时,函数内部会过滤掉这次的n
      useFilter(){
        //取出小于100的值,使用filter
        let newNums = this.nums.filter(function (n) {
          return n < 100
        })
        return newNums
      },
      // 2.map使用
      useMap(){
        // 将第一步过滤的newNums数据乘以2
        let new2Nums = this.useFilter(this.newNums).map(function (n) {
          return n * 2
        })
        return new2Nums
      },
      // 3.reduce的使用
      // 作用:对数组中所有的内容进行汇总(相加,相乘之类的)
      useReduce(){
        let total = this.useMap().reduce(function (preValue,n) {
          return preValue+n
        },0)
        // 第一次: preValue 0 n:20
        // 第二次: preValue 20 n:40
        // 第三次: preValue 60 n:80
        // 第四次: preVAalue 140 n:100
        // 回调:  返回240
        return total
      },
      useOnceCount(){
        let total = this.nums.filter(function (n) {
          return n < 100
        }).map(function (n) {
          return n * 2
        }).reduce(function (preValue,n) {
          return preValue + n
        },0)
        return total
      },
      useOnceRowCount(){
        let total = this.nums.filter(n => n < 100).map(n => n * 2).reduce((preValue,n) => preValue+n)
        return total
      }
    }
  })
</script>
</body>
</html>

二丶运行结果

JavaScript高阶函数——filter/map/reduce详解——2020.11.21

——高岸为谷,深谷为陵——


喜欢 (0)