ZD_SUMMER-CSDN博客

原创函数柯⾥化

重绘与回流当元素的样式发⽣变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。重绘（repaint）：当元素样式的改变不影响布局时，浏览器将使⽤重绘对元素进⾏更新。回流(reflow): 当元素的尺⼨、结构或触发某些属性时，浏览器会重新渲染⻚⾯，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新⻚⾯布局，因此是较重的操作。...

2021-11-07 18:55:52 209 1

简单实现instanceof运算符instanceof运算符是通过判断后面类的prototype对象是否在前面的引用数据类型变量的原型链上,用于判断一个引用数据的真实类型，如果在就返回true，否则就返回false例如：typeof判断引用数据类型是只能得到function、object，无法准确判断一个数据是否为数组，instanceof是可以判断一个数据是否为数组。 const arr = [1,2,3]; console.log(typeof arr) //object c

2021-11-04 19:56:08 172

原创 JSON.parse(JSON.stringify(obj))实现深拷贝的一些问题

JSON.parse(JSON.stringify(obj))实现深拷贝的一些问题JSON.parse(JSON.stringify(obj))可以实现深拷贝，它将一个对象序列化成一个json字符串再反序列成一个js对象。但会出现一些问题。当json里面有时间对象时，序列化结果中会将时间对象转换成为字符串的形式； const obj = { a:1, b:new Date() } console.log(obj) //{a: 1, b: Sun O

2021-10-31 16:07:15 537

原创数组去重的几种方法

数组去重的几种方法利用ES6中的Set集合去重 Array.prototype.unique = function () { const newArr = Array.from(new Set(this)) return newArr } const arr = [true,true,false,1,2,3,4,5,6,1,3,5,6,undefined,undefined] const newArr = arr.unique

2021-10-30 16:15:27 85

原创 Promise.all和Promise.race的区别

Promise.all和Promise.race的区别Promise.all可以将多个Promise实例包装成一个新的Promise实例.它接受一个数组作为参数。数组可以都是Promise对象，也可以是其它值，只有Promise会等待状态改变。当所有的Promise都成功，该Promise为完成，返回值是全部Promise返回值的结果数组。如果有一个失败，则该Promise失败，返回最先失败状态的值。 //存放所有的Promise对象 const ar

2021-10-24 19:56:11 2048

原创箭头函数与普通函数的区别

箭头函数与普通函数的区别箭头函数比普通函数书写更加简洁如果没有要传递参数，就直接写一个空括号即可如果只有一个参数，可以省去外面的括号如果函数体只有一句返回语句没有其它代码，可以省略大括号const fn = () => {}//箭头函数没有要传递的参数可以只写一个括号const test = prop => {}//如果只有一个参数，可以省去外面的括号const bandle = (a,b) => { return a + b}//如果函数体只有一句返回语句没有其

2021-10-20 20:52:23 78

原创 new操作符的实现原理

