【Javascript】高阶函数,JSON,forEach,map,filter,reduce函数

news2025/1/16 15:04:08

❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
🙏 个人名言:不可控之事 乐观面对
😍 系列专栏:

文章目录

  • 高阶函数
    • 箭头函数
    • apply函数
  • JSON
  • filter函数
  • map函数
  • 总结
  • reduce函数
  • find/findIndex函数
  • every/some函数

高阶函数

  • 把函数作为参数,或者返回一个函数,就当作高阶函数
<script>
//定义
  function forEach(ary,action/*是一个函数,表达我们要对数组每一项要做的事情*/){
    for(var i = 0 ; i < ary.length ; i++){
      action(ary[i],i)
    }
  }
//调用
	forEach([1,2,3,4],function(item,idx){
	sum += item + idx
	})
	console.log(sum)
</script>
  • forEach函数,有两个参数,第一个参数是传的值,第二个参数是传的下标
<script>
  var sum = 0;/*注意这个要加分号,否则后面就是逗号表达式了*/
  [1, 2, 3, 4, 5].forEach(function (it,idx) {
    sum += it
  })
  console.log(sum)
</script>
  • 逗号表达式,是把逗号分割的每个表达式都求值,返回最后一个表达式的结果,两个数组连起来写的话,后面的数组是一个逗号表达式
    在这里插入图片描述
  • 高阶函数离不开闭包,下面这个函数就是闭包,闭包的作用域不会被销毁,返回值中还使用着外部作用域的变量,那么外部作用域就不会被销毁,什么时候还使用着外部作用域的变量呢,但返回的函数中需要使用外部作用域的变量,也就是高阶函数。
<script>
  function greaterThan(n) {
    return function (m) { return m > n }
  }
  var greaterThan10 = greaterThan(10)
  console.log(greaterThan10(11))
</script>

在这里插入图片描述

箭头函数

  • 把function去掉,改成一个剪头=>
<script>
  // var a = function (a, b) { return a * a + b }
  var a = (a, b) => { return a * a }
    [1, 2, 3].forEach(it => {
    console.log(it)
  })
</script>

apply函数

  • 下面这段代码的值为15,和es6中的…用法几乎相同
<script>
  var ary = [1, 2, 3, 4, 5]
  function f(a, b, c, d, e) {
    return a + b + c + d + e
  }
  f.apply(null, ary)
</script>

JSON

  • 属性名中不能有tab符号,并且属性名必须用双引号括起来
{
  "photos" :[
  {
    "url":"a1.jpg",
    "width":100,
    "height":225
  },
  {
    "url":"a2.jpg",
    "width":100,
    "height":225
  },
  {
    "url":"a3.jpg",
    "width":100,
    "height":225
  }],
  "rest" : 8
}

  • JSON.parse(xxx),这个可以将一段json转成js语言中的对象或者数组,json中的值没有undifined,NaN,这是一个反序列化的方法
    在这里插入图片描述
  • 如果一个数组或者对象想转成JSON格式,使用JSON.stringify(xxx)即可实现,这个一个序列化的方法
    在这里插入图片描述

filter函数

<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function getYoungIn1924() {
    var result = []
    for (var i = 0; i < ancestry.length; i++) {
      if (1923 - ancestry[i].born < 25) {
        result.push(ancestry[i])
      }
    }
    return result
  }

  function getAllMale() {
    var result = []
    for (var i = 0; i < ancestry.length; i++) {
      if (1923 - ancestry[i].sex == 'm') {
        result.push(ancestry[i])
      }
    }
    return result
  }
  function filter(ary, test) {
    var result = []
    for (var i = 0; i < ary.length; i++) {
      if (test(ary[i])) {
        result.push(ary[i])
      }
    }
    return result
  }

  filter(ancestry, person => person.sex == 'm')

</script>

map函数

<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function map(ary, transform) {
    var result = []
    for (var i = 0; i < ary.length; i++) {
      result.push(transform(ary[i], i, ary))
    }
    return result
  }
</script>

总结

  • forEach函数是对每一个数组项做一件事情,filter是根据某种条件将数组里的内容过滤,map是将数组里的每一项元素转换为另一个元素
  • 例:ancestry.filter(it => it.born > 1930).map(it => it.name)意思是找到1930年之后出生的人的名字。

reduce函数

  • 由一个数组求出一个单一的值,用作一个累加的作用
    在这里插入图片描述
<script>
  function f(ary){
    //max表示负无穷大
    var max = -Infinity
    for(var i = 0;i < ary.length;i++){
      max = ary[i] > max ? ary[i] : max
    }
    return max
  }
</script>
  • 修改成reduce函数后
