函数式编程es6-学习笔记

已于 2024-08-19 14:17:12 修改
阅读量984 收藏 17
点赞数 24
分类专栏： web前端 文章标签： es6 学习 笔记 前端 javascript
于 2024-08-19 14:16:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73746764/article/details/141324217
版权

目录

函数引用透明性

纯函数

ECMAScript

第一个函数

严格模式

多语句函数

export 要点

高阶函数

存储函数

foreach函数

foreachobject函数

unless函数

some函数

times函数

every函数

compare骨架

sortby函数

闭包

函数封装到对象中

数组的函数式编程

map函数

filter函数

contatall函数

reduce函数

zip函数

柯里化与偏应用

变参函数

拓展运算符...

柯里化定义

柯里化函数作用

curry函数

偏函数

组合与管道

组合的定义

组合函数的优势

unix理念

| 管道符号

compose函数

组合多参数函数

pipe函数

identity函数

函子

定义

函子实现的map方法

maybe函子

either函子

pointed函子

Monad

generator

同步

异步

yield关键字

函数引用透明性

  • 引用透明性：所有函数对于相同输入都返回相同值
  • 函数式编程是一种范式，仅仅依赖输入就可以完成自身逻辑。
  • 函数的逻辑不依赖其他全局变量，这使得并发代码和缓存成为可能
  • 遵循引用透明性的函数只能依赖来自参数的输入，因此线程可以自由运行没有任何锁机制

纯函数

定义：遵循引用透明，对定的输入返回相同输出。

  • 纯函数不依赖于任何外部变量，有助于我们更容易测试代码
  • 纯函数不会改变它的环境，不需要担心同步问题，允许我们并发的执行代码

ECMAScript

ECMAScrit是JavaScript的规范

ECMAScript6 简称ES6，引入class，symbol，箭头函数，generator等

第一个函数

()=>""
//()表示函数参数
//=>是函数体定义的开始
//后面的内容是函数体/定义

一个简单的有名字的函数

//ES6
var hanshu =()=>"fanhui"
//ES5
var hansh=function hanshu(){
  return "fanhui"
}

严格模式

定义全局变量会报错（不使用var）

"use strict"

多语句函数

var hanshu =()=>{
  let value="fanhui"
  return value;
}//用｛｝包裹多条语句
  • es5函数在es6中是有效的

export 要点

把文件本身看做一个模块，伴随模块的概念产生了import和export 概念

高阶函数

定义：接受函数作为参数或者返回函数作为输出的函数

存储函数

把一个函数存入对象 fn类型是function

let fn=（）=>{}

foreach函数

定义

foreachobject函数

定义

用法

unless函数

定义

some函数

times函数

every函数

compare骨架

sortby函数

定义

闭包

  • 闭包是一个内部函数
  • 作用域
  1. 自身声明内的变量
  2. 全局变量
  3. 对外部函数变量的访问
  4. 闭包可以记住上下文

函数封装到对象中

数组的函数式编程

map函数

投影函数返回一个数组

filter函数

投影函数

contatall函数

把所有嵌套数组整合到一个数组中

reduce函数

zip函数

合并两个给定的数组

柯里化与偏应用

变参函数

接受可变数量参数的函数

拓展运算符...

捕获函数的额外参数

柯里化定义

把一个多参函数转化成嵌套的一元函数

const add=(x,y)=>x+y
//柯里化版本
const add=x=>y=>x+y;

柯里化函数作用

利用闭包性质可以解决重复利用参数的问题，简化代码

curry函数

  • 应用参数的列表从左到右，
  • 柯里化函数一般总在最后接受数组

偏函数

JavaScript中的偏函数、是指一个函数，它是由另一个函数通过固定一些参数而得到的，从而产生了一个新的函数。

  • 可以减少重复代码。在某些场景下，多个函数的参数有一些相同的部分，使用偏函数可以将这些共同的部分提取出来，避免在多个函数中重复写相同的代码。
  • 可以使代码更加模块化。偏函数可以将一个大函数拆分成多个小函数，每个小函数只负责一部分参数的处理，使得代码更加清晰、易于维护。
  • 可以方便地实现柯里化。偏函数是柯里化的一种特殊形式，它可以为柯里化提供一个简单、快速的实现方式。

