自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 微信小程序setData修改数据

【代码】微信小程序setData修改数据。

2023-04-21 11:48:59 802 1

原创 js事件委托(事件代理)

事件委托的使用以及原理

2023-03-16 11:27:55 2351

原创 script 标签中的 async 和 defer 属性

defer 适合与dom有关联的脚本异步加载 文档解析完成执行async 比较适合第三方的脚本异步加载 立即执行双方都只适用于外部脚本。

2022-09-16 21:07:41 497

原创 for...in...和for...of...的区别是什么

会遍历数组所有的可枚举属性,包括原型,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性。forof不同于forEach,forof是可以break,continue,return配合使用,forof循环可以随时退出循环。一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,可以使用for…遍历的是数组元素的值,而且forof遍历的只是数组内的元素,不包括原型属性和索引。...

2022-07-17 22:44:02 594

原创 ES6——扩展运算符的作用以及使用场景

对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有、,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。上面这段代码,变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(a和b或者y和b),将它们连同值一起拷贝过来。由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。,如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。另外,扩展运算符的解构赋值,不

2022-07-10 21:49:22 1118

原创 Git Flow——项目开发中经典分支管理策略

Git Flow 是最早出现也是最经典的一种分支管理策略,它由两个长期分支和三种类型的临时分支组成。主分支。用于存放经过测试,完全稳定的代码。永远都是可发布分支。开发分支一开始从master分离而来,用于存放基本稳定的代码。当该分支代码稳定,可发布版本时,合并到master分支上。功能模块分支,从dev分支分离而来,用于开发项目功能,当开发新功能时以命名,开发完成后,合并到develop上,合并后删除自己。版本预发布分支,当v1.0.1版本发布时,可以从develop分支签出release-1.0.1,进

2022-06-30 15:11:55 2315 1

原创 Mpx的学习之基础语法了解

文章目录什么是Mpx?对比其他小程序框架什么是Mpx?Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架。Mpx的核心设计理念在于增强,这意味着Mpx是对小程序原生开发标准的增强和扩充,同时也兼容了原生开发标准。Mpx 提供了单文件开发(SFC)、数据响应、增强的模板语法、极致性能、状态管理、编译构建、跨平台能力、完善的周边能力等能力。对比其他小程序框架目前业内的小程序主要分为两类,一类是以uni-app,taro2为代表的静态编译型框架,这类框架以静态编译为主要手段,将Reac

2022-05-17 12:47:28 1110

原创 CSS世界中的“超越“

由于标题不允许出现!符号,所以再来一个清晰的标题超越!important 超越最大max-width超越 !important超越最大(max-width)超越 !important超越 !important 指的是max-width会覆盖width,而且这种覆盖不是普通的覆盖,是超级覆盖。大家应该都知道CSS世界中的!important的权重相当高,比直接在元素的style属性中设置CSS声明还要高,一般用在CSS覆盖JavaScript设置上。但就是这么厉害的!important,直接被max-

2022-05-07 17:14:40 215

原创 JS高级之单例内置对象——Global、Math

文章目录Global对象1、URL编码方式2、eval() 方法3、Global对象属性4、window对象Math对象1、Math对象属性2、min() 和 max() 方法3、舍入方法4、random()方法5、其他方法ES对内置对象的定义是“任何由ES实现提供、与宿主环境无关,并在ES程序开始执行时就存在的对象。” 内置对象不用显示的去实例化,因为它们已经实例化好了。这次我们一起来了解一下两个单例内置对象叭😄Global对象Global 对象是ES中最特别的对象,因为代码不会显式地访问它。G

2022-05-06 22:44:45 569

原创 JS高级之String对象

文章目录基本概念:字符串的操作方法:concat() 拼接字符串并返回新的字符串,可以接受任意多个参数提取子字符串的方法:slice()、substring()、substr()、均接受一到两个参数字符串的位置方法indexOf():从字符串开头查找子字符串lastIndexOf():从字符串末尾开始查找子字符串字符串包含方法startsWith() 方法 :检查开始于索引0的匹配项endsWith() 方法 :检查开始于索引(string.length - substring.length)include