new操作符的实现原理new 可以用来实例化一个类，从而在内存中分配一个实例对象。new操作符的执行过程：首先创建了一个新的空对象设置原型，将空对象的隐式原型设置为构造函数的 prototype 对象。让函数的 this 指向这个新创建的空对象，执行构造函数的代码。为新创建的空对象添加属性。判断调用函数过后的返回值类型，如果是基本数据类型，则返回创建的对象。如果是引用类型，就返回这个引用类型的对象。代码如下 function _new() { //获取第一个参

2021-10-16 09:38:54 1626

原创 bind、call、apply的区别

bind、call、apply的区别js中有三个改变函数this指向的方法分别是bind、call、apply。call方法接收多个参数，第一个参数是要函数内部this的指向，第二参数往后都是函数接收的参数，当第一个参数为undefined或者null的时候函数的this默认指向window。改变this指向的后会立即调用该函数。(只是临时改变一次this指向) const obj = { a: 1, b: 2 } f

2021-10-13 18:40:59 78

原创 js简单实现深浅克隆

js简单实现深浅克隆浅度克隆：原始类型为值传递，引用类型仍为引用传递。改变原对象中的引用类型中的值，后者对象中的值也会被改变。深度克隆：所有元素或属性均完全复制，与原对象完全脱离，改变原对象中的引用类型中的值，后者对象中的值并不会随其改变。主要思路浅克隆直接复制第一层中的值，深克隆通过递归来实现定义函数将其挂载到Object的原型上，函数接收一个参数，用做判断是深克隆还浅克隆，传递参数为true代表深刻隆，传递false或者不传代表浅克隆。然后通过判断其操作的数据类型来实现如果该数据是fun

2021-10-08 20:59:07 265

原创 js异步加载解决方案

js异步加载解决方案默认情况js是同步加载的，在页面解析的过程中，遇到script外部链接(没有设置async、defer属性)js会阻塞，然后去加载js中的代码并执行，只有当前脚本加载执行完成后，才会继续去解析后面的内容。如果js标签放置头部并且文件过大会导致加载时间过长，页面有较大的空白期，影响用户体验。设置defer属性 <script defer src='index.js'> </script>defter表示延迟，在解析过程中遇到带有 defer 属性的

2021-10-08 19:53:11 492

原创 jQuery中的$.extend方法与$.fn.extend方法

jQuery中的$.extend方法与 $.fn.extend方法jquery为开发插件提供了两个方法:$.extend与 $.fn.extend函数用于将一个或多个对象的内容合并到目标对象（可以实现克隆）参数描述deep如果设为true，则递归合并target待修改对象object1待合并到第一个对象的对象objectN待合并到第一个对象的对象。第一个参数不写（浅克隆），合并过来的引用类型数据只复制地址，后者被合并对象引用类型数据修改，合

2021-10-07 17:57:36 449 1

原创 $(document).ready()与window.onload的区别

$(document).ready()与window.onload的区别执行时间不同window.onload:必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready():网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的内容并没有加载完所以$(document).ready() 先执行，window.onload后执行 window.onload = function(){ console.log(456)

2021-10-06 22:57:42 147

原创 jQuery 实现轮播图效果

jQuery 实现轮播图效果html部分 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0

2021-10-02 20:56:17 529

原创对象的迭代方法Object.values()与Object.entries()

对象的迭代方法Object.values()与Object.entries()ECMAScript2017中新增了两个静态方法，用于将对象内容转化为序列化。这两个静态方法Object.values()和Object.entries()接收一个对象，Object.values()返回对象值的数组，Object.entries()返回键/值对的数组Object.values()方法 var obj = { a:'bar', b:1, c:{}

2021-09-23 22:49:14 270

原创函数防抖与节流

函数防抖与节流在js中，用户频繁触发事件对DOM处理造成性能消耗。防抖：短时间内多次触发同一事件,会重新开始计时，直到等待时长到达后执行一次 //简单封装防抖函数 function debounce(callback) { //定义变量来接收事件开启的定时器 var timer = null; return function () { //记录当前的this var _thi

2021-09-22 23:20:12 86

原创 js预编译

js预编译基本的语法检测例如单词拼写错误，中文没有注释等等。全局预编译特点：在全局作用域下声明的变量，会被提升到脚本块的顶部,并且会成为window对象的属性会生成一个(Gloabl Object) GO对象分析var变量声明，如果变量在GO对象中不存在,直接将变量名作为AO对象的属性名,值为undefined,如果已经存在，不做任何改变分析function函数,将函数名作为GO对象的属性名，值为函数体，如果已存在，直接覆盖函数预编译函数在执行前的一瞬间，会生成一个AO（act

2021-09-05 16:35:31 120

原创二叉树遍历

二叉树遍历结构如下图#mermaid-svg-ZAjPwXTBHRNCbOqE .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-ZAjPwXTBHRNCbOqE .label text{fill:#333}#mermaid-svg-ZAjPwXTBHRNCbOqE .node rect,#mermaid-sv

2021-08-25 20:33:30 83

weixin_52378257的博客

原创实现Promise.all方法