组合与管道

组合的定义

函数式组合在函数式编程中被称为组合。

组合函数思想：把小函数组合成大函数

组合函数的优势

无需创建新的函数就可以通过基础函数解决眼前问题

  • 基础函数：每一个基础函数都需要接受一个参数并返回数据
  • 当函数接收只一个参数时我们才能将两个函数组合

unix理念

  • 每个程序只做好一件事。为了完成一项新任务，重新构建要好于在复杂程序中添加新属性
  • 每个程序输出应该是另一个尚未可知的程序的输入

| 管道符号

  • 允许我们通过组合一些函数去创建能够解决问题的新函数
  • | 将最左端的函数输出作为输入发送给右侧函数

compose函数

返回一个函数，b的返回值作为参数传给a

应用

组合多参数函数

  • 利用上一章柯里化和偏应用转化为一元函数再组合
  • 从右至左执行

pipe函数

compose函数的复制品，唯一修改的是数据流，从左到右执行

identity函数

compose函数的调试工具

将identity添加到数据流中可能出错的位置，会打印上一个函数接收到的输入参数

函子

定义

函子是容器

函子实现的map方法

实现了map函数在每次遍历时产生新的对象

maybe函子

使代码没有在null或underfined值下崩溃

either函子

解决分支拓展问题，帮助我们在拓展分支时保存错误信息？

pointed函子

实现了of契约接口

Monad

Monad是一个含有chain方法的函子，有助于扁平化MayBe数据

generator

解决异步代码回调地狱问题

同步

函数在执行时会阻塞调用者，并在执行完毕后返回结果

异步

函数在执行时不会阻塞调用者，但是一旦执行完毕就会返回结果

yield关键字

