JS常用高阶函数

最新推荐文章于 2024-06-05 17:36:42 发布

驮石的乌龟

最新推荐文章于 2024-06-05 17:36:42 发布

阅读量199

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/qq_44363897/article/details/104434292

版权

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

JS常用高阶函数

一、filter()

每遍历数组中的一个数字就会执行一次回调函数，并且会把遍历的数字当做回调函数的参数。
filter()中的回调函数有一个要求：必须返回布尔值，即true/false。当返回为true时，函数内部会自动将这次回调的参数n加入到新的数组中，当返回false时，函数内部会自动忽略掉这次回调的参数n

二、map()

每遍历数组中的一个数字就会执行一次回调函数，并且会把遍历的数字当做回调函数的参数
返回什么值就会加入到新的数组中

三、reduce()

作用：对数组中所有内容进行汇总
数组中有几个数值就会调用几次回调函数
reduce(参数一,参数二)
参数一：一般是回调函数 ; 参数二：初始化值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
<script type='text/javascript'>
  const nums = [2 , 4 , 66 , 44 , 119 , 78 , 230 , 34]
  /*1. filter() 函数*/
  // 会执行nums.length次回调函数
  let newnums = nums.filter(function(n){
    // 返回nums中小于100的数
    return n < 100
  })
  console.log(newnums);//[2 , 4 , 66 , 44 , 78 , 34]
  /*2. map() 函数*/
  let new2nums = newnums.map(function(n){
    return n*2
  })
  console.log(new2nums);//[4, 8, 132, 88, 156, 68]
  let new3nums = newnums.map(function(n){
    return 100;
  })
  console.log(new3nums);//[100, 100, 100, 100, 100, 100]
  /*3. reduce(参数一,参数二)*/
  // 参数一：一般是回调函数 ; 参数二：初始化值
  // preValue 上一次返回的值
  let total = new2nums.reduce(function(preValue , value){
    // 第一次 preValue=0  n=4
    // 第二次 preValue的值与return的相同 n=8
    // 第三次 preValue的值与return的相同 n=132
    // ...
    return preValue + value //对数组中的值求和
  },0)
  console.log(total); //456
</script>
</body>
</html>

驮石的乌龟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS常用高阶函数

JS常用高阶函数一、filter()每遍历数组中的一个数字就会执行一次回调函数，并且会把遍历的数字当做回调函数的参数。filter()中的回调函数有一个要求：必须返回布尔值，即true/false。当返回为true时，函数内部会自动将这次回调的参数n加入到新的数组中，当返回false时，函数内部会自动忽略掉这次回调的参数n二、map()每遍历数组中的一个数字就会执行一次回调函数，并...
复制链接

扫一扫

专栏目录