2022-05-05 22:40:03 290 1

原创 JS中函数传参按照值传递

ES语法中所有函数的参数都是按值传递的。探讨函数参数按值传递问题://1、参数被赋值为原始值function add(num){ num += 10; return num;}let count = 20;let result = add(count);console.log(result) //30console.log(count) //20//2、参数被赋值为引用类型function setName(obj){ obj.name = "hihihi"; obj.age

2022-05-04 22:41:39 428

原创 JS之“==“强制转换规则

[] == ![] 为什么是true?== 在进行比较的时候会进行强制转换,转换规则如下:流程:1、首先会判断两者类型是否相同,相同的话就比较两者的大小2、类型不相同的话,就会进行类型转换3、会先判断是否在对比 null 和 undefined ,是的话就返回true4、判断两者类型是否为 string 和 number,是的话就会将字符串转换为number5、判断其中一方是否为boolean,是的话就会把 boolean 转为 number 再进行判断6、判断其中一方是否为object

2022-04-30 21:52:16 887

原创 JS高级程序设计学习之——变量、作用域与内存

文章目录一、原始值与引用值1、动态属性2、复制值3、传递参数⭐⭐二、执行上下文与作用域1、作用域链增强2、变量声明三、垃圾回收1、标记清理(最常用)2、引用计数3、 内存管理a、通过const和let声明提升性能b、隐藏类和删除操作c、内存泄漏4、静态分配与对象池(不展开讨论)总结:一、原始值与引用值ES 变量可以包含两种不同类型的数据:原始值和引用值。原始值就是最简单的数据,保存原始值的变量是按值访问的。引用值则是由多个值构成的对象,引用值是保存在内存中的对象,JS不允许直接访问内存位置,因此也就不

2022-04-30 16:46:22 191 1

原创 ES6&tip1——forEach()能不能改变原数组?

文章目录forEach()介绍forEach()能不能改变原数组?1、数组的元素是基本数据类型2、数组的元素是引用数据类型(直接修改整个元素对象时,无法改变原数组)3、数组的元素是引用数据类型:(修改`元素对象`里的某个属性时,可以改变原数组)如果你需要通过 forEach 修改原数组,建议用 forEach 里面的参数 2 和参数 3 来做,具体请看下面的标准做法forEach()介绍forEach()方法需要一个回调函数(这种函数,是由我们创建但不是由我们调用的)作为参数回调函数中传递三个参数:

2022-04-27 22:53:38 764

原创 为Array实现一个Reader,通过接口getReader获取,Reader 有一个接口 read(n)

为Array实现一个Reader,通过接口getReader获取,Reader 有一个接口 read(n)每次调用会按顺序读区数组的n(默认为1)个元素,调用不会改变数组本身的值,若数组已全部读取完则返回空数组,若传入的参数不为正整数则抛出异常例:const arr = [1, 2, 3, 4, 5, 6]const reader = arr.getReader()console.log(reader.read(‘1’)) // Errorconsole.log(reader.read(-1).

2022-04-25 09:26:56 358

原创 算法之快慢指针

文章目录删除有序数组中的重复项删除排序链表中的重复元素移除元素移动零删除有序数组中的重复项26. 删除有序数组中的重复项这道题我们尝试使用快慢指针来解题:快指针在前面进行对数组元素的遍历,慢指针判断,如果与快指针所指的元素不同,那么指针向右移动,然后进行赋值,最后新数组的长度等于慢指针的索引加1。//这里我们使用快慢指针/** * @param {number[]} nums * @return {number} */var removeDuplicates = function(n

2022-04-21 11:29:47 437 3

原创 Vue响应式原理&Vue中数据的监听

文章目录Observer理解如上图Dep「依赖管理」Watcher理解如上图总结:Vue响应式原理的核心就是Observer、Dep、Watcher。Vue响应式原理理解以后就知道Vue是怎么对数据进行监听的,需要通过对Observe、Dep、Watcher的理解来了解。Observer理解如上图Dep「依赖管理」what? Dep就是帮我们收集【究竟要通知到哪里】,比如下面的案例。我们看到,data中有text和message属性,但是只有message被渲染到页面上,至于text无论怎么变化都