-ping09
关注
专栏目录
JavaScript 权威指南-学习笔记（一）
拉灯的小手的博客
04-06 1370
本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰，更不会影响计算机信息系统的正常运行。不得将代码用于非法用途，如侵立删！ JavaScript 权威指南-学习笔记 JavaScript是一门高级、动态、解释型变成语言，非常适合面向对象和函数式编程风格。 JavaScript的变量是无类型的。 JavaScript和Java除了表面语法大致相似，它与Java是完全不同的两门变成语言。 Hello World Node：交互式模式输出Hello World node c
ES6-面向对象编程思想
梅花寺
10-20 283
1、封装可以隐藏实现细节，使得代码模块化。封装的优势在于只可以在类内部进⾏对属性的操作，外部只能通过类实现的方法进行操作，相当于对类的操作进行了规范。2、继承可以扩展已存在的代码模块（类），它们的目的都是为了——代码重用。减少了代码的冗余，省略了很多重复代码，开发者可以从⽗类底层定义所有⼦类必须有的属性和⽅法，以达到减少耦合的⽬的。3、多态就是相同的事物，调用其相同的方法，参数也相同时，但表现的行为却不同。
Es6常用函数
qq_69253041的博客
08-30 207
作用：根据指定条件筛选出数组中满足条件的元素，并返回一个新数组。方法会遍历数组中的每个元素，对每个元素都调用一次 函数。如果函数返回true，则当前元素会保留在新的数组中；如果callback函数返回false，则当前元素不会包含在新的数组中。
ECMAScript6笔记：编程风格
YuqiRealm.com
12-01 616
ECMAScript6笔记：编程风格
ES6 编程风格
weixin_34102807的博客
12-14 94
1、块级作用域 （1）使用let代替var 好处：变量应该只在其声明的代码块内有效；var命令存在变量提升效用，let命令没有这个问题。 （2）全局常量 在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。 const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算...
ES6函数
记录点滴
06-19 1253
ES6中我们来看下函数有哪一些改变： 一、函数的默认值： 在ES5中设置默认值是在函数体内： 如果没传递参数 function test(num,callback){ var num = num || 10;//不传递参数默认是10 var callback = callback || function (param){console.log(param*10)}; ...
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 3006
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
es6js学习笔记3
xiaohua307的博客
03-03 611
ajax ajax是异步传输技术，是一种创建交互式网页应用开发技术，用来通过前台连接后台代码， 可以实现网页的异步更新，并且可以局部更新，所以叫作异步刷新， 局部更新技术，提高浏览器加载速度，节省服务区响应时间 定义ajax步骤 1.创建XMLHttpRequest对象 2.使用open方法链接后台服务器 3.通过send()发送数据，开始和服务器交互 4.通过onreadystatechange设置回调函数 ...
ES6学习笔记之let与const用法实例分析
10-15
同时，使用 `const` 有助于创建不可变的数据，这在函数式编程和构建不可变数据结构时特别有用。通过结合使用 `let` 和 `const`，开发者可以更好地控制变量的作用域和生命周期，减少因变量污染导致的错误。
基于《狂神说Java》Vue--学习笔记
wudidahuanggua的博客
06-18 1414
本笔记仅做学习与复习使用，不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅！！!点击跳转至遇见狂神说哔哩哔哩首页如果你也是狂神的小迷弟，可以加我好友一起探讨学习。...
ES6 函数
CH_CHENG的博客
04-24 131
函数参数的扩展 默认参数 在ES6中对函数进行了扩展那就是在调用函数时未给参数赋值时，我们可以在函数的参数赋一个初始值，从而达到即使没用传值也有一个初始值。如下图 注意要点： 定义函数默认参数时不可以有同名的参数，如下图 只有在没有参数或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。 未初始化赋值的参数值无法作为其他参数的默认值。如下图 ...
ES6-函数
hunter_97的博客
11-20 81
一、 箭头函数 ES6 介绍了一种新的定义的函数的方法，叫 Arrow Functions ，箭头函数，认识一下使用箭头定义函数的写法，先定义一个变量，这个变量可以当成函数的名字，等号右边的东西是函数可以接收的参数的名字，比如用一个 dessert，然后它的右边是一个箭头，就是一个等号再加上一个大于号。 箭头的左边是函数的参数，右边是函数返回值， 比如我们要返回dessert 参数的值，直接用...
es6-函数
爱飞翔
02-27 473
前言 杭州这周温度达到-5度了，温度下降的蛮快，年会排舞感觉好悬啊，不知到能拍出啥道道来,现在唯一的心愿就是，早点回家，冷也阻止不了我回家的脚步，嗯哼。 我的博客地址 ：http://www.aymfx.cn/ 引子 ES6函数的改变不算太大，都是一些其他语言早就有的功能，而Javascript一直比较欠缺的，比如函数参数默认值，任意参数的表示法，最大的变化应...
ES6的函数
Han_Zhou_Z的博客
01-08 418
目录 一、函数 1、函数：实现某种功能的程序模块 2、函数参数的不定参数 3、箭头函数 A、没有参数，用括号代替 B、一个参数，括号可以省略 C、多个参数 D、利用箭头语法里隐式返还的时候需要注意对象的情况 一、函数 1、函数：实现某种功能的程序模块 参数（形参）：形式参数，占位符，在函数定义时没有数据 参数（实参）：实在参数，在函数中调用使用，表示实际的数据 函数形参的默认值：在很多情况下，需要在使用函数的时候给定默认参数，在ES5标准中 //ES5中定义函数的默认参数 ..
写一个html css js es6的笔记
最新发布
09-13
### 回答1： 好的，我可以回答这个问题。HTML 是一种用于创建网页的标记语言，它可以定义网页的结构和内容。CSS 是一种用于控制网页样式的语言，它可以定义网页的布局、颜色、字体等样式。JavaScript 是一种用于添加交互性和动态效果的编程语言，它可以让网页变得更加生动和有趣。ES6 是 JavaScript 的一个版本，它引入了许多新的语法和特性，使得编写 JavaScript 更加方便和高效。以上就是我对 HTML、CSS、JavaScript 和 ES6 的简要介绍。 ### 回答2： HTML 是超文本标记语言（HyperText Markup Language）的缩写，用于构建网页结构。通过使用标签（tag），可以定义网页的内容、布局和样式。HTML5 是HTML的最新版本，它引入了新的元素和属性，提供了更多的功能和灵活性。 CSS 是层叠样式表（Cascading Style Sheets）的缩写，用于为网页添加样式和布局。通过使用选择器（selector）和属性（property），可以控制网页元素的外观和位置。CSS3 是CSS的最新版本，它引入了新的特性，如过渡效果（transition），动画（animation）和阴影（box-shadow）。 JavaScript 是一种脚本语言，用于为网页添加交互性和动态效果。它可以通过HTML标签的事件（如点击、鼠标悬停等）来触发特定的行为。 JavaScript ES6 是 ECMAScript 6 的缩写，是 JavaScript 最新的标准版本，引入了很多新的语法和特性，如箭头函数（arrow functions）、常量与块级作用域（const 和 let）、模块化（modules）等。 HTML的基本结构如下： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <link rel="stylesheet" href="style.css"> </head> <body> <header>页眉</header> <nav>导航栏</nav> <section>内容区域</section> <aside>侧边栏</aside> <footer>页脚</footer> <script src="script.js"></script> </body> </html> ``` 其中，`<!DOCTYPE html>`声明文档类型为HTML5，`<html>`标签包裹整个网页，`<head>`标签用于定义元数据和引入外部样式表和脚本文件，`<title>`标签定义网页标题，`<link>`标签引入外部CSS文件，`<script>`标签引入外部JavaScript文件。 CSS的基本用法如下： ```css body { background-color: #f2f2f2; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 10px; } section { background-color: #fff; color: #333; padding: 20px; } ``` 以上代码设置了背景颜色、字体和间距等样式。 JavaScript的基本语法如下： ```javascript // 变量声明与赋值 let name = 'John'; const age = 25; // 函数定义 function sayHello() { console.log('Hello!'); } // 箭头函数 const greeting = message => { console.log(message); } sayHello(); // 输出：Hello! greeting('Welcome to my website!'); // 输出：Welcome to my website! ``` 以上代码定义了变量和函数，并调用了函数输出信息。 ES6还提供了许多其他的特性，如模板字符串（template literals）、解构赋值（destructuring assignment）、Promise等，用于提供更强大、更简洁的开发工具。使用HTML、CSS和JavaScript开发网页可以创造出丰富多样的用户体验和网页交互效果。 ### 回答3： HTML (超文本标记语言)是用于构建网页结构的标记语言。通过使用不同的标签和属性，可以创建标题、段落、链接、图像等元素。HTML提供了一种简单的方式来将文本、图像和其他内容组织在一起，并以逻辑和结构化的方式呈现。 CSS (层叠样式表)用于控制网页中的布局和外观。它提供了一种样式语言，可以通过选择器和规则来定义网页元素的外观。通过使用CSS，您可以更改字体样式、背景颜色、间距和边框、响应式设计等。 JavaScript (JS) 是一种用于控制网页行为的脚本语言。它可以添加交互性和动态功能，例如验证表单、处理用户输入、创建动画等。通过JavaScript，您可以与用户交互并对网页进行动态更新。 ES6 (ECMAScript 6) 是JavaScript的一个新版本，提供了许多改进和新功能。它引入了let和const关键字来定义变量，箭头函数简化了函数的写法，模板字符串提供了更好的字符串插值，解构赋值方便了对象和数组的处理，扩展操作符可以方便地操作数组和对象等。 在学习这些技术的过程中，以下是一些建议和要点： 1. 使用语义化的HTML标记，清晰地定义网页的结构和内容。 2. 使用外部样式表或内部样式表来管理和组织CSS代码，以增加可维护性。 3. 利用CSS选择器和样式规则来定义元素的外观和布局，使用层叠和继承规则来优化样式。 4. 使用一致的命名约定和组织方式来组织JavaScript代码，以提高代码的可读性和可维护性。 5. 使用函数和事件处理程序来实现交互性和动态行为，避免全局变量的污染。 6. 在ES6中，尽量使用let和const来定义变量，使用箭头函数来简化函数的写法，利用模板字符串和解构赋值来提高代码的可读性。 7. 注意浏览器的兼容性问题，使用polyfills或者转译工具来支持旧版本的浏览器。 8. 通过阅读文档和教程，并实践编写代码来提高技能水平。 通过掌握HTML、CSS、JavaScript和ES6，您可以创建交互式和动态的网页，并为用户提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值