首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浅析 FP:JavaScript 函数

前言 函数 是一个常见概念,在日常工作也经常会遇到,它其实非常简单,今天我们来了解一下它好处以及为什么要使用它。...那我们如果换成函数版本 greet ,所有都是那么自然~ 只需要修改单元测试传入参数即可! 可缓存性(Cacheable) 函数可以根据输入来做缓存。...,如果多次调用就会返回缓存后值,从而节省计算资源,而这一切前提都建立在传入 cached 那个函数函数基础上。...可移植性 / 自文档化(Portable / Self-Documenting) 由于函数是自给自足,它需要东西都在输入参数已经声明,所以它可以任意移植到任何地方。...函数就是这么个正直小可爱~ 总结 好啦,我们已经大概了解了函数,它对于我们写出良好代码有着重要意义,同时也是函数式编程精髓。

57920

javascript函数函数怎么定义

函数 函数概念 函数: 相同输入始终会得到相同输出,而且没有任何可观察副作用 函数就类似数学函数(用来描述输入和输出之间关系),y=f(x) Lodash 是一个函数功能库...,提供了对数组,数字,对象,字符串,函数等操作一些方法 数组slice和splice分别是函数和不纯函数 slice 返回数组指定部分,不会改变原数组 splice 对数组进行操作返回该数组...,会改变原数组 函数式编程不会保留计算结果,所以变量是不可变(无状态) 我们可以把一个函数执行结果交给另一个函数去处理 多次调用 slice 发现相同输入得到相同输出,所以是函数, splice...JavaScript 实用工具库。...可缓存 因为函数对相同输入始终得到相同输出,所以可以把函数结果缓存起来 可测试 函数让测试跟方便 并行处理 在多线程环境下并行操作共享内存数据可能出现意外情况 函数不需要访问共享内存数据

81630
您找到你想要的搜索结果了吗?
是的
没有找到

谈谈 JavaScript 函数

4,5] xs.splice(0, 3); //=> [] 在函数式编程,我们追求是那种可靠,每次都能返回相同结果函数,而不是像 splice 这样每次调用后都把数据弄得一团糟函数。...下面通过数学函数来了解下为何要坚持「相同输入得到相同输出」原则: 数学函数定义: 函数是不同数值之间特殊关系:每一个输入值返回且只返回一个输出值。...相比不纯函数(难以知道它们暗地里做了什么),函数能够提供多得多信息。 在 JavaScript 设定,可移植性可以意味着把函数序列化(serializing)并通过 socket 发送。...命令式编程“典型”方法和过程都深深地根植于它们所在环境,通过状态、依赖和有效作用(available effects)达成;函数与此相反,它与环境无关,可以在任何地方运行它。...并行代码在服务端 js 环境以及使用了 web worker 浏览器很容易实现,因为它们使用了线程(thread)。不过出于对非函数复杂度考虑,当前主流观点还是避免使用这种并行。

49320

JavaScript: 函数式编程-什么是函数