2022-04-20 21:53:00 794

原创 Http强缓存和协商缓存

文章目录一、缓存介绍1、什么是缓存?2、为什么需要缓存?3、哪些资源可以被缓存?——静态资源(css、js、img)二、强制缓存1、定义:2、设置强缓存的方式 Expires & Cache-Control三、协商缓存1、定义2、设置协商缓存的方式 (Last-Modified , If-Modified-Since) & (ETag , If-None-Match)1) Last-Modified , If-Modified-Since2)Etag,If-None-Match对比:一、缓

2022-04-16 09:14:34 2938 3

原创 计算机网络总结(二)——聊聊TCP

文章目录运输层TCP最主要的特点TCP报文段的首部格式TCP的可靠传输机制TCP如何保证数据包传输的有序可靠?TCP三次握手TCP四次挥手运输层因为TCP属于运输层的协议,所以我们首先了解一下运输层。运输层为 应用进程 提供端到端的的逻辑通信。(补充:网络层为 主机之间 提供逻辑通信。)运输层有两种不同的运输协议,即面向连接的TCP和无连接的UDP。TCP最主要的特点1、TCP是面向连接的运输层协议。 也就是说,应用程序在使用TCP协议之前,必需先建立TCP连接。在传送完数据完毕后,必须释放已经

2022-04-07 10:33:57 2259

原创 img设置图片撑开父元素有空白?

基本现象现在我们有一个<div>标签,然后,里面有一张<img>图片,就像这样<div> <img src="/img/xxx.jpg" />x</div>然后,我们可以清晰地发现,图片下方有一段空白空间,大家应该都遇到过类似的问题,实际上,这段空白间隙就是vertical-align和line-height一起导致的。首先,大家一定要意识到这么一点:对于内联元素,vertical-align与line-height虽然看不见

2022-04-06 21:37:21 919

原创 用数组的reduce方法实现map方法

what首先我们需要理解reduce这个方法的语法:arr.reduce(callback,init)//详细写法arr.reduce((prev,cur,index,arr)={ ...},[])* callback (执行数组中每个值的函数,包含四个参数) 1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue)) 2、currentValue (数组中当前被处理的元素) 3、index (当前元素在数组中的索引) 4、ar

2022-04-06 11:11:32 1917

原创 扁平数据结构转Tree

