![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
面试
文章平均质量分 62
面试
解忧杂货铺Q
但行好事,莫问前程
展开
-
获取一个长度为10的随机不重复数组
如何获取一个随机不重复数组方法1const randomNum = () => Math.floor(Math.random() * 10);const count = 30;const uniqueList = [];for (let index = 0; index < count; index++) { const num = randomNum(); if(!uniqueList.includes(num)){ uniqueList.push(num)原创 2021-04-29 00:09:11 · 1349 阅读 · 0 评论 -
js数组去重个N种方法
案例var arr = [1, 1, true, true, 'true', null, 'null', NaN, 'NaN', undefined, { test: 1}, { test: 1}, { test: 2}];解决方案// 方法1// 使用ES6 Set var result = [...new Set(arr)];console.log(JSON.stringify(result));// 无法过滤Object//[1,true,"true",nu原创 2021-04-12 12:09:13 · 117 阅读 · 0 评论 -
深入了解 HTML5 History API,前端路由的生成,解读 webpack-dev-server 的 historyApiFallback 原理
文章目录1、history2、两种路由模式的生成3、historyApiFallback1、historyHistory 接口,允许操作浏览器的 session history,比如在当前tab下浏览的所有页面或者当前页面的会话记录。history属性1、length(只读)返回一个总数,代表当前窗口下的所有会话记录数量,包括当前页面。如果你在新开的一个tab里面输入一个地址,当前...原创 2019-09-21 15:01:05 · 11779 阅读 · 1 评论 -
函数防抖debounce与函数节流throttle实现及原理
文章目录前言函数节流throttle函数防抖前言函数节流: 指定时间间隔内只会执行一次任务;函数防抖: 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行;场景:比如连续输入文字后发送 AJAX 请求进行验证,此时需要使用函数节流,只执行一次。如果是判断浏览器窗口resize时,每次resize都调用处理函数,又很浪费浏览器性能。此时应该采用函数防抖,每隔一段时间执行一次。函数节流throttle规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只原创 2021-03-25 22:13:56 · 274 阅读 · 0 评论 -
手写Function.prototype.bind()
Function.prototype.bind()bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用const obj = { name: 'cat', getName: function(){ return this.name; }}console.log(obj.getName());//此时this指向obj// 结果为catfn = obj.getNam.原创 2021-03-25 08:08:16 · 143 阅读 · 0 评论 -
浏览器输入网址到页面渲染都发生了什么?
键入域名比如baidu.com----> 判断缓存是否存在 ----> TCP解析URL中对应的IP ---> 根据IP建立TCP连接(三次握手)---> HTTP发送请求传输数据 ----> 服务器处理请求,返回请求数据 ----> 浏览器渲染页面,构建DOM ----> 构建完成,关闭TCP连接(四次挥手)URLURL 代表着是统一资源定位符scheme://host.domain:port/path/filename说明:scheme - 定义原创 2021-03-24 19:44:14 · 261 阅读 · 0 评论 -
repaint(重绘)和reflow(回流)
文章目录前言reflow(回流)repaint(重绘)前言repaint(重绘)和reflow(回流),其实是老生常谈的事情,一直从没正式写过总结,晚上偶然想起,不如简单写一下。首先我们说下,浏览器的简单的渲染流程如下:解析html构建DOM树 ----> 解析css构建CSS树:此时html和css被解析成树形的数据结构构建Render树:将DOM树和CSS树结合形成的Render树布局Render树:有了Render树,浏览器已经知道那些有哪些节点,各个节点的css定义和以及它们的原创 2021-03-24 12:37:58 · 1276 阅读 · 0 评论 -
子元素如何在父元素中水平垂直居中
文章目录1、父box高度固定,子box宽高固定2、父box高度固定,子box高度不固定3、父box高度固定,子box无论宽度高度固不固定1、父box高度固定,子box宽高固定方法1 <div class="box"> <div class="box-cont"> 水平垂直居中 <br> </div> </div> <style> .box { position: relative原创 2021-03-23 21:08:54 · 154 阅读 · 0 评论 -
(孔乙己茴香豆的的“茴”字有几种写法)三栏布局两边固定中间自适应
文章目录1、margin负值法2、自身浮动法3、绝对定位法4、flex布局5、table布局6、grid布局1、margin负值法中间部分一定放最上面,左浮动创建BFC。左右部分均左浮动,左侧负margin值一定等于中间部分的宽度,右侧负margin值等于右侧部分的宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2021-03-23 14:30:03 · 365 阅读 · 0 评论