![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
面试题
常见面试题陷阱
lianjiuxiao
这个作者很懒,什么都没留下…
展开
-
手写promise.all
promise.all 有以下特点promise.all()返回值是new Promise需要用一个数组存放每一个promise的结果值遍历参数数组,判断是否是promise,是的话执行得到结果后压入结果数组;否则直接放入结果数组。当每个都成功执行后,resolve(result)当有一个失败,rejectfunction isPromise(obj) { return !!obj && (typeof obj === 'object' || typeof原创 2021-04-29 09:58:50 · 167 阅读 · 0 评论 -
webpack优化
Webpack优化可以分为优化开发体验和优化输出质量两部分1、优化开发体验优化开发体验的目的是为了提升开发时的效率,其中又可以分为以下几点: 优化构建速度。在项目庞大时构建耗时可能会变的很长,每次等待构建的耗时加起来也会是个大数目。 4-1 缩小文件搜索范围 4-1-1 在配置 Loader 时通过 include 去缩小命中范围 4-1-2 优化 resolve.modules 配置,指明存放第三方模块的绝对路径..原创 2021-04-27 10:40:52 · 130 阅读 · 0 评论 -
js手动实现 Reduce 方法
Array.prototype.myReduce = function (fn, initValue) { if (initValue === undefined && !this.length) { throw new Error('myReduce of empty array with no initial value'); } // let result = initValue === undefined ? this[0] : initValue;不要这样.原创 2021-04-25 11:26:11 · 374 阅读 · 1 评论 -
兔子数列
兔子在出生两个月后,就有繁殖能力,一对成年而有繁殖力的兔子每个月能生出一对小兔子来。假设一年以后所有兔子都不死,那么一对小兔子一年以后可以繁殖多少对兔子?1,递归function add(n){ if(n <= 2){ return 1; }else{ return add(n-1) + add(n-2); }}2,尾递归优化function add(n,res1 =1,res2 = 1){ if(n <=原创 2021-04-08 21:53:34 · 259 阅读 · 0 评论 -
web前端柯里化面试题
定义实现柯里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。1.实现一个函数功能:sum(1,2,3,4…n)转化为 sum(1)(2)(3)(4)…(n)// 使用柯里化 + 递归function curry ( fn ) { var c = (...arg) => (fn.length === arg.length) ? fn (...arg) : (...arg1) =>原创 2021-03-26 11:22:50 · 386 阅读 · 0 评论 -
js实现deepCopy
function deepClone (data) { const type = metaType(data); let obj = null; if (type === 'array') { obj = []; for (let i = 0; i < data.length; i++) { obj.push(deepClone(data[i])); } } else if (type === '.原创 2021-03-25 15:47:10 · 491 阅读 · 0 评论 -
Javascript频繁操作性能优化——防抖和节流
在前端开发中,会有一部分用户的行为会频繁的触发事件执行,而对于DOM操作、资源加载等耗费性能的处理,很有可能造成页面卡顿,甚至浏览器崩溃。函数节流(throttle)和函数防抖(debounce)就是为了处理类似需求应运而生的。一、防抖函数防抖就是函数在频繁需要触发情况时,只有等足够空闲的时间才去执行一次。好像公交车司机等人都上车以后才出站一样。比如我们在做搜索框的时候,要根据搜索的内...原创 2019-03-12 09:24:33 · 701 阅读 · 0 评论 -
移动端视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />initial-scale: 初始的缩放比例; minimum-scale: 允许用户缩放到的最小比例; maximum-scale: 允许用户缩放到的最大比例; user-scalable: 用户是否可以手动缩放; ...原创 2021-03-25 11:41:02 · 126 阅读 · 0 评论 -
前端性能优化都有哪些
1,SEO优化 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减小, title 值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面 title 要有所不同; description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同; keywords 列举出重要关键词即可 语义化的 HTML 代码,符合W3C规范:语义化代码让搜索引擎容易理解网页 重要内容 HTML 代码放在最前:搜索引擎原创 2021-03-24 18:06:40 · 273 阅读 · 0 评论 -
js宏任务与微任务
当我们打开网站时,网页的渲染过程就是一大堆同步任务,比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务,就是异步任务。关于这部分有严格的文字定义,但本文的目的是用最小的学习成本彻底弄懂执行机制,所以我们用导图来说明:导图要表达的内容用文字来表述的话:同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。 当...原创 2019-04-24 17:14:54 · 1831 阅读 · 0 评论 -
事件委托
什么是事件委托 事件代理 ( Event Delegation ) ,又称之为事件委托。是 JavaScript 中常用的绑定事件的 常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监 听的职务。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好处是可以提高性能 可以大量节省内存占用,减少事件注册,比如在 table 上代理所有 td 的 click 事件就非常棒 可以实现当新增子对象时无需再次对其绑定 ...原创 2021-03-18 19:48:38 · 97 阅读 · 0 评论 -
web前端兼容性问题总结
1.HTML对象获取问题FireFox:document.getElementById("idName");ie:document.idname或者document.getElementById("idName").解决办法:统一使用document.getElementById("idName");2. const问题说明:Firefox下,可以使用const关键字...原创 2019-04-10 15:06:29 · 3355 阅读 · 0 评论 -
CSS3有哪些新特性
1:新特性 新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点) 圆角 (border-radius:8px) 多列布局 (column) 阴影和反射 (Shadow\Reflect) 文字特效 (text-shadow) 线性渐变 (gradient) 旋转,缩放,定位,倾斜 (transform) 动画 (Animation) 多背景,背景裁剪2: 新增伪类 - 伪元素p:first-of-type 选择属..原创 2021-03-18 17:44:28 · 1136 阅读 · 0 评论 -
js new 手写实现 new做了哪些事情
new到底做了哪些事情(1) 创建一个新对象;(2) 将构造函数中的this指向该对象(3) 执行构造函数中的代码(为这个新对象添加属性) ;(4) 返回新对象。function _new(obj, ...rest){ // 基于obj的原型创建一个新的对象 const newObj = Object.create(obj.prototype); // 添加属性到新创建的newObj上, 并获取obj函数执行的结果. const result = obj.ap...原创 2021-03-18 10:12:56 · 205 阅读 · 0 评论 -
前端常用函数实现
1:创建一个指定长度的可遍历的数组var a = Array.apply( null, { length: 3 } ); // [ undefined, undefined, undefined ]原创 2020-12-03 15:18:10 · 338 阅读 · 0 评论 -
this, bind,call,apply 面试题
了解 this 嘛,bind,call,apply 具体指什么它们都是函数的方法call: Array.prototype.call(this, args1, args2]) apply: Array.prototype.apply(this, [args1, args2]) :ES6 之前用来展开数组调用, foo.appy(null, []),ES6 之后使用 ... 操作符New 绑定 > 显示绑定 > 隐式绑定 > 默认绑定 如果需要使用 bind 的柯里化和 app原创 2021-03-16 16:24:38 · 257 阅读 · 0 评论 -
JS 隐式转换,显示转换
一般非基础类型进行转换时会先调用 valueOf,如果 valueOf 无法返回基本类型值,就会调用 toString字符串和数字"+" 操作符,如果有一个为字符串,那么都转化到字符串然后执行字符串拼接 "-" 操作符,转换为数字,相减 (-a, a * 1 a/1) 都能进行隐式强制类型转换[] + {} 和 {} + []复制代码布尔值到数字1 + true = 2 1 + false = 1转换为布尔值for 中第二个 while if 三元表达式 || ...原创 2021-03-16 15:26:40 · 187 阅读 · 1 评论 -
事件冒泡和事件捕获
1、事件阶段如下图所示一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。(1)捕获阶段(Capture Phase)事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。(2)目标阶段(Target Phase)当事件到达目标节点的,事件就进入了目标阶段。事件在目标节点上被触发,然后会逆...原创 2021-03-15 17:01:39 · 929 阅读 · 0 评论 -
reflow(回流)和repaint(重绘)
reflow(回流)和repaint(重绘)简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html)reflow:例如某个子元素样式发生改变,直接影响到了其父元素以及往上追溯很多祖先原创 2021-03-10 23:34:42 · 154 阅读 · 0 评论 -
Math.round(),Math.ceil(),Math.floor()的区别
1.Math.round():根据“round”的字面意思“附近、周围”,可以猜测该函数是求一个附近的整数,看下面几个例子就明白。小数点后第一位<5正数:Math.round(11.46)=11负数:Math.round(-11.46)=-11小数点后第一位>5正数:Math.round(11.68)=12负数:Math.round(-11.68)=-12...原创 2019-02-20 16:24:30 · 106 阅读 · 0 评论 -
js 递归运用 求阶乘 求斐波那契数
//求阶乘function factorial(n) { if (n === 1 || n === 0) { // 基线条件 return 1; } return n * factorial(n - 1); // 递归调用}//求斐波那契数列function fibonacci(n){ if (n < 1) return 0; // {1} if (n <= 2) return 1; // {2} return fibonacci(n - 1) + .原创 2021-03-09 17:00:52 · 96 阅读 · 0 评论 -
Number.MAX_SAFE_INTEGER 后端long类型的ID 导致前端 精度丢失
Number.MAX_SAFE_INTEGERNumber.MAX_SAFE_INTEGER常量表示在JavaScript 中最大的安全整数(maxinum safe integer)(253- 1)。描述MAX_SAFE_INTEGER 是一个值为9007199254740991的常量。因为Javascript的数字存储使用了IEEE 754中规定的双精度浮点数数据类型,而这一数据类型能够安全存储-(253- 1)到253- 1 之间的数值(包含边界值)。这里安全存...原创 2021-03-09 11:22:42 · 689 阅读 · 1 评论 -
js使用类 实现链表
“我们先来看看它们的职责”push(element):向链表尾部添加一个新元素。 insert(element, position):向链表的特定位置插入一个新元素。 getElementAt(index):返回链表中特定位置的元素。如果链表中不存在这样的元素,则返回undefined。 remove(element):从链表中移除一个元素。 indexOf(element):返回元素在链表中的索引。如果链表中没有该元素则返回-1。 removeAt(position):从链表的特定位置移除一原创 2021-03-08 18:24:51 · 179 阅读 · 2 评论 -
AMD && CMD ES6 模块
前言JavaScript初衷:实现简单的页面交互逻辑,寥寥数语即可;随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀问题:这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码一、模块模块化:是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。在理想状态下我们只原创 2021-03-04 15:12:13 · 248 阅读 · 1 评论 -
vue 混入 相同的对象,钩子的合并规则
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。const myMixin = { data() { return { message: 'hello', foo: 'abc' } }}const app = Vue.createApp({ mixins: [myMixin], data() { return { message:原创 2021-02-24 15:39:04 · 807 阅读 · 0 评论 -
vue面试题整理
1、对MVVM的理解MVVM分为Model、View、ViewModel。Model代表数据模型,数据和业务逻辑都在Model层中定义;泛指后端进行的各种业务逻辑处理和数据操控,对于前端来说就是后端提供的 api 接口。View代表UI视图,负责数据的展示;视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建 。ViewModel负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;Model和View并无直接关联,而是通过ViewModel来进行联系的,M...原创 2021-02-24 09:59:49 · 1295 阅读 · 3 评论 -
了解http3.0 说一下http的发展历程
谈未来之前,咱们先讲讲现实。你了解 HTTP 吗?这个定义于 1991 年的协议是用来管理 Web 的。它的全名是超文本传输协议,让你可以从网页中获取资源,网页数据从 Web 服务器传输到你的浏览器上。它基于较低级别的协议——TCP,这里是重点——而且它是无状态的。这意味着每个请求都是完全独立的。页面上显示的每个 GIF 图片都在互联网上独立存在,这对这些 GIF 图片本身来说是好事。但对我们来说,这样的一个系统是有些支离破碎的。问题在于每个请求一次只会查找一个文件。每次都要创建一个昂贵的 T.原创 2021-02-05 17:19:01 · 1004 阅读 · 0 评论 -
扫码登录技术原理
需求介绍 首先,介绍下什么是扫码登录。现在,大部分同学手机上都装有qq和淘宝,天猫等这一类的软件。而开发这些app的企业,都有他们相对应的网站。为了让用户在使用他们的网站时,登录更加方便和安全。这些企业提供了,使用手机,扫一扫,就可以登录的服务。网页登录时的效果如下: 有很多小伙伴可能会感到很神奇,网页上只是显示了个二维码,它怎么就知道是哪个手机扫到了二维码,并且进行登录的呢?而且,登录完成以后,还能直接把用户信息显示给...原创 2021-01-28 16:33:06 · 336 阅读 · 0 评论 -
理解 构造函数 实例化对象 原型对象 原型链 继承 constructor prototype __proto__
function foo(something) { this.a = something; } var obj1 = {}; var bar = foo.bind( obj1 );typeof foo // "function"typeof obj1 // "object"typeof bar // "function"var bar = new bar(4);typeof bar //"object"bar //foo{a: 4}a: 4__proto__: Objectob..原创 2020-11-19 11:56:09 · 518 阅读 · 0 评论 -
js 中 内置对象 Function Object 和 {} 对象之间的关系 及其 prototype constructor instanceof的使用
内置对象 Object 构造函数创建一个对象包装器。new Object() // {}内置对象 Function 构造函数创建一个新的 Function 对象。 new Function() //ƒ anonymous() {}Function // ƒ Function() { [native code] }Function.prototype // ƒ () { [native code] }Function.constructor // ƒ .原创 2021-01-28 15:34:05 · 262 阅读 · 0 评论 -
vue 2.0 哪些不为人知的bug
1: this.$router.query 递参数类型number,刷新后自动转成字符串解决办法:类型强转2: Vue不能检测以下变动的数组当使用索引直接改变或者设置一个项时,例如:this.items[index] = newvalue。 当修改数组的长度时,例如:this.items.lenght = newValue解决办法:第一类解决办法:// Vue.setthis.$set(this.items, indexOfItem, newValue)// Ar...原创 2021-01-23 15:06:36 · 540 阅读 · 0 评论 -
函数柯里化curry 与合成函数 compose
柯里化curry 实现JS 函数合成是把多个单一参数函数合成一个多参数函数的运算。例如,a(x) 和 b(x) 组合为 a(b(x)),则合称为 f(a,b,x)。注意,这里的 a(x) 和 b(x) 都只能接收一个参数。如果接收多个参数,如 a(x,y) 和 b(a,b,c),那么函数合成就比较麻烦。这时就要用到函数柯里化。所谓柯里化,就是把一个多参数的函数转化为单一参数函数。有了柯里化运算之后,我们就能做到所有函数只接收一个参数。var add = function (x) { ..原创 2021-01-14 17:49:35 · 354 阅读 · 0 评论 -
一个简单的例子了解 js变量提升
// 先了解一下 函数优先 function a(){}; var a; // typeof a 'function'foo(); // 1 var foo; function foo() { console.log( 1 ); } foo = function() { console.log( 2 ); };// 会输出 1 而不是 2 !这个代码片段会被引擎理解为如下形式:function foo() { console.log( 1 ); } foo(.原创 2020-11-18 15:04:57 · 127 阅读 · 0 评论 -
vue双向绑定原理
vue双向绑定原理分析当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理。简易vue源码地址:https://github.com/jiangzhenfei/simple-Vue1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。我们先来看Object.原创 2020-12-31 14:43:39 · 337 阅读 · 0 评论 -
js 内置对象目录
值属性这些全局属性返回一个简单值,这些值没有自己的属性和方法。Infinity NaN undefined globalThis函数属性全局函数可以直接调用,不需要在调用时指定所属对象,执行结束后会将结果直接返回给调用者。eval() uneval() isFinite() isNaN() parseFloat() parseInt() decodeURI() decodeURIComponent() encodeURI() encodeURIComponent()原创 2020-12-30 15:04:35 · 65 阅读 · 0 评论 -
常用的ES6语法
1. let、const 和 block 作用域let 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var:var a = 2;{ let a = 3; console.log(a); // 3}console.log(a); // 2同样在块级作用域有效的另一个变量声明方式是 const,它可以声明一个常量。ES6 中,const 声明...原创 2019-03-26 14:56:07 · 204 阅读 · 0 评论 -
面试题: ListToTree AND TreeToList 实现 扁平结构和树状结构互转
const list = [ {id: 1, pid: 0}, {id: 2, pid: 0}, {id: 3, pid: 0}, {id: 11, pid: 1}, {id: 12, pid: 1}, {id: 13, pid: 1}, {id: 21, pid: 2}, {id: 22, pid: 2}, {id: 23, pid: 2}, {.原创 2020-12-21 17:12:42 · 990 阅读 · 0 评论 -
宏任务 微任务 陷阱
console.log('script start')async function async1() { await async2() console.log('async1 end')}async function async2() { console.log('async2 end')}async1()setTimeout(function() { console.log('setTimeout')}, 0)new Promise(resolve => {.原创 2020-12-17 16:43:37 · 98 阅读 · 0 评论 -
箭头函数与 this指向
const controller = { makeRequest: () => { console.log(this) // this 是 window }, helper: () => { console.log(this) } };const controller = { makeRequest: function(){ console.log(this) // this 是 controller }, helper: (.原创 2020-12-17 15:39:57 · 55 阅读 · 0 评论 -
ES6新增特性
1:变量定义 const let2: 解构3:箭头函数 核心 this的指向4:模板字面量 ``5:spread/rest 对象展开6:子符串 数组新增方法console.log(str.includes("de"));//true,字符串是否包含deconsole.log(str.endsWith("ef"));//true,字符串是否以ef结尾console.log(str.startsWith("cd"));//true,字符串是否以cd开头conso...原创 2020-12-17 15:16:32 · 1402 阅读 · 0 评论