直接上代码let arr = [{ id: 1, name: '部门1', pid: 0 }, { id: 2, name: '部门2', pid: 1 }, { id: 3, name: '部门3', pid: 1 }, { id: 4, name: '部门4', p

2022-04-01 08:33:41 1430 2

原创 JS数组常用的方法总结

文章目录对象继承方法toString( )valueOf()数组转换方法join()栈和队列方法pushpopshiftunshift数组排序方法sort()reverse()对象继承方法数组是一种特殊的对象,继承了对象的Object的toString()和valueOf() 方法toString( )toString() 方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串[注意]该方法的返回值与不使用任何参数调用join()方法返回的字符串相同[1,2,3].toString(

2022-03-31 21:02:31 2608 1

原创 Web性能监测——Performance对象

文章目录一、前言二、简述1、memory2、navigation3、timing4、getEntries()5、now()6、性能指标♥(ˆ◡ˆԅ)一、前言Web Timing API让开发人员通过javascript就能使用浏览器内部的度量结果,给出了页面加载和渲染过程的很多信息,对性能优化非常有价值。本文将详细介绍web Timing API——performance对象。二、简述Web计时机制的核心是window.performance对象。对页面的所有度量信息,包括那些规范中已经定义的和将来

2022-03-14 11:37:07 1190

原创 JS数组遍历的方法

文章目录for优化for (效率最高)forEach(增强for循环)for...in... (效率最低)for...of...(ES6)map(ES6)filter(ES6)some(ES6)erevy (ES6)find(ES6)findIndex(ES6)forvar arr = [1,2,3,4,5]for(var i = 1;i < arr.length;i++){ console.log(arr[i])}优化for (效率最高)使用临时变量,将长度缓存起来,避免重复获取

2022-03-08 17:49:58 530

原创 如何判断变量是否为数组?

Array.isArray(arr); // true arr.__proto__ === Array.prototype; // true 实例对象的隐式原型等于其构造函数的显示原型arr instanceof Array; // trueObject.prototype.toString.call(arr); // "[object Array]"执行结果如下:补充:数据类型的判断1、typeof : 能判断所有值类型,函数。不可对null、对象、数组进行精确判断,因为都返回obje

2022-03-05 22:30:06 335

原创 JS浅拷贝深拷贝——赋值VS浅拷贝深拷贝

文章目录什么是深/浅拷贝,他们跟赋值有何区别?赋值和深/浅拷贝的区别实现一个深拷贝简单版考虑数组循环引用考虑其他类型什么是深/浅拷贝,他们跟赋值有何区别?浅拷贝: 浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果对象的属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址。所以如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝: 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放对象,且修改新对象不会影响原对象。赋值

2022-03-05 22:17:01 630

原创 深拷贝浅拷贝的区别?如何实现一个深拷贝?

深拷贝浅拷贝的区别?如何实现一个深拷贝?一、数据类型存储二、浅拷贝Object.assignslice()concat()拓展运算符三、深拷贝_.cloneDeep()JQuery.extend()JSON.stringify()循环递归四、区别五、总结一、数据类型存储前面文章我们讲到,JavaScript中存在两大数据类型:基本类型引用类型基本类型数据保存在在栈内存中引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中二、浅拷贝浅拷贝,指的是创建新的

2022-03-02 12:41:44 469

原创 计算机网络总结(一)

计网总结什么是网络协议,为什么要对网络协议说说HTTP常用的状态码及其含义HTTP常用的请求方式,区别和用途如何理解 HTTP 协议是无状态的从浏览器地址栏输入 url 到显示主页的过程POST和GET有哪些区别?在交互过程中如果数据传送完了,还不想断开连接怎么办,怎么维持?HTTP 如何实现长连接?在什么时候会超时HTTP 和 HTTPS的区别什么是网络协议,为什么要对网络协议网络协议是计算机在通信过程中要遵循的一些约定好的规则。网络分层的原因:○ 易于实现和维护,因为各层之间是独立的,层与层之间

2022-03-02 09:24:46 7688 9

原创 说说JavaScript中的数据类型

JS数据类型一、基本类型NumberStringBooleanUndefinedNullSymbol二、引用类型三、存储区别基本类型引用类型在js中,我们可以分成两种类型:基本类型复杂类型区别:存储位置不同一、基本类型Number数值最常见的整数类型格式则为十进制,还可以设置八进制(零开头)、十六进制(0x开头)let intNum = 55 // 10进制的55let num1 = 070 // 8进制的56let hexNum1 = 0xA //16进制的10浮点类型则在数.

2022-03-01 21:38:52 493 1

原创 HTTP/1.0,1.1,2.0 的区别

HTTP/1.0,1.1,2.0 的区别HTTP/1.0HTTP/1.1HTTP/2.0长连接和短连接?HTTP/1.0默认使用短连接,每次请求都需要建立TCP连接。服务完成立即断开,开销大;错误状态响应码少不支持断点续传。它可以设置 Connection:keep-alive 这个字段HTTP/1.1默认长连接,即TCP连接默认不关闭,可以被多个请求复用;分块传输编码,即服务端每产生一块数据,就发送一块,用“流模式”取代“缓存模式”。管道机制,即在同一个TCP连接里面,客户端可以同时

2022-03-01 15:59:34 2010 1

原创 JS原型及原型链总结

原型&原型链一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点2、`工厂函数`3、构造函数二、使用原型三、原型概念辨析原型链练习一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点想要介绍原型,就不得不提为什么我们要使用原型,在js早期,我们创建一个对象,比较流行的做法是使用对象字面量去创建一个对象,例如:const person = { name: "wywy", age: 21,

2022-03-01 09:09:44 1025 7

原创 计网复习—三次握手和四次挥手

三次握手三次握手其实就是指建立一个TCP连接时,需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接受能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。实质上就是连接服务器指定端口,建立TCP连接,并同步连接双方的序列号和确认号,交换TCP窗口大小信息。刚开始客户端处于Closed的状态,服务端处于Listen状态。进行三次握手:第一次握手: 客户端给服务端发一个SYN报文,这时首部中的同部位SYN = 1, 同时选择一个初始序号seq = x 。TC

2022-02-27 21:14:16 2682 1

原创 Vue组件之间的通信方式

Vue组件之间的通信方式1、通过 props 传递2、$emit触发自定义事件3、ref4、EventBus5、$parent 或 $root6、$attrs 与 listeners7、provide 与 inject8、Vuex1、通过 props 传递适用场景:父组件传递数据给子组件父组件在使用子组件标签中通过字面量来传递值<Children :msg= "msgfather" age=21/> 子组件设置props属性,定义接受父组件传递过来的参数props:{ age

2022-02-26 21:02:29 716 6

原创 用js实现简单的防抖节流

let timer;//防抖:在n秒时间内,不停的被触发,只执行最后一次function shake(param) { console.log(timer, "111") if (timer) { console.log(timer, "222") clearTimeout(timer) } timer = setTimeout(() => { console.log('防抖') }, 1000)}//节

2022-02-19 21:08:58 2263 1

转载 浅谈虚拟列表实现与原理分析

了解App一些常用的方法,很不错的一篇文章,有图解很清晰⭐!浅谈虚拟列表实现与原理分析

2022-02-19 19:58:29 214 1

原创 为什么使用 setTimeout 实现 setInterval?怎么模拟?

Why?setInterval 的作用是每隔一段指定时间执行一个函数,但是执行不是真的到了时间立即执行,它真正的作用是每隔一段时间将事件加入事件队列中去,只有当 当前的执行栈为空的时候,才能去从事件队列中取出事件执行。所以可能会出现这样的情况,就是当前执行栈执行的时间很长,导致事件队列中累积了多个定时器加入的事件,当执行栈结束的时候,这些事件会依次执行,因此就不能到间隔一段时间执行的效果。针对 setInterval 的这个缺点,我们可以使用 setTimeout 递归调用来模拟 setInterval

2022-02-19 17:35:40 788 2

原创 JS运行机制单线程

js单线程Why?js是单线程How?单线程的JS是怎么工作的?Why?js是单线程首先我们说一下JS 为什么是单线程, 这就要从它的用途谈起。作为浏览器脚本语言,JS的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,复杂的多线程并不适用于JS,假如现在使用了两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个DOM节点,这时应该以哪一个线程为主呢?所以呢,JS 便采用了单线程,这已经成了JS的核心特征!How?单线程的JS是怎么工作的?这里我们要补充几个概念:同步任

2022-02-18 20:36:42 693

原创 SPA首屏加载速度慢怎么解决?

一、什么是首屏加载?首屏时间,指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容。首屏加载可以说是用户体验中最重要的环节。关于计算首屏时间通过DOMContentLoad或者performance来计算出首屏时间// 方案一:document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful paint

2022-02-17 21:11:06 1889 1

原创 计算机网络——OSI模型以及TCP/IP模型

文章目录一、OSI七层模型划分二、TCP/IP协议是什么?划分五层模型四层模型三、 OSI 参考模型与 TCP/IP 参考模型的区别先放两张对比图:一、OSI七层模型OSI (Open System Interconnect)模型全称为开放式通信系统互连参考模型,是国际标准化组织 (ISO) 提出的一个试图使各种计算机在世界范围内互连为网络的标准框架划分各层功能:应用层:应用层位于OSI模型的第七层,作用是通过应用程序之间的交互来完成特定的网络应用。该层协议定义了应用进程之间的交互规则,

2022-02-17 15:18:54 2459 1

空空如也

空空如也

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

TA关注的人

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