JavaScript编程基础 – 函数进阶

news2024/12/28 9:28:30

JavaScript编程基础 – 函数进阶

JavaScript Programming Essentials – Perfect Functions

“函数的第一条原则是要小,函数的第二条原则是要更小。“ – 罗伯特.C.马丁

前文讲述过函数多取决于数学的函数概念,以此来定义JavaScript编程语言的函数,从而实现函数式编程。

依据传统数学函数的定义,变量x和函数值y的相互关系始终遵循以下这个公式:
y = f(x)

至于输入的x如何变成y,却有诸多种方法。

尽管前文从不同角度介绍了函数,但是那些是传统的JavaScript函数思想,也就是说,随着ECMAScript标准的演进,这些东西都有可能产生变化。

本文简要介绍JavaScript函数在ECMAScript 2015,也就是ES6规范下的新的变化和新的功能,以便使读者了解函数式编程取得的新的进展能够更加有效地服务于软件服务。

1. 调用名称的函数

简而言之,函数是一段通过其名称被调用的代码,并且,它可以传递参数和返回值。
假设有一个简单函数,只返回它的参数传递的值,不进行任何复杂计算。

示例代码如下:

var simple = (a) => {return a}     // 一个最简单的函数
console.log(simple(5))           // 用函数的名称调用

运行结果如下图:
在这里插入图片描述

2. 调用方法的函数

作为一个简单的方法,用名称和其关联调用,是另一个函数示例,代码如下:

var obj = {simple : (a) => {return a }}
obj.simple(5)       // 用其名称及其关联对象调用

运行结果如下图:
在这里插入图片描述

3. 引用透明性

基于纯粹的函数定义,所有的函数对于相同的输入,都将返回相同的值。函数的这个属性被称为 引用透明性 (Reference Transparency)

以下定义几个简单函数,分别按照传原值、传加法值、传乘法值返回结果;无论传入什么作为输入,最终都会按规则把它返回。

var identity = (i) => {return i}
const add = (x, y) => x + y
const multiply = (x) => x * 5

执行结果如下图:

在这里插入图片描述
不难看出,JavaScript的表达式可以替换为它的计算值,这就是引用透明性

由于函数会为给定的输入,返回相同的值,实际上可以缓存它。

比如,有一个阶乘函数factorial,用来计算给定数值的阶乘,大家都知道5的阶乘等于120(54321 = 120),那么用户第二次调用函数factorial,结果如何呢? 答案仍然是120, 如下代码:

function factorial(n) {
    let ans = 1;
    
    if(n === 0)
        return 1;
    for (let i = 2; i <= n; i++)
        ans = ans * i;
    return ans;
}

执行结果如下图所示:
在这里插入图片描述

4. 命令式方法

创建一个数组,用for循环遍历它的数组元素,代码执行如下:
在这里插入图片描述

以上这段代码运行良好。但为了解决问题,需要准确地告知程序应该“怎么“做。在本中,代码告诉编译器获得数组长度,遍历数组,用索引获取每一个数组元素等。

这种方法称之为 “命令式“解决方案。命令式编程主张告诉编译器”怎么“做。

5. 声明式方法

另一种编程思路,是告诉编译器做“什么“, 而不是”怎么“做或者”如何“做。
这种方法称之为 “声明式“解决方案。声明式编程中,”怎么“做的部分被抽象到函数中。

示例代码如下,用内置的forEach函数遍历数组并打印输出它:

var array = [1, 2, 3]
array.forEach((element) => console.log(element))

执行结果如下图所示:
在这里插入图片描述
用函数方法处理循环问题
如果需要遍历一个数组,并且将结果打印输出到控制台,可用以下代码来实现:

var array = [1, 3, 5, 7, 9]
for (i = 0; i < array.length; i ++)
console.log(array[i])

执行结果如下图:
在这里插入图片描述

函数式编程中,将操作抽象成函数;如果这样做的话,需要把操作抽象为函数,以便在需要的时候能够重用,这比每次都告诉函数“怎样“去遍历要好。

6. 存储函数到变量

函数就是数据;可以把它存入一个变量。类似以下的代码:

let fn = () => {}
console.log(typeof fn)

执行结果如下图所示:
在这里插入图片描述