<script>
  function reduce(ary, reducer, result) {
  	var start = 0
    for (var i = start; i < ary.length; i++) {
      result = reducer(result, ary[i],i,ary)
    }
    return result
  }

  reduce([1, 2, 3, 4], (max, it) => it > max ? it : max, max = -Infinity)
</script>
  • reduce传的参数有 [1,2,3,4].reduce((result,item,idx,ary) => {})
<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  ancestry.filter(it => it.sex == 'm').map(it =>
    it.died - it.born).reduce((a, b) => a + b)
</script>

find/findIndex函数

  • 在数组中找到第一个满足条件的值,这个条件是一个函数,[1,2,3,4,5,6,7,8].find(it => it > 3),返回值是找到的内容
  • findIndex就是返回第一个满足的下标
    在这里插入图片描述
<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function find(ary,predicate){
    for(var i = 0 ;i < ary.length;i++){
      if(predicate(ary[i],i,ary)){
        return ary[i]
      }
    }
  }
</script>

every/some函数

  • 数组中的每一项都满足条件,这个条件也是一个函数,every如果都满足就返回真,否则返回假,some是其中一个满足就返回真
    在这里插入图片描述
<script src="https://eloquentjavascript.net/2nd_edition/code/ancestry.js"></script>
<script>
  var ancestry = JSON.parse(ANCESTRY_FILE)
  function every(ary, test) {
    for (var i = 0; i < ary.length; i++) {
      if(test(ary[i],i,ary)){
        return false
      }
    }
    return true
  }

  function some(ary,test){
    for (var i = 0; i < ary.length; i++) {
      if(test(ary[i],i,ary)){
        return true
      }
    }
    return false
  }
</script>

————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/155927.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

线缆行业单绞机控制算法(详细图解)

在了解单绞机之前需要大家对收放卷以及排线控制有一定的了解,不清楚的可以参看下面几篇博客,这里不再赘述,受水平和能力所限,文中难免出现错误和不足之处,诚恳的欢迎大家批评和指正。 收放卷行业开环闭环控制算法 PLC张力控制(开环闭环算法分析)_RXXW_Dor的博客-CSDN博…

知识难懂到什么程度

爱因斯坦相对论&#xff0c;诺贝尔评委会都看不懂&#xff0c;到底说的是什么1905年&#xff0c;爱因斯坦发布狭义相对论&#xff1b;1916年&#xff0c;发布广义相对论&#xff1b;2年后&#xff0c;英国的汤姆逊教授通过实验验证了广义相对论的正确&#xff0c;同时也把爱因期…

容器适配器中stack queue priority_queue的介绍及模拟实现

文章目录容器适配器的概念deque的介绍及底层结构stack的介绍 stack的模拟实现 queue的介绍 queue的模拟实现 priority_queue的介绍 priority_queue的模拟实现 容器适配器的概念 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验…

清华大佬超全超详细讲解——C++STL看这份教程就够了

2022 年年度编程语言揭榜啦&#xff01;在上个月预想的 C、C、Python 三种候选语言中&#xff0c;C 脱颖而出&#xff0c;成为 TIOBE 2022 年度编程语言的最终获得者&#xff01;新的一波学习热潮要来了。TIOBE 编程语言社区排行榜是编程语言流行趋势的一个指标&#xff0c;每月…

数据分析思维(三)|测试/对比思维

测试/对比思维 1、概念 测试/对比思维可以说在数据分析的工作中随处可见。当我们通过各种手段得到一些结果数据后&#xff0c;如何评价结果的好坏呢&#xff1f;这个时候你可能会想到和标准结果进行比较、和之前的数据进行对照等等方法&#xff0c;这些方法归根结底就是一种测…

ubuntu 安装 Gitkraken 8.1.1 Pro 版本

GitKraken 是一个非常好用的 Git 图形界面客户端, 自 6.5.1 版本以后, GitKraken 对私有仓库不再免费开放使用 本文介绍一个 ubuntu 安装 GitKraken 8.1.1 Pro 版本的方法 环境准备 安装 yarn 测试过 node 18.12.1 版本, 没能升级到 Pro 版, 可能是因为 GitCracken 仓库太久…

springboot+sa-token-quick-login实现快速登录

当你的项目需要一个登录认证功能&#xff0c;这个登录界面可以不华丽、可以烂&#xff0c;但是一定要有&#xff0c;同时你又不想花费太多的时间浪费在登录页面上&#xff0c; 那么你便可以尝试一下Sa-Token-Quick-Login。 1、Sa-Token-Quick-Login Sa-Token-Quick-Login 可以…

5.4、TCP 流量控制(滑动窗口机制)

