自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(57)
  • 收藏
  • 关注

原创 函数式编程#8声明式与命令式代码区别

【代码】函数式编程#8声明式与命令式代码区别。

2023-04-27 10:42:40 170

原创 函数式编程#7pointfree无参数组合函数模式

【代码】函数式编程#7pointfree无参数组合函数模式。

2023-04-27 09:06:26 186

原创 函数式编程#6组合函数-基础用法

【代码】函数式编程#6组合函数-基础用法。

2023-04-26 21:13:17 583

原创 函数式编程#5柯理化函数用处

【代码】函数式编程#5柯理化函数用处。

2023-04-26 20:13:21 115

原创 函数式编程#4纯函数的用处

【代码】函数式编程#4纯函数的用处。

2023-04-25 20:10:25 48

原创 函数式编程#3纯函数的概念

当变量min放置函数内部,此时变量存在于函数内部,调佣函数整体时,不会被改变,此时函数的返回结果是预期可控的,所以可称为纯函数。当变量min防止函数外界,此时min的值可能会被改变,从而影响函数本身返回的结果,所以不是纯函数;是数学上的映射,是一对一的映射,不是一对多的映射。纯函数,保证了没有副作用的理念是-“相同的输入得到相同的输出”函数在执行过程中,发生超出预期以外的影响,统称为副作用。slice调用后,数组本身不会被改变,可称为纯函数。splice调用后,数组本身发生改变,不是纯函数。

2023-04-24 21:13:47 388

原创 函数式编程#2一等公民函数

【代码】函数式编程#2一等公民函数。

2023-04-24 15:06:09 70

原创 函数式编程#1海鸥程序

鸟群合并则变成了一个更大的鸟群,繁殖则增加了鸟群的数量,增加的数量就是它们繁殖出来的海鸥的数量。

2023-04-24 09:52:55 80

原创 你不知道的JS-Array,String,Number,特殊值

如果一个 Number 对象持有一个基本标量值 2,那么这个 Number 对象就永远不能再持有另一个值;复合值 —— object(包括 array,和所有的对象包装器(Number、String、Boolean等) )和 function。简单值(也叫基本标量):number、string、 boolean、null、undefined、symbol。-0与0的比较中,比较Infinity与-Infinity是否相等。null有定义,值为空;-0字符串化会自动变为0,当反向字符串化时返回本身-0。

2023-04-11 16:23:54 649

原创 JS 节流

js 三种节流:时间戳版,束流版,定时器版

2022-06-20 10:13:35 498

原创 JS 防抖

JS防抖效果模拟实现

2022-06-20 09:01:36 124

原创 JS 各封装工具库含义