了解 JavaScript 函数式编程目录 0-了解 JavaScript 函数式编程 - 什么是函数 1-了解 JavaScript 函数式编程 - 柯里化 2-了解 JavaScript 函数式编程...- 代码组合优势 3-了解 JavaScript 函数式编程 - 声明式函数 4-了解 JavaScript 函数式编程 - 类型签名 编码原则 DRY(不要重复自己,don't repeat...看一个函数例子 函数不改变原始输入值。...// 从缓存读取输入值为 5 结果 //=> 25 复制代码 这里看看 memoize 缓存函数是怎么实现 var memoize = function(f) { var cache =...仔细思考思考这一点...这种自给自足好处是什么呢?首先,函数依赖很明确,因此更易于观察和理解 并行代码 最后一点,也是决定性一点:我们可以并行运行任意函数

61440

10 - JavaScript 函数 & 11 - JavaScript 函数种类

原文地址:https://dev.to/bhagatparwinder/functions-in-javascript-5ehm 什么是函数?它在 JavaScript 扮演什么角色?...函数就是 JavaScript 可以被执行代码块。函数有如下必备部分: 1. 使用 function 关键字声明; 2. 函数名字紧跟其后,它就是被调用时使用名字。 3....JavaScript 自带函数 你不是要经常写函数JavaScript 自带了许多可以直接使用方法。...函数声明在其他代码执行之前被加载,然而函数表达式只有等到 JavaScript 解释器执行到所在代码行时才被加载。这就是 JavaScript hoisting[1] 原理。...,它们没有与 this、arguments、super、new.target,我们将在接下来 JavaScript 文章温习这写概念。

2.8K20

理解 JavaScript Mutation 突变和 PureFunction 函数

[译] 理解 JavaScript Mutation 突变和 PureFunction 函数 不可变性、函数、副作用,状态可变这些单词我们几乎每天都会见到,但我们几乎不知道他们是如何工作,以及他们是什么...Javascript:原始数据类型和引用数据类型 我们将首先了解JS如何维护以及访问到我们数据类型。 在JS,有原始数据类型和引用数据类型。...函数和副作用 函数是接受输入并返回值而不修改其范围之外任何数据函数(副作用)。它输出或返回值必须取决于输入/参数,函数必须返回一个值。...于我们已经实现了不变性,我们确信我们应用程序状态不会在应用程序任何位置发生变异,况且函数完全准寻其处理逻辑和原则(译者注:不会产生副作用)。...就像这样,我们有一个 effects 函数和一个函数,这两个函数都用来去修改我们 state 对象。

78630

JavaScript箭头函数

关键字 没有大括号{} 在JavaScript函数是一等公民。...你可以把函数存储在变量,把它们作为参数传递给其他函数,并从其他函数把它们作为值返回。你可以使用JavaScript箭头函数来做所有这些事情。 无圆括号语法 在上述示例函数是没有参数。...它们从父级继承this值,正是因为这个特点,在上面这种情况下就是很好选择。 不正常工作情况 箭头函数并不只是在JavaScript编写函数一种花里胡哨新方法。...,以解决JavaScriptthis关键字绑定问题。...箭头函数在数组方法也很好用,如.map()、.sort()、.forEach()、.filter()、和.reduce()。但请记住:箭头函数并不能取代常规JavaScript函数

2.1K20

JavaScript函数基础

函数能让开发者把JavaScript代码变得更有效率,而且更能重复吃用。函数解决思路:把大问题变成小问题,分割思路。...函数Body可以访问参数,此时这些参数就像已经完成初始化工作局部变量。 注意:函数传递参数很像函数内部局部变量,但在函数内部改变函数参数,却不影响函数任何事物。 具有返回值函数。...返回值能让你从函数返回一段数据。...前端开发原则一: 结构(html),样式(css)和行为(JavaScript)分离。 内容:网页HTML代码,它提供网页实际上如何拼接在一起结构,同时也是网页数据所在地。...外观:网页css代码,它主要改变内容样式,决定字体,色彩和排版最终效果。 功能:驱动网页、带来交互性JavaScript代码。

1.5K60

JavaScript函数this(二)

this 常见用途:访问对象属性和方法:通过使用 this,我们可以在对象方法访问和操作对象属性和方法。...创建和初始化对象:通过构造函数和 this,我们可以在创建对象时设置和初始化对象属性。...console.log(john.name); // 输出 "John"console.log(john.age); // 输出 25修改执行上下文:通过使用 call() 或 apply(),我们可以在特定上下文中调用函数...避免闭包问题:通过使用 this,我们可以避免闭包作用域问题,确保访问正确变量和对象。...需要注意是,this 值在函数被调用时确定,并且在函数执行过程可能会发生变化。了解 this 规则和用法非常重要,以避免在代码中出现错误或意外行为。

49610

JavaScript函数this(一)

JavaScript,关键字 this 是一个特殊对象引用,它指向当前执行函数上下文对象。this值在函数被调用时确定,并且可能根据函数调用方式和上下文不同而变化。...this 规则全局上下文中 this:在全局上下文中,this 指向全局对象(在浏览器环境通常是 window 对象)。...console.log(this); // 输出全局对象,如 window 对象(在浏览器环境函数 this:在函数内部,this 值取决于函数被调用方式。...作为函数调用:如果函数作为普通函数调用,this 指向全局对象(在浏览器环境通常是 window 对象)。...箭头函数 this:箭头函数 this 值是在定义时确定,它捕获了包含它函数 this 值。

57920

JavaScript高阶函数

什么是高阶函数 高阶函数是对其他函数进行操作函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。...在《javascript设计模式和开发实践》是这样定义: 1.函数可以作为参数被传递; 2.函数可以作为返回值输出。...示例 Array.prototype.map 该map()方法通过调用作为输入数组每个元素参数提供回调函数来创建一个新数组。...该map()方法将从回调函数获取每个返回值,并使用这些值创建一个新数组。传递给回调函数map()方法接受3个参数:element,index,和array。...高阶函数就像常规函数一样,具有接收和返回其他函数附加能力,即参数和输出。

1.2K20

函数

source=cloudtencent 什么是函数? 相同输入永远会得到相同输出,而且没有任何可观察副作用。...函数就类似数学函数(用来描述输入和输出之间关系)y=fn(x) 函数库 我们平时用 lodash 其实就是函数库。...函数优点 可缓存(直接提升性能) 也就是我们平常说函数缓存,因为函数对相同输入始终有相同结果,所以可以把函数结果缓存起来,就没必要每次调用该函数都要重新执行一遍函数代码 可测试 函数让测试更方便...,不受副作用影响 并行处理 在多线程环境下并行操作共享内存数据很可能会出现意外情况(函数数据都是独立),函数不需要访问共享内存数据,所以在并行环境下可以任意运行函数 基础案例 函数...0, 3)) console.log(array.slice(0, 3)) // [ 1, 2, 3 ] // [ 1, 2, 3 ] // [ 1, 2, 3 ] 不纯函数 相同输入得到输出却不相同