其功能无论如何增强,都验证了一个事实,就是函数的结果除了像返回值那样,还可以存储到(赋值)一个变量。

7. 传递函数

下面的函数示例,告诉我们接受一个参数并将参数的类型打印输出到控制台:

var tellType = (arg) => {
    console.log(typeof arg)
}
tellType("Welcome")

传递字符串“Welcome”作为参数,执行结果如下图:

在这里插入图片描述
可以看到,返回类型为string,如果增加传递几种参数,传递结果如下图:

在这里插入图片描述
返回类型分别为boolean, number和string.

另一个代码如下,将判断如果参数是函数,那么该函数tellType就执行它。

var tellType = (arg) => {
    if(typeof arg === "function") {
        arg()
    } else {
        console.log("The passed data is:" + arg)
    }    
}
var dataFn = "Welcome"
tellType(dataFn)

可以看到,通过传递dataFn(一个字符串变量)来执行tellType; 这样,成功地将dataFun传递给另一个函数tellType, 而tellType执行了传入的函数。

执行结果如下图所示:

在这里插入图片描述
函数式编程是JavaScript语言的显著特征,今后有机会将继续研究它的高级特性。

技术好文陆续推出,敬请关注。

喜欢就点赞哈。😊

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

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

相关文章

k8s ingress高级用法一

前面的文章中&#xff0c;我们讲述了ingress的基础应用&#xff0c;接下来继续讲解ingress的一些高级用法 一、ingress限流 在实际的生产环境中&#xff0c;有时间我们需要对服务进行限流&#xff0c;避免单位时间内访问次数过多&#xff0c;常用的一些限流的参数如下&#x…

致远OA wpsAssistServlet 任意文件上传漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、产品简介 致远OA互联新一代智慧型协同运营平台以中台的架构和技术…

分享一个字体抽取软件

一、先下载软件。 地址 蓝奏云 密码 bjnr Fontmin-v0.2.0-win64 下载下来直接就是exe文件&#xff0c;直接双击安装即可。 二、打开默认如图显示 三、接下来把你的字体文件拖拽到里面 四、在把你用到这个字体的文字填入到框内 五、最后点击生成。 生成的字体文件只有2k了…

解决升级docker导致的k8s崩溃问题

最近由于安装harbor升级了docker&#xff0c;然后发现k8s集群就启动不了。 查看kubelet日志发现&#xff1a;直接连不上apiserver了&#xff0c;直接connection refused 然后尝试启动apiserver容器直接报错&#xff1a;Error response from daemon: unknown or invalid runtim…

RabbitMQ 消息丢失解决 (高级发布确认、消息回退与重发、备份交换机)

目录 一、发布确认SpringBoot版本 确认机制图例&#xff1a; 代码实战&#xff1a; 代码架构图&#xff1a; 1.1交换机的发布确认 添加配置类 消息消费者 消息生产者发布消息后的回调接口 测试&#xff1a; 1.2回退消息并重发&#xff08;队列的发布确认&#xff09; …

让文字在盒子中水平居中与垂直居中

简单方法&#xff1a; 1.先用text-align: center;将文字垂直居中。 2.再用line-height: Xpx;将元素的行高设置为与父元素同样的高度。&#xff08;这里的X代表父元素的高度&#xff09; 举例&#xff1a; 对于该网页的代码如下&#xff1a; <!DOCTYPE html> <html&…

servlet页面以及控制台输出中文乱码

如图&#xff1a; servlet首页面&#xff1a; servlet映射页面&#xff1a; 以及控制台输出打印信息&#xff1a; 以上页面均出现中文乱码 下面依次解决&#xff1a; 1、首页面中文乱码 检查你的html或者jsp页面中meta字符集 如图设置成utf-8 然后重启一下tomcat 2、servl…

Eclipse切换中文环境

PACK包链接 地址&#xff0c;进入后可以看到不同版本的包。 要选择跟自己Eclipse版本一致的包&#xff0c;比如我的Eclipse启动界面如下&#xff0c;我就要找Helios的包&#xff08; Juno、Indigo、Helios、Kepler这些具体怎么划分的我也不清楚&#xff09;。 在线安装 打…

AODNet