JS 各封装工具库含义文章目录JS 各封装工具库含义开发环境模块babelwebpackpluginsloader生产环境模块Vueloadshwagneditor开发环境模块babel定义Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。用处:1.语法转换2.通过 Polyfill 方式在目标环境中添加缺失的特性 (通过引入第三方 polyf

2022-05-28 15:07:58 161

原创 JS 定位父级和偏移量

JS 定位父级和偏移量样例代码 <style> * { margin: 0; padding: 0; } .box { position: relative; height: 200px; width: 200px; padding: 10px; margin: 10px; overflow: auto; border: 2px solid rebeccapurple; background-color: aqua;

2022-05-15 16:58:58 430

原创 JS 获取 元素自身区域尺寸

JS 获取 元素自身区域尺寸文章目录JS 获取 元素自身区域尺寸样例代码-便于区别1.content区域宽/高+paddingclientWidthclientHeight2.content区域宽/高+padding+滚动条+边框offsetWidthoffsetHeight3.content区域宽/高+padding+卷曲宽/高scrollWidthscrollHeight4.边框宽度样例代码-便于区别<style> * { margin: 0; padding: 0;

2022-05-15 16:11:31 218

原创 JS 视窗(window)位置和尺寸

JS 视窗(window)位置和尺寸文章目录JS 视窗(window)位置和尺寸1.window view视口宽高尺寸 :innerWidth,innerHeightouterWidth,outerHeight2.页面滚动位置(最外侧滚动条距离)(最常用)docuemnt.documentElement.scrollTop/scrollLeftwindow.pageYOffset/pageXOffsetwindow.scrollY和scrollX3.window view视口距离显示器位置(标配)wind

2022-05-08 21:43:54 1502

原创 JS 事件event坐标位置

JS事件event坐标位置文章目录JS事件event坐标位置实例:结果:window窗口和document的区别1.clientX clientY :以window窗口为标准2.offsetX offsetY 以目标元素边框为标准3.pageX pageX :以document文档为标准4.screenX screenY :以显示器(屏幕)为标准5.layerX layerY :以目标元素定位父级边框为标准实例:1.div标签设定 宽100px;高:100px;mar

2022-05-08 17:35:29 530

原创 JS setTimeOut实现定时器

JS setTimeOut实现定时器文章目录JS setTimeOut实现定时器第一种第二种第一种setTimeout(function fn() { setTimeout(function () { let time = new Date() console.log(time.toLocaleTimeString()); fn() }, 1000)})第二种function fn() { let time =

2022-05-08 16:27:10 526 1

原创 JS事件委托和事件分派

JS事件委托和事件分派JS事件委托定义:若需要对子元素进行统一的监听管理,可以将其委托给它们共同的父元素,通过event对象对指定子元素进行筛选和操作。<body> <ul class="wrap"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> let oWrap = document

2022-05-04 21:47:16 435

原创 JS阻止冒泡和元素默认事件

JS阻止冒泡和元素默认事件文章目录JS阻止冒泡和元素默认事件1.JS阻止冒泡 :stopPropagation()2.阻止元素默认事件行为preventDefault()onclick + return false接管行为1.JS阻止冒泡 :stopPropagation()<body> <div class="wrap"> <div class="inner"></div> </div> <script> le

2022-04-24 17:49:46 291

原创 JS 事件触发后的三个阶段

JS 事件触发后的三个阶段文章目录JS 事件触发后的三个阶段1.事件捕获阶段2.目标阶段3.事件冒泡阶段过程图形说明1.事件捕获阶段事件由最不精确的目标对象(document)开始触发,一直触发到具体精确的目标元素对象(element)的过程2.目标阶段目标阶段的事件会触发该元素(即事件目标)上的所有监听器3.事件冒泡阶段事件由精确,特定的目标元素对象(element)开始触发,一致触发到最不精确的目标对象(docuemnt)的过程过程图形说明...

2022-04-24 17:21:41 713

原创 JS DOM常用 监听事件

JS DOM常用操作事件文章目录JS DOM常用操作事件鼠标相关事件onclickondblclickonmousedownonmousemoveonmouseuponmouseoutonmouseover键盘相关事件onkeydownonkeypressonkeyuponinput聚焦与失焦相关onbluronfocus加载错误或中断相关onerroronabort域内容改变相关onchangeonloadonunloadonresizeonselectonsubmitonreset鼠标相关事件on

2022-04-24 10:40:34 217

原创 JS DOM删除元素

JS DOM删除元素A.removeChild(B)在元素A中移除元素B<body> <div class="wrap"> <p class="one">张三 </p> </div> <span>王五</span> <script> var oWrap = document.querySelector('.wrap'); var oP = document.qu

2022-04-17 21:36:03 6095

原创 JS DOM标签元素 复制和替换

JS DOM标签元素 复制和替换文章目录JS DOM标签元素 复制和替换元素的复制 :A.CloneNode(B)元素的替换 :A.replaceChild(B,C)元素的复制 :A.CloneNode(B)A表示 需要被复制的元素对象B表示 参数,当传入true表示连带子节点一并复制,false表示复制节点本身,不包括子节点<body> <div class="wrap"> <p>小情歌</p> </div>

2022-04-17 21:29:05 2926

原创 JS DOM创建和添加元素节点

JS DOM创建和添加元素节点文章目录JS DOM创建和添加元素节点第一种: createElement() + createTextNode() + appdChild()第二种: innerHTML第三种: document.write()第四种 : A.insetBefore(B,C)第一种: createElement() + createTextNode() + appdChild()<body> <script> let oP = document.cr

2022-04-17 21:12:39 1292

原创 JS DOM获取 兄弟和子 元素节点

JS DOM获取 兄弟和子 元素节点children :返回 子节点 集合获取子元素节点,返回 标签节点 集合<body> <div class="wrap"> <p>小情歌</p> <p>小情歌</p> </div> <script> let oWrap = document.querySelector(".wrap") console.log(oWrap.

2022-04-17 20:48:31 3558

原创 JS DOM获取元素节点文本内容

JS DOM获取节点文本内容innerText获取纯文本<body> <div class="one"><p><span> 小情歌 </span></p></div> <script> let one = document.querySelector(".one") console.log(one.innerText); ==>"小情歌"</scrip

2022-04-17 20:02:42 8290

原创 JS DOM获取标签/元素style样式

JS DOM获取标签/元素style样式文章目录JS DOM获取标签/元素style样式.stylegetComputedStyle().style只能获取行内样式,不能获取style标签中class的样式<body> <div class="one" style="color:red;width:180px">小情歌</div> <script> let one = document.querySelector(".one")

2022-04-17 17:40:08 2730

原创 JS DOM获取元素属性+操作方法

JS DOM获取元素属性+操作方法文章目录JS DOM获取元素属性+操作方法基础属性title属性tagName属性 : 获取标签名className属性 : 获取类名Nodelist.Length : 获取元素集合长度Nodelist.item(index) : 获取集合中指定元素classList 获取类名集合获取标签文本内容textContent 和 innerText 和innerText获取属性 : getAttribute() 和 .属性名修改属性 setAttribute()检验属性是否存

2022-04-17 17:07:51 6829

原创 JS DOM操作 获取页面元素 / 标签

JS&DOM 获取页面元素对象文章目录JS&DOM 获取页面元素对象通过 id名 :getElementById()通过 类名 :getElementByClassName()通过 标签名 :getElementsByTagName()H5万能获取单个 :querySelector()H5万能获取多个 :querySelectorAll()直接获取body :document.body直接console.log打印id获取通过 id名 :getElementById()通过id获取元

2022-04-17 15:59:16 565

原创 JS 数据处理练习 10例

JS 数据处理案例1.统计字符串中,相同字符的数量let one = "abcabcabcaaa".split("")let two = one.reduce(function (acc, cur, index, arr) { if (!acc[cur]) { acc[cur] = 1 } else { acc[cur]++ } return acc}, {})console.log(two);==>{ a: 6, b: 3, c: 3 }2.找出数

2022-04-10 20:28:10 908

原创 JS Date时间对象格式化+封装

JS Date时间对象+格式化封装文章目录JS Date时间对象+格式化封装首先:获取当前时间1.时间的4种格式化结果+ 和 valueOf() :转化为毫秒级toString() :获取日期和时分 字符串toDateString() :只获取日期 和toTimeString() :只获取时分2.自定义时间 Date()处理3.毫秒级 转 正常Date格式4.Date.now():直接获取当下毫秒级时间5.获取日期 指定部分基础封装:获取当下时间 (函数)高级封装: 自定义格式化,获取当下时间 (函数)计

2022-04-10 15:05:29 1192

原创 JS String字符串方法

JS String字符串方法文章目录JS String字符串方法string.charCodeAt()string.replace()string.substring(<开始位置>,<结束位置>(不包括))string.split()string.slice()string.indexOf()string.includes()string.charCodeAt()charCodeAt() 方法返回 0 到 65535 之间的整数,表示给定索引处的 UTF-16 代码单元,如果

2022-04-03 21:39:06 248

原创 JS Array数组基础和高级遍历方法+练习检验

JS Array方法+练习检验简单方法:array.join()join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。简单理解:数组转为字符串let one = ["a","b","c",null,undefined]let val = one.join("")console.log(val);==>abc删除元素array.pop()pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。let on

2022-04-03 16:26:59 487

原创 JS Object对象方法+验证演示

JS Object方法文章目录JS Object方法Object.is()Object.freeze()Object.assign(target, ...sources)Object.keys()Object.values()Object.entries()Object.is()官方定义:简单理解:Object.is():判断两个值是否为同一个值验证演示:console.log(Object.is(NaN, NaN)); ==>trueconsole.log(NaN ==

2022-04-03 10:53:48 362

原创 JS this的三种指向+练习

JS this的三种指向+基础练习文章目录JS this的三种指向+基础练习事先提示:正常情况下:普通函数对象构造函数this指向练习:练习1练习2练习3练习4事先提示:this的三种指向:1.以构造函数调用2.以函数调用3.以对象方法调用构造函数默认执行操作:1.创建空对象,作为将要返回的对象实例2.将空对象的原型指向构造函数的prototype属性3.将空对象赋值给构造函数内部的this关键字4.开始执行构造函数内部的代码正常情况下:普通函数正常情况:指向windo

2022-04-03 09:22:40 572

原创 JS作用域详解-举例检验复盘

JS作用域详解-举例检验复盘文章目录JS作用域详解-举例检验复盘事先说明:正文开始--难度逐渐加深第一例+总结:第二例+总结:第三例+总结:第四例+总结:第五例+总结:第六例+总结:第七例+总结:第八例+总结:第九例+总结:第十例+总结:第十一例+总结:第十二例+总结:第十三例+总结:事先说明:规则:1.局部域可以访问全局域,全局域访问不了局部域2.暂时只有函数能够成 局部域3.私有变量: 局部域中声明的变量!4.变量首先需寻找到声明符(var等)!5.javaScript静态作用域 ,函

2022-03-29 21:48:12 243

原创 JS相等(==)和全等(===)区别

JS相等(==)和全等(===)区别相等(==)等于运算符(==):1.检查其两个操作数是否相等,并返回Boolean结果。2.它会尝试强制类型转换并且比较不同类型的操作数。全等(===)全等运算符 (===) :1.会检查它的两个操作数是否相等,并返回Boolean结果。2.全等运算符总是认为不同类型的操作数是不同的。...

2022-03-27 16:34:13 872

原创 JS基础数据类型关系-检验判断复盘

JS基础数据类型关系复盘文章目录JS基础数据类型关系复盘typeof检验类型相互关系检验isNaN判断isFinite判断:表示某个值是否为正常的数值布尔值判断基础数据类型:number String Boolean undefined null NaN Object Symboltypeof检验类型console.log(typeof Number) ==>functionconsole.log(typeof String) ==>functionconsole.log(ty

2022-03-27 16:05:35 300

原创 保姆级图片连载:引用阿里图标

保姆级图片连载:引用阿里图标文章目录保姆级图片连载:引用阿里图标1.创建一个盒子2.打开官网,搜索想要的图标3.加入购物车4.查看购物车5.选择自己创建的文件夹,并点击确定,会自动跳转页面6.然后下载压缩包7.保存压缩包中文件,并修改文件名为font,并复制指定代码!8.将复制代码粘贴到HTML中的style标签中9.创建font类名(设定图标大小,种类)和span标签,并将编码写入标签内10.获取编码11.成功使用!1.创建一个盒子2.打开官网,搜索想要的图标3.加入购物车4.查看购物

2022-03-20 17:37:14 60

原创 CSS控制多行文本省略--显示省略号

CSS控制多行文本省略–显示省略号文章目录CSS控制多行文本省略--显示省略号单行文本省略控制多行文本省略初始化一个盒子<body> <div class="box"> 这是一首简单的小情歌,这是一首简单的小情歌,这是一首简单的小情歌 </div></body>/**/<style> .box { width: 200px; border: 2px solid seagreen;

2022-03-20 16:09:15 602

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除