22400

JavaScriptcompose函数和pipe函数

compose函数 compose函数可以将需要嵌套执行函数平铺,嵌套执行就是一个函数返回值将作为另一个函数参数。...res = calculate(10); console.log(res); // 200 但是根据我们之前讲函数式编程,我们可以将复杂几个步骤拆成几个简单可复用简单步骤,于是我们拆出了一个加法函数和一个乘法函数...: const add = x => x + 10; const multiply = x => x * 10; // 我们计算改为两个函数嵌套计算,add函数返回值作为multiply函数参数...compose实现,webpackloader加载顺序也是从右往左,这是因为他也是compose实现。...pipe函数 pipe函数跟compose函数作用是一样,也是将参数平铺,只不过他顺序是从左往右。

1.5K22

JavaScript匿名函数困惑

函数字面量(function literal):处理事件无名函数(nameless function)。函数字面量有时也称为匿名函数(anonymous function)。...可以在onload事件完成所有事件初始化。 函数字面量最好只被调用一次,而且不是被开发者写程序代码调用。创建一个函数字面量并直接指派给一个元素事件属性,而不是创建有名称函数并指派到它引用。...如果在代码不需要函数引用时,为了编写程序效率,同时不想中规中矩为函数命名,函数字面量(匿名函数)才显得有必要。 匿名函数调用: 调用一个函数,必须有方法定位它,找到它。...第二种情况:     window.onload = function () {         alert("I have been called...匿名函数生命周期和window.onload有内在关系吗?

1.2K70

JavaScript函数式编程

函数 函数是指一个函数,如果它调用参数相同,则永远返回相同结果。它不依赖于程序执行期间函数外部任何状态或数据变化,只依赖于其输入参数。...下面这个函数就不是函数,因为函数内部需要discount需要从外部获取: let discount = 0.8; const calPrice = price => price * discount...,将discount作为参数传递进去就行了 const calPrice = (price, discount) => price * discount; 函数可以保证代码稳定性,因为相同输入永远会得到相同结果...我们目标是尽可能减少副作用,将函数写为函数,下面这个不纯函数使用了new Date,每次运行结果不一样,是不纯: ?...要给为函数可以将依赖注入进去,所谓依赖注入就是将不纯部分提取出来作为参数,这样我们可以让副作用代码集中在外部,远离核心代码,保证核心代码稳定性 // 依赖注入 const foo = (d, log

1K41
领券