weixin_52378257的博客

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

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

数组去重的几种方法利用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

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

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

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

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

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

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

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

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

二叉树遍历结构如下图#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

js原型链与作用域

arguments映射的问题什么是arguments：arguments 是一个对应于传递给函数的参数的类数组对象。在正常的情况下为函数设置几个形参,调用时就传递几个实参，这时arguments会和参数一一对应形成映射关系 function fun(a,b,c){ c = 30 console.log(a,b,c) // 1,2,30 console.log(arguments) // Arguments(3)[1,2,30]