【20231117】读研期间没有对阅读的文章进行总结&#xff0c;没想到毕业反而有了机会。即日起会对阅读过的文章要点进行梳理记录&#xff0c;希望这一习惯能够坚持下去。 学术的角度&#xff1a;看论文要学习作者如何逻辑严谨的自证 落地的角度&#xff1a;只用看以下六点&#…

Oracle OCM考试(史上最详细的介绍,需要19c OCP的证书)

Oracle 19c OCM考试和之前版本的OCM考试差不多&#xff0c;对于考生来说最大的难点是题量大&#xff0c;每场3小时&#xff0c;一共4场&#xff0c;敲键盘敲得手抽筋。姚远老师&#xff08;v:dataace&#xff09;的很多Oracle OCP学员都对19c OCM考试很有兴趣&#xff0c;这里给…

企业数字化转型的好处?_光点科技

企业数字化转型是当今商业世界中一个至关重要的议题。数字化转型不仅仅意味着采用新技术&#xff0c;而是涉及到企业在文化、运营和客户体验方面的根本变革。那么&#xff0c;企业数字化转型的好处是什么呢&#xff1f; 1.数字化转型可以显著提高企业的运营效率。 通过自动化流…

8.jib-maven-plugin构建springboot项目镜像,docker部署配置

目录 1.构建、推送镜像 1.1 执行脚本 2.2 pom.xml配置 ​2.部署镜像服务 2.1 执行脚本 2.2 compose文件 3.docker stack常用命令 介绍&#xff1a;使用goole jib插件构建镜像&#xff0c;docker stack启动部署服务&#xff1b; 通过执行两个脚本既可以实现构建镜像、部…

前端对用户名密码加密处理,后端解密

一. 正常表单提交如图&#xff0c;可以看见输入的用户名密码等 二. 使用crypto-js.min.js进行前端加密处理 js资源地址链接&#xff1a;https://pan.baidu.com/s/1kfQZ1SzP6DUz50D–g_ziQ 提取码&#xff1a;1234 前端代码 <script type"text/javascript" src&q…

2023年亚太杯数学建模思路 - 复盘:校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…

2023年09月 Scratch(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 下列哪项内容是不可以修改的?( ) A:角色名称 B:造型名称 C:舞台名称 D:背景名称 答案:C 第2题 要给“古诗朗诵”作品录制配音,可以使用下列哪个按钮?( ) A: B: C:…

LLM建模了什么,为什么需要RAG

LLM近期研究是井喷式产出&#xff0c;如此多的文章该处何处下手&#xff0c;他们到底又在介绍些什么、解决什么问题呢&#xff1f;“为学日增&#xff0c;为道日损”&#xff0c;我们该如何从如此多的论文中找到可以“损之又损以至于无”的更本质道或者说是这个方向的核心模型。…

ElementUI及ElementUI Plus Axure RP高保真交互元件库及模板库

基于ElementUI2.0及ElementUI Plus3.0二次创作的ElementUI 元件库。2个版本的原型图内容会有所不同&#xff0c;ElementUI Plus3.0的交互更加丰富和高级。你可以同时使用这两个版本。 不仅包含Element UI 2.0版&#xff0c;还包含Element Plus 3版本。Element 2版支持Axure 8&…

解析 Python requests 库 POST 请求中的参数顺序问题

在这篇文章中&#xff0c;我们将探讨一个用户在使用Python的requests库进行POST请求时遇到的问题&#xff0c;即参数顺序的不一致。用户通过Fiddler进行网络抓包&#xff0c;发现请求体中的参数顺序与他设置的顺序不符。我们将深入了解POST请求的工作原理&#xff0c;并提供解决…

css继承属性

在css中&#xff0c;继承是指的是给父元素设置一些属性&#xff0c;后代元素会自动拥有这些属性 关于继承属性&#xff0c;可以分成&#xff1a; 字体系列属性文本系列属性元素可见性表格布局属性列表属性引用光标属性 继承中比较特殊的几点&#xff1a; a 标签的字体颜色不…

HTTP HTTPS 独特的魅力

目录 HTTP协议 HTTP协议的工作过程 首行 请求头&#xff08;header&#xff09; HOST Content-Length​编辑 User-Agent&#xff08;简称UA&#xff09; Referer Cookie 空行 正文&#xff08;body&#xff09; HTTP响应详解 状态码 报文格式 HTTP响应格式 如何…