JavaScript高级语法之一等公民——函数(高阶函数)

简介: JavaScript高级语法之一等公民——函数(高阶函数)

JavaScript中一等公民 —— 函数

在JavaScript中,函数是非常重要的,并且是一等公民。所谓的一等公民到底是什么呢?


首先,函数的使用是非常灵活的;

其次函数可以作为另外一个函数的参数;

最后函数也可以终作为一个函数的返回值使用。(高阶函数)


接下来就展示一下函数的灵活性。


1.函数作为参数使用

// 将函数做为另一个函数的参数
function foo (a) {
   a()
}
function fn () {
    console.log('fn')
}
foo(fn) //将函数fn 作为函数foo的参数使用   输出结果为 fn

上面展示了一个最简单的使用,供大家参考理解,接来下展示一个小案例,示例代码如下:

// 创建一个calc函数,前两个参数为数字,第三个参数为计算函数 (名称顺序均为自定义)
function calc (num1, num2, calcFn) {
    console.log(calcFn(num1, num2))
}
// 创建一个加法函数
function add (num1, num2) {
    return num1 + num2
}
// 创建一个减法函数
function sub (num1, num2) {
    return num1 - num2
}
// 创建一个乘法函数
function mul (num1, num2) {
    return num1 * num2
}
var a = 20
var b = 30
// 调用calc函数传递不同的函数作为第三个参数,进行不同的方法计算,得到不同的输出结果
calc(a, b, add) // 50
calc(a, b, sub) // -10
calc(a, b, mul) // 600

2.函数作为返回值使用

众所周知,JS语法是允许在函数内部再定义函数的。

如下展示一个通俗易懂的小demo进行展示函数作为返回值的使用,示例代码如下:

// 在foo函数中嵌套一个bar函数
function foo () {
    function bar () {
        console.log('bar')
    }
    return bar // bar函数做为foo函数的返回值使用
}
var fn = foo()
fn() // bar

变量fn被赋值后就指向于foo函数中的bar函数,所以对fn()进行调用的到bar函数的打印结果

接着展示一个稍微有一丢丢绕的小demo(其实一点都不绕),示例代码如下:

// add函数作为makerAdder函数的返回值使用, makeAdder函数接收一个count的参数
function makeAdder (count) {
  // add函数接收一个num的参数,返回count与num的和
    function add (num) {
        return count + num
    }
    return add
}
var add5 = makeAdder(5)  //  此时的add5 意味着等于 函数makeAdder中的函数add
console.log(add5(6)) // 11 
console.log(add5(10)) // 15

这里给补充一个高阶函数的定义 :把一个函数如果接收另一个函数作为参数,或者该函数会返回另个一个函数作为返回值的函数,那么这个函数就称之为高阶函数。

所以上面的两个知识点所展示的代码都可以称为高阶函数。

目录
相关文章
|
2月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
49 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
3月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
69 0
|
2月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
38 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
120 2
|
2月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
24 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
168 4
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
94 4