一般来说&#xff0c;我们总是希望数据传输得更快一些。 但如果发送方把数据发送得过快&#xff0c;接收方就可能来不及接收&#xff0c;这就会造成数据的丢失。 所谓流量控制(flow control)就是让发送方的发送速率不要太快&#xff0c;要让接收方来得及接收\color{red}让发送…

基于微信小程序的个人健康数据管理系统小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…

第一章.机器学习的前期准备—jupyter 更换文件路径的方法,jupyter使用方法,训练/验证/测试数据集的概念,学习方式,常见应用

第一章.机器学习的前期准备 1.1 第一章.机器学习的前期准备 1.jupyter软件的安装 说明:可以使用Anaconda软件中的jupyter软件 1).jupyter 更换文件路径的方法&#xff1a; ①.查找电脑中是否存在 jupyter_notebook_config.py 文件&#xff0c;若不存在&#xff0c;通过命令提…

前端最基础面试题:说说JavaScript中如何判断数据类型?

1. 基本数据类型的判定&#xff1a;typeof [变量名] typeof 1 // number typeof string呀 // string typeof true // boolean typeof Symbol(abc) // symbol控制台验证&#xff1a; 2. 引用类型 object 的判断&#xff1a; ① constructor ② instanceof ③ Object.prototy…

Redux与前端表格施展“组合拳”,实现大屏展示应用的交互增强

Redux 是 JavaScript 状态容器&#xff0c;提供可预测化的状态管理。它可以用在 react、angular、vue 等项目中, 但与 react 配合使用更加方便一些。 Redux 原理图如下&#xff0c;可以看到store仓库是Redux的核心&#xff0c;通过维护一个store仓库管理 state。state 是只读的…

JS严格模式(use strict)

javascript语法不够严谨&#xff0c;例如我们在项目中不用关键字去定义了一个变量a&#xff0c;控制台一切正常。b123;console.log(b)但是&#xff0c;如果开启了严格模式呢&#xff1f;"use strict" b123; console.log(b)此时将会报错Uncaught ReferenceError: b is…

开关电源中功率电感均方根电流是如何推导的?来自《开关电源宝典》

3.2.8 功率电感的有效电流参考“1.7.3 功率电感”章节内容&#xff0c;我们知道&#xff0c;功率电感具有温升电流、RMS电流、饱和电流、额定电流等电流参数。在后续“第5章 降压电路的应用方法”应用实例中进行功率电感选型时&#xff0c;需要保证所选电感的额定电流参数大于实…

自定义类型:结构体,枚举,联合(1)

tips 1. 2. 结构基础知识复习 1. 结构是一些值的集合&#xff0c;这些值被称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量。 2. 结构体类型&#xff0c;结构体成员&#xff0c;结构体变量&#xff0c;结构体指针的创建方式 3. 初始化结构体变量的时候&…

华为开源自研AI框架昇思MindSpore应用实践:FGSM网络对抗攻击

目录一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例二、对抗样本定义三、攻击方法快速梯度符号攻击&#xff08;FGSM&#xff09;四、数据处理五、训练LeNet网络六、实现FGSM七、运行攻击近年来随着数据、计算能力、理论的不断发展演进&#xff0c;深度学习在图…

老板要求总部-分部异地组网,作为IT运维怎样才能避免踩坑?

最近在开年会&#xff0c;老板提出2023年要全面搭建30个分公司的广域网架构&#xff0c;总部和分公司网络实现统一管理。但是公司原有网络架构复杂&#xff0c;各分支又是不同运营商接入的现状&#xff0c;想要实现异地组网并不容易&#xff01;然而&#xff0c;老板还不断提出…

好用的基于vue的组织架构图组件

都是基于vue的组织架构图&#xff0c;有支持vue2.x和vue3.x,可自行选择使用 一、vue-okr-tree&#xff08;支持vue2&#xff09; 文档地址&#xff1a;vue2-okr-tree 这个文档里面只有使用方法&#xff0c;不像vue3-tree-org里面有详细的介绍和安装引入教程 1.安装与引入 n…

第一章 spring框架概述

1.Spring框架概述*Spring是轻量级的开源的JavaEE框架*可以解决企业应用开发的复杂性*有两个核心的部分&#xff1a;IOC、AOPIOC&#xff1a;控制反转&#xff0c;把创建对象的过程交给Spring进行管理AOP&#xff1a;面向切面&#xff0c;不修改源代码的情况下进行功能的增加*Sp…

ThreadLocal与nheritableThreadLocal的区别及使用

ThreadLocal 多线程环境中&#xff0c;共享变量的并发修改常常导致线程同步问题&#xff0c;ThreadLocal可以存储线程私有的本地变量&#xff0c;从而使线程之间的变量相互隔离 因为ThreadLocal在线程执行的上下文可以传递变量的特性&#xff0c;所以可以很好的解决变量值传递…