- 博客(58)
- 收藏
- 关注
RSS订阅原创 【js】手写代码系列
1. hasPrototypeProperty判断某属性是否是某对象 原型上的属性知识点：hasOwnProperty() 可以判断属性是否是实例属性。in 可以判断是否可以通过该对象访问指定属性，无论是在实例上还是在原型链上。function hasPrototypeProperty(object,name){ return !object.hasOwnProperty(name) && (name in object);}...
2022-02-23 16:37:37
1271
原创 【js基础】 原型 和 原型链
prototype每个函数都有prototype属性。函数的prototype属性指向一个对象，这个对象是调用该构造函数而创建的实例的原型。__proto__每一个对象都有的属性，__proto__ ，这个属性会指向该对象的原型。所有构造函数都是Function的实例，所有原型对象都是Object的实例除了Object.prototype。Object.__proto__ === Function.prototype;Function.pr
2022-02-23 16:24:53
647
原创 【js基础】数组去重的几种方式
一：元素比较1.双层for循环function uniq (arr){ for(let i = 0 ;i<arr.length;i++){ for(let j = i+1 ;j<arr.length;j++){ if(arr[i] === arr[j]){ arr.splice(j,1); j--; } } } retu
2022-02-22 17:47:44
340
原创 『Promise』用reduce串行执行promise
Why Using reduce() to Sequentially Resolve Promises Works | CSS-Tricks - CSS-Tricks题目：使用Promise实现每隔1秒输出1,2,3const arr = [1,2,3];arr.reduce((pre,cur)=>{ return pre.then(()=>{ return new Promise((resolve, reject) => { .
2022-02-21 19:11:18
477
原创 【js进阶】promise讲解
回调地狱promise 承诺实现承诺 承诺石沉大海 承诺等待结果中……resolve 解决问题reject 拒绝考虑pending 苦苦等待解决异步流程化的一种手段。Promise 是一个构造函数 需要newPromise 参数 excutor 执行器excutor -> resolve reject 函数excutor new Promise 调用// excutor 是同步执行的let promise = new Prom..
2022-02-15 00:37:17
307
原创 【js】面试题
浏览器加载的步骤：onLoad & onReady - CodingWithAlice Blog浏览器环境下JavaScript脚本加载与执行探析之defer与async特性 - TracyLin - 博客园注意：await 其实是操作符，是等待Promise对象产出结果的操作手段，所以async 函数内，在await后面的操作其实等于被包装在then()中，会放在微任务队列中。...
2022-02-15 00:36:18
178
原创 Vue组件间通信的8种方式
1.常用的父子组件通讯方式：props,emit父组件传入属性，子组件通过props来接收，在子组件中就可以用this.xxx方式使用。子组件通过$emit(事件名，参数)向外弹出一个自定义事件，在父组件中的属性监听事件，可以获得子组件中传出来的值// 父组件<hello-world msg="hello world!" @confirm="handleConfirm"><hello-world>// 子组件 props: { msg: { t
2022-02-10 01:04:34
14236
原创 Vue 虚拟DOM和diff算法
vue 中数据改变 -> 虚拟DOM（计算变更）-> 操作DOM -> 视图更新虚拟DOM： js执行速度比较快什么是虚拟DOM？用JS模拟DOM结构为什么需要虚拟DOM？vue中 数据驱动视图，需要用高效方法来控制DOM操作的次数diff算法： 虚拟DOM的核心patch函数两个使用场景：首次渲染时，判断第一个参数是否是一个真实dom元素，是的话就创建空vnode，并且关联一个DOM元素，然后..
2022-02-07 16:07:25
1544
原创 红宝书第八章：对象、类和面向对象编程
属性的类型：js使用一些内部特性来描述属性的特征，但是不能直接访问。属性分两种：数据属性 和 访问器属性1.数据属性数据属性包含一个保存数据值的位置。数据属性有4个特性描述它的行为：[[Configurable]] 表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。 [[Enumerable]] 表示属性是否可以通过 for-in 循环返回。[[Writeable]] 表示属性的值是否可以被修改。 [[Value]..
2022-01-19 15:38:03
481
原创 《JavaScript 设计模式与开发实践》 学习笔记 【第八章：发布-订阅模式（观察者模式）】
定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将会得到通知。在JavaScript开发中，我们一般用事件模型来替代传统的发布-订阅模式。自定义事件：取消订阅：全局的发布-订阅对象：模块间通信：必须先订阅再发布吗？...
2022-01-10 15:56:44
305
原创 《JavaScript 设计模式与开发实践》 学习笔记 【第七章：迭代器模式】
迭代器模式：提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以将迭代过程从业务逻辑中分离出来。在使用迭代器模式后，及时不关心对象的内部构造，也可以按照顺序访问其中的每个元素。内部迭代器和外部迭代器：1.内部迭代器：内部定义好迭代规则，完全接收整个迭代过程，外部值需要一次初始调用。例如foreach，map等。优点：调用方便，外接不关心迭代器内部实现，和迭代器的交互也仅仅是一次初始调用。缺点：迭代规则被提前规定，无法灵活操控。无
2022-01-10 15:11:46
215
原创 《JavaScript 设计模式与开发实践》 学习笔记 【第四章：单例模式】
第四章：单例模式单例模式定义：保证一个类仅有一个实例，并且提供一个访问它的全局访问点。实现：透明的单例类：用户从这个类中创建对象时，可以像使用其他任何普通类一样。用代理实现单例模式：通过引用代理类的方式，完成一个单例模式， 我们将负责管理单例的逻辑移到了代理类proxySingletonCreateDiv 中。这样组合使用更具有普遍性。JavaScript的单例模式：单例模式的核心：确保只有一个实例，并提供全局访问。单例：全局变量？
2022-01-07 16:42:11
476
原创 【基础】节流和防抖的实现方式
节流函数节流：连续触发事件时 n秒内只能执行一次处理函数。两种实现模式：1.时间戳版 2.定时器版// 1. 时间戳版 function throttle(fn,interval){ let previous = 0; return function(){ let now = new Date(); if(now - previous > interval){ fn.apply(this,arguments); previous = n.
2022-01-07 15:30:55
793
原创 《JavaScript 设计模式与开发实践》 学习笔记 【第三章：闭包和高阶函数】
第三章：闭包和高阶函数闭包的形成与 变量的作用域 和 变量的生存周期密切相关。变量的作用域：var 函数作用域， let(ES6)后才有块作用域。ES5中 函数可以用来创造函数作用域，如果当前作用域找不到某变量，会沿着作用域链一直向上找。变量的生存周期：全局变量生存周期是永久的，除非我们主动销毁。局部变量，如果在函数内声明，当退出函数，这些局部变量就会随着函数调用结束销毁。但是： 如果函数返回了一个匿名函数的引用，还可以访问到函数被调用时产生的环境，那么这些局部变量就会一
2022-01-07 14:47:53
303
原创 【基础】JS中new时都做了什么？
JS new一个新对象的时候都做了什么？？创建一个新对象 obj 将这个新对象的__proto__指向构造函数的prototype 将构造函数里面的this指向这个对象obj 返回这个对象obj。注意：问：当函数自身有返回值，new时返回的是？答：如果函数自身返回值 是引用类型，那么返回的还是那个引用类型。如果函数自身返回值 是值类型，那么返回的会是新创建的对象 obj。实现：function _new(constructor, ...args) { v
2022-01-06 16:11:14
235
原创 《JavaScript 设计模式与开发实践》 学习笔记 【第一章：面向对象的JavaScript】
第一章：面向对象的JavaScript动态类型语言 和 静态类型语言：静态类型语言：编译时就确定变量的类型等，需要标注类型。动态类型语言： 编译时无法确定变量类型，只有到执行的时候才能知晓。多态 ：定义：同一个操作作用于不同的对象上时，可以产生不同的解释和不同的执行结果。（给不同对象发送同一个消息时，对象会根据这个消息分别给出不同的反馈）静态类型语言中的多态： 会进行类型检查，所以需要 向上转型，使用超类，（麻雀和 喜鹊 飞 --> 超类为鸟 ）
2022-01-06 15:40:01
433
原创 【面试】js面试题
题目一：if (a == 1 & a == 2 && a == 3) {console.log('success!');}请问 a?知识点：因为== 会进行隐式类型转换，当a进行类型转换时改变值。let a = { _default: 0, toString: function () { return ++this._default ; }}if (a == 1 & a == 2 &...
2022-01-04 22:02:33
341
原创 【实践】微信小程序 new Date(‘YYYY-MM-DD‘) 失效
微信小程序 真机测试中 发现new Date('YYYY-MM-SS') 无效。需要将时间格式转化为 YYYY/MM/SS 才可以。new Date(time.replace(/-/g, '/')
2022-01-04 18:53:57
533
原创 【基础】重写foreach&map&filter&every&some&reduce&reduceRight
1. 重写foreachArray.prototype.myForeach = function(cb){ var _arr = this; var _arg2 = arguments[1] || window; var item; for(var i =0;i<_arr.length;i++){ item = deepCloneES5(_arr[i]); cb(_arr[i],i,_arg2); }}const ar
2021-12-29 14:17:50
466
原创 【基础】使用ES5和ES6实现 深拷贝
var obj = { name: '赵小咩', age: 25, info: { hobby: ['travel', 'eat', { a: 1 }], career: { student: 12, } }}// ES5 版本的深拷贝function deepCloneES5(origin, target) { var tar = target.
2021-12-28 22:48:30
480
原创 【基础】js中的相等性判断
JS中相等性判断ES6版本中，四种相等判断的算法：全等： === 等于： ==零值相等： -0 === +0 同值相等： -0 !== +0 NaN === NaNJS中提供有关相等判断的方法1.严格相等 === Strict Equality2.非严格（抽象/非约束）相等 == Loose (自由的，不守限制的）Equality3.Object.is(v1,v2) ES6 ，判断两个参数是否是同一个值=== 严格相等不进行隐式类型转换 - 类型相
2021-12-28 15:35:29
2208
原创 【基础】浏览器渲染原理 + 理解回流和重绘
浏览器渲染过程：解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，去除不可见元素，生成Render Tree渲染树回流（Layout)：根据生成的渲染树，进行回流，得到节点的几何信息（位置，大小） 重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素。Display：将像素发送给GPU，展示在页面上。构建渲染树流程：从DOM树的根节点开始遍历每个可见节点。 对每个可见节点，找到CSSOM树中对应的规则..
2021-12-27 15:52:40
318
原创 【基础】了解 Babel
Babel： 实际上就是一个JavaScript的编译器，用来将ES6代码转换为浏览器或者其他环境支持的代码Babel 工作流程：大致分三步：Parser 解析源文件 Transform 转换 Generator 生成新文件引擎：acorn如何转化： 通过插件，Babel给每个新语法提供插件，在Babel里面配置什么插件，就转化对应的语法。插件命名形式：@babel/plugin-xxxBabel组成：@babel/preset-env最常用，包
2021-12-23 16:20:34
777
原创 【进阶】搞懂Event Loop
概念：event loop ： 是一个执行模型，在不同地方有不同实现，所以浏览器和nodejs基于不同技术实现了各自的event loop宏队列：taskssetTimeout setIntervalsetImmediate(node) requestAnimationFrame(浏览器)I/O UI rendering (浏览器)微队列：jobsprocess.nextTick(node） PromiseObject.observe MutationObserve
2021-12-22 17:21:46
586
原创 【基础】了解webpack
webpack作用：模块打包。将不同模块的文件打包整合在一起，保证它们之间的引用正确，执行有序。利用打包，可以根据我们自己的业务自由划分文件模块，保证项目结构清晰可读。 编译兼容。利用webpack的loader机制，可以帮助我们对代码做polyfill,还可以编译转换.less,.vue等浏览器无法识别的格式文件，让我们在开发时可以使用新特性和新语法进行开发，提升效率。能力扩展。webpack的plugin机制，可以在实现模块打包和编译兼容基础上，进一步实现如代码压缩，按需加载等一系列功能。帮助我
2021-12-20 14:33:29
56
原创 《图解HTTP》学习笔记
1.TCP/IP 分层分层管理好处：规定好接口协议，那么层次内部设计可以灵活改动。处于应用层之上的应用可以只考虑自己的任务，而不必担心底层传输。应用层 ： 包含FTP，DNS，HTTP传输层 ：包含TCP，UDP协议网络层 ： IP协议（处理数据包，是网络传输的最小单位。链路层 ：硬件部分每层处理时会进行封装，增加首部信息。状态码：2XX：成功请求被正常处理200 OK204 No Content （服务器接收请求成功处理，但是
2021-12-15 16:54:40
2550
原创 【实用】js实现将鼠标的上下滚动改为页面的左右滚动
element.addEventListener('wheel', (event) => { event.preventDefault(); element.scrollBy({ left: event.deltaY < 0 ? -30 : 30, // >0 是下滑，<0是上滑 });});
2021-12-13 11:00:47
1772
原创 【实用】小程序弹层滚动穿透解决方法
[email protected]. page-metapage-meta | 微信开放文档通过page-meta 我们可以直接操作page组件，给他的overflow设置hidden/visible/auto来控制页面的滚动<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" />需注意：page-meta需要放在页面的第一个节点！！...
2021-12-09 15:24:31
576
原创 git 报错 ssh:connect to host github.com port 22
kex_exchange_identification: Connection closed by remote hostConnection closed by 140.82.121.3 port 22fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.突然发现git无法操作，报错如上图。本来..
2021-11-04 11:28:25
854
原创 javascript 事件
1.事件流1.事件冒泡事件从最具体的元素开始触发，然后向上传播。2.事件捕获事件从最不具体的元素开始，向下走。实际上是为了在事件到达最终目标前拦截事件3.DOM事件流DOM规范规定事件流分为3个阶段：事件捕获，到达目标，事件冒泡。事件捕获最先发生，为提前拦截提供可能。然后实际目标接收到事件，最后一个阶段是冒泡。2.事件处理程序1.DOM0事件处理程序：onclick 之类的2.DOM2事件处理程序程序：addEventListene
2021-11-01 11:39:25
354
原创 DOM元素尺寸
1）偏移尺寸 ：元素在屏幕上占用的所有视觉空间（包括内边距，滚动条，和边框【不包含外边距】offsetHeight offsetLeft offsetTop offsetWidth2）客户端尺寸：元素内容及其内边距所占用的空间。cilentWidth cilentHeight3) 滚动尺寸scrollHeight scrollLeft scrollTop scroolWidthscrollWidth和scrollHeight可以用来确定元素内容的实
2021-10-27 15:13:29
196
原创 剑指 Offer 22. 链表中倒数第k个节点
输入一个链表，输出该链表中倒数第k个节点。为了符合大多数人的习惯，本题从1开始计数，即链表的尾节点是倒数第1个节点。例如，一个链表有 6 个节点，从头节点开始，它们的值依次是 1、2、3、4、5、6。这个链表的倒数第 3 个节点是值为 4 的节点。示例：给定一个链表: 1->2->3->4->5, 和 k = 2.返回链表 4->5.思路：快慢指针，快指针先走k步，一直走到尾部，那么慢指针就可以得到倒数第k个元素了。/**.
2021-10-21 22:59:37
54
原创 DOM学习
1.节点层级任何HTML活XML文档都可以用DOM表示为一个由节点构成的层级结构。document是每个文档的根节点，根节点唯一的子节点是<html>元素，称为 文档元素。文档元素是文档最外层的元素，每个文档只能有一个文档元素。HTML页面中，文档元素始终是<html>元素。1.Node类型每个节点都有nodeType属性，表示该节点的类型。Node类型上定义的12个数值常量。1.nodeName 和 nodeValue这两个属性保存有
2021-10-21 19:20:33
107
原创 【基础】 js 数组遍历的6种方式
const arr = [1,2,3,4,5,6,7];1.for循环for(let i = 0; i < arr.length; i++){ console.log(arr[i])}2.for…offor(num of arr){ console.log(num)}3.forEacharr.forEach((item,index)=> { console.log(`${index}:${item}`);})4.mapconst re
2021-10-20 17:12:55
85
原创 二叉树的遍历
1.前序遍历先访问根节点，再访问左右孩子。function preOrder(node){ if(node == null) { return ; } console.log(node); preOrder(node.left); preOrder(node.right);}2.中序遍历先访问左孩子，再访问根节点，再访问右孩子function inOrder(node){ if(node == null) { return ; }
2021-10-14 19:21:39
50
原创 leetcode 06. 从尾到头打印链表
输入一个链表的头节点，从尾到头反过来返回每个节点的值（用数组返回）。示例 1：输入：head = [1,3,2]输出：[2,3,1]限制：0 <= 链表长度 <= 10000解题思路：1. 链表需要顺序读取，从头到尾读取链表，存入数组，最后将数组倒序即可。时间复杂度O(n)，空间复杂度O(n)2.从尾到头与栈后进先出的思想一致，读取链表，存入堆栈，最后将结果弹出即可。3.递归法/** 1.反转数组 **/var reversePri...
2021-10-09 00:00:32
76
原创 leetcode- 03.数组中重复的数字
在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。示例 1：输入：[2, 3, 1, 0, 2, 5, 3]输出：2 或 3 限制：2 <= n <= 100000解题思路：1.只需要找出数组中任意一个重复数字，那么最先想到的就是将数组进行排序，然后进行遍历，返回第一个arr[i]==arr[i+1]的元素即可...
2021-10-08 23:14:25
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人