自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 前端一面手写面试题总结

由于后面没有传入参数,等于返回的temp函数不被执行而是打印,了解JS的朋友都知道对象的toString是修改对象转换字符串的方法,因此代码中temp函数的toString函数return m值,而m值是最后一步执行函数时的值m=12,所以返回值是12。浅拷贝是指,一个新的对象对原始对象的属性值进行精确地拷贝,如果拷贝的是基本数据类型,拷贝的就是基本数据类型的值,如果是引用数据类型,拷贝的就是内存地址。(4)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。

2023-03-13 18:18:03 496 1

原创 写个JS深拷贝,面试备用

我们先判断其类型,再对对象和数组分别递归调用,如果是基本数据类型就直接赋值,至此,我们已经可以完成一个基础的深拷贝,但是还远远不够,因为我们这里只对数组做了类型判断,其他默认都是object,但是实际情况还会有很多类型,例如,RegExp,Date,Null,Undefined,function等等很多的类型,所以接下来我们将其完善,加上所以判断,由于类型比较多,我们可以把对象的判断单独抽离出来,接下来一起完善它吧:在这之前我们还需要考虑的一个点就是 关于js的。

2023-03-13 18:15:55 360

原创 京东前端手写面试题集锦

执行temp(5),这个函数内执行add(m+n),n是此次传进来的数值5,m值还是上一步中的7,所以add(m+n)=add(7+5)=add(12),此时m=12,并且返回temp函数。执行temp(4),这个函数内执行add(m+n),n是此次传进来的数值4,m值还是上一步中的3,所以add(m+n)=add(3+4)=add(7),此时m=7,并且返回temp函数。event bus既是node中各个模块的基石,又是前端组件通信的依赖手段之一,同时涉及了订阅-发布设计模式,是非常重要的基础。

2023-03-13 18:15:40 654

原创 几个常见的js手写题,你能写出来几道

浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。观察者模式观察者Observer和主体Subject都比较清晰,而发布订阅模式的发布和订阅都由一个调度中心来处理,发布者和订阅者界限模糊。其实面试的时候主要靠死记硬背,因为有一次 20 分钟让我写 5 个实现(包括promise),,,谁给你思考的时间。函数的参数的处理逻辑,待 Promise 操作有了结果就会执行。

2023-03-13 18:15:26 293

原创 京东前端二面常考手写面试题(必备)

发布订阅者模式,一种对象间一对多的依赖关系,但一个对象的状态发生改变时,所依赖它的对象都将得到状态改变的通知。

2023-03-01 12:06:15 646

原创 从零手写react-router

蛮多同学可能会觉得很复杂, 说用都还没用明白, 还从0实现一个, 其实router并不复杂哈, 甚至说你看了这篇博客以后, 你都会觉得router的核心原理也就那么回事至于帮助我们实现了什么东西我就不过多阐述了, 这个直接移步官方文档, 我们下面直接聊实现另外:源码有依赖两个库和history, 所以我这里也就直接引入这两个库了,虽然下面我都会讲到基本使用, 但是同学有时间的话还是可以阅读以下官方文档routerhookshookshooksreacthookmatchhistoryRouter。

2023-03-01 12:06:13 574 1

原创 假如面试官要你手写一个promise

在开发中,经常需要用到promise,promise具有很多特性,这一次将对promise特性进行总结,并从零写一个promise。

2023-03-01 12:03:27 363

原创 京东前端二面高频手写面试题(持续更新中)

判断对象是否存在循环引用循环引用对象本来没有什么问题,但是序列化的时候就会发生问题,比如调用对该类对象进行序列化,就会报错: 下面方法可以用来判断一个对象中是否已存在循环引用:查找有序二维数组的目标值:二维数组斜向打印:手写 Promise实现Promise相关方法实现Promise的resolve传参为一个 , 则直接返回它。传参为一个 对象,返回的 会跟随这个对象,采用它的最终状态作为自己的状态。其他情况,直接返回以该值为成功状态的对象。实现 Promise.rejec

2023-02-28 08:40:44 330

原创 从零到一手写迷你版Vue

监听器,数据变化更新对应节点视图// 创建Watcher监听器,负责更新视图 class Watcher {// vm vue实例,依赖key,updateFn更新函数(编译阶段传递进来) constructor(vm , key , updateFn) {// 调用更新函数,获取最新值传递进去 this . $updateFn . call(this . $vm , this . $vm [ this . $key ]) } }data的一个属性对应一个Dep实例管理多个Watcher。

2023-02-28 08:39:23 2071

原创 从零开始实现一个Promise

你怕忘记,一般会用清单记录onResolvedCallbacks = [‘做完了手上的事,去老板办公室’],onRejectedCallbacks = [‘做不完,滚蛋’],1秒后看完成结果,再依据选择下一步。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。promise的状态只能在resolve或者reject的时候改变,同步代码执行到then回调的时候promise的状态还是pending,明细不符合我们的期望。后生在此向老前辈致敬。

2023-02-28 08:38:03 162

原创 2023前端二面经典手写面试题

call做了什么:手写常见排序快速排序选择排序插入排序实现一个JS函数柯里化柯里化把多次传入的参数合并,柯里化是一个高阶函数每次都返回一个新函数每次入参都是一个当柯里化函数接收到足够参数后,就会执行原函数,如何去确定何时达到足够的参数呢?有两种思路:将这两点结合一下,实现一个简单 函数通用版ES6写法实现bind方法 返回了一个函数,对于函数来说有两种方式调用,一种是直接调用,一种是通过 的方式,我们先来说直接调用的方式对于直接调用来说,这里选择了

2023-02-27 10:12:30 409

原创 一步步实现React-Hooks核心原理

React Hooks已经推出一段时间,大家应该比较熟悉,或者多多少少在项目中用过。写这篇文章简单分析一下Hooks的原理,并带大家实现一个简易版的Hooks。这篇写的比较细,相关的知识点都会解释,给大家刷新一下记忆。

2023-02-27 10:12:20 658

原创 js函数柯里化-面试手写版

其实关于柯里化的运用核心还是对函数闭包的灵活运用,深刻理解闭包和作用域后就可以写出很多灵活巧妙的方法。

2023-02-27 10:12:00 317

原创 阿里前端二面经典手写面试题汇总

ES5实现继承-详细第一种方式是借助call实现继承第二种方式借助原型链实现继承:看似没有问题,父类的方法和属性都能够访问,但实际上有一个潜在的不足。举个例子:明明我只改变了s1的play属性,为什么s2也跟着变了呢?很简单,因为两个实例使用的是同一个原型对象第三种方式:将前两种组合:第四种方式: 组合继承的优化1第五种方式(最推荐使用):优化2实现instanceOf思路:实现一个队列实现every方法实现LRU淘汰算法 缓存算法是一个非常经典的算法,在很多面试中

2023-02-27 10:11:37 782

原创 2023前端二面手写面试题总结

定时器指定的时间间隔,表示的是何时将定时器的代码添加到消息队列,而不是何时执行代码。所以真正何时执行代码的时间是不能保证的,取决于何时被主线程的事件循环取到,并执行。被推入任务队列时,如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等,那么这个定时器的执行时间和我们预定它执行的时间可能并不一致。到任务队列前,都要进行一下判断(看上次的任务是否仍在队列中)。了解了属性和方法之后,根据 AJAX 的步骤,手写最简单的 GET 请求。定时器代码至队列中,主线程中还有任务在执行,所以等待,

2023-02-23 18:32:17 282

原创 高频js手写题之实现数组扁平化、深拷贝、总线模式

古人学问无遗力,少壮工夫老始成。纸上得来终觉浅,绝知此事要躬行。看懂一道算法题很快,但我们必须将这道题的思路理清、手写出来。

2023-02-23 18:31:49 329

原创 前端常见手写面试题集锦

写一个生成器函数并没有什么难度,但在面试的过程中,面试官往往对生成器这种语法糖背后的实现逻辑更感兴趣。下面我们要做的,不仅仅是写一个迭代器对象,而是用。Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。中,实现一个迭代器生成函数并不是什么难事儿,因为ES6早帮我们考虑好了全套的解决方案,内置了贴心的。此处为了记录每次遍历的位置,我们实现了一个闭包,借助自由变量来做我们的迭代过程中的“游标”。内的变量替换,如果属性不存在保持原样(比如。

2023-02-23 18:29:45 1178

原创 JS继承有哪些,你能否手写其中一两种呢?

这也许比将其称之为继承更为贴切,因为“被继承”了的功能并没有被拷贝到正在“进行继承”的对象中,相反它仍存在于通用的对象中。继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继承与 new。弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法,不存在引用属性共享问题,可传参,可复用。顾名思义,组合继承就是将原型链继承与构造函数继承组合在一起,从而发挥两者之长的一种继承模式。系列暂定 27 篇,从基础,到原型,到异步,到设计模式,到架构模式等,

2023-02-23 18:28:56 200

原创 面试官:能用JavaScript手写一个bind函数吗

经常会看到网上各种手写bind的教程,下面是我在自己实现手写bind的过程中遇到的问题与思考。如果对于如何实现一个手写bind还有疑惑的话,那么可以先看看上面两篇文章。

2023-02-21 10:55:16 348

原创 滴滴前端一面常考手写面试题合集

函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。AJAX是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的 异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。该函数库也有提供_.cloneDeep用来做 Deep Copy。

2023-02-21 10:54:54 429

原创 美团前端常考手写面试题总结

setInterval 的作用是每隔一段指定时间执行一个函数,但是这个执行不是真的到了时间立即执行,它真正的作用是每隔一段时间将事件加入事件队列中去,只有当当前的执行栈为空的时候,才能去从事件队列中取出事件执行。所以可能会出现这样的情况,就是当前执行栈执行的时间很长,导致事件队列里边积累多个定时器加入的事件,当执行栈结束的时候,这些事件会依次执行,因此就不能到间隔一段时间执行的效果。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。ES5方法:使用map存储不重复的数字。

2023-02-21 10:54:33 495

原创 面试官:请实现Javascript发布-订阅模式

发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知。

2023-02-21 10:53:00 2682

原创 自己手写一个redux

一般来说,Promise.all 用来处理多个并发请求,也是为了页面数据构造的方便,将一个页面所用到的在不同接口的数据一起请求过来,不过,如果其中一个接口失败了,多个请求也就失败了,页面可能啥也出不来,这就看当前页面的耦合程度了。该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行. 因为 Promise 的状态。需要注意的是,必须通过实例化对象之后再去调用定义的方法,不然找不到该方法。

2023-02-20 11:54:38 272

原创 前端手写面试题总结

ES6给我们提供了这样的数据结构,它的名字叫WeakMap,它是一种特殊的Map, 其中的键是弱引用的。类的继承在几年前是重点内容,有n种继承方式各有优劣,es6普及后越来越不重要,那么多种写法有点『回字有四样写法』的意思,如果还想深入理解的去看红宝书即可,我们目前只实现一种最理想的继承方式。但是实际上,对于某些严格的场景来说,这个方法是有巨大的坑的。像dom的拖拽,如果用消抖的话,就会出现卡顿的感觉,因为只在停止的时候执行了一次,这个时候就应该用节流,在一定时间内多次执行,会流畅很多。

2023-02-20 11:54:36 341

原创 自己手写一个redux

应用中的所有state都以一个object tree的形式存储在一个单一的store中。唯一能改store的方法是触发action,action是动作行为的抽象。

2023-02-20 11:53:55 326

原创 面试官:能用JavaScript手写一个bind函数吗

经常会看到网上各种手写bind的教程,下面是我在自己实现手写bind的过程中遇到的问题与思考。如果对于如何实现一个手写bind还有疑惑的话,那么可以先看看上面两篇文章。

2023-02-20 11:53:09 245

原创 社招前端必会手写面试题集锦

发布订阅者模式,一种对象间一对多的依赖关系,但一个对象的状态发生改变时,所依赖它的对象都将得到状态改变的通知。

2023-02-19 12:37:33 505

原创 美团前端一面手写面试题

我们可以把它理解为一个事件中心,我们所有事件的订阅/发布都不能由订阅方和发布方“私下沟通”,必须要委托这个事件中心帮我们实现。这就是全局事件总线的特点——所有事件的发布/订阅操作,必须经由事件中心,禁止一切“私下交易”!在指定时间内只执行一次回调函数,如果在指定的时间内又触发了该事件,则回调函数的执行时间会基于此刻重新开始计算。的代码实现——我都说这么清楚了,这个知识点到底要不要掌握、需要掌握到什么程度,就看各位自己的了。大家会发现,整个调用过程中,没有出现具体的发布者和订阅者(比如上面的。

2023-02-19 12:37:22 743

原创 手撕常见JS面试题

知识点:valueOf 浏览器环境下 当我们以log(fn)这种形式取值时,会隐式调用fn自身的valueOf 所以得到的是valueOf的返回值。debounce 策略的电梯。如果电梯里有人进来,等待50毫秒。如果又人进来,50毫秒等待重新计时,直到50毫秒超时,开始运送。保证如果电梯第一个人进来后,50毫秒后准时运送一次,不等待。如果没有人,则待机。插入排序 从后往前比较 直到碰到比当前项 还要小的前一项时 将这一项插入到前一项的后面。let max = (a - b) + (a的索引- b的索引);

2023-02-19 12:36:47 459

原创 能否手写vue3响应式原理-面试进阶

依赖:我们可以把依赖认为是把用户对数据的操控(用户函数,副作用函数)包装成一个东西,我们在get的时候将依赖一个一个收集起来,set的时候全部触发,即可实现响应式效果。创建一个用户函数作用函数,称为effect,这个函数的功能为基于ReactiveEffect类创建一个依赖,触发用户函数(的时候,触发依赖收集),返回用户函数。bind():在原函数的基础上创建一个新函数,使新函数的this指向传入的第一个参数,其他参数作为新函数的参数。shallow:不深的, 浅的,不深的, 不严肃的, 肤浅的,浅薄的。

2023-02-19 12:35:33 413

原创 前端经典手写面试题(持续更新中)

执行temp(5),这个函数内执行add(m+n),n是此次传进来的数值5,m值还是上一步中的7,所以add(m+n)=add(7+5)=add(12),此时m=12,并且返回temp函数。执行temp(4),这个函数内执行add(m+n),n是此次传进来的数值4,m值还是上一步中的3,所以add(m+n)=add(3+4)=add(7),此时m=7,并且返回temp函数。先执行add(3),此时m=3,并且返回temp函数;第一个参数是绑定的this,默认为。函数,把函数中的内容基于。

2023-02-14 11:46:13 404

原创 手写JavaScript常见5种设计模式

对五种常见常用的设计模式进行了学习,这几种很多时候都会用到,接下来还会继续学习其他的18种设计模式,可能有的设计模式不一定在实际敲码中使用,学了没坏处,总能用得上嗷!网上对于设计模式的文章,书籍层出不尽,但看得再多,不如自己理解,并且实际使用。很多时候是几种设计模式融合在一起使用,如果不是自己去写一遍,理解一遍,可能常见的设计模式都理解不了。这样就太可惜了,发现干净整洁的代码,都说不出哪里好,就是看着舒服,顺眼,运行速度快…

2023-02-14 11:45:55 379

原创 百度前端必会手写面试题整理

函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。用一个滑动窗口装没有重复的字符,枚举字符记录最大值即可。用 map 维护字符的索引,遇到相同的字符,把左边界移动过去即可。循环引用对象本来没有什么问题,但是序列化的时候就会发生问题,比如调用。会抛弃对象的constructor,所有的构造函数会指向Object。原理就是监听页面滚动事件,

2023-02-14 11:45:32 562

原创 手写现代前端框架diff算法-前端面试进阶

在前端工程上,日益复杂的今天,性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优,当然与他的如何怎么实现的有关。比如key为什么不能使用index呢?为什么不使用随机数呢?答案当然是影响性能,那为什么?相信你看完本文的diff算法就能略懂一些。

2023-02-14 11:44:51 304

原创 阿里前端必会手写面试题汇总

AJAX是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的 异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。用 map 维护字符的索引,遇到相同的字符,把左边界移动过去即可。像dom的拖拽,如果用消抖的话,就会出现卡顿的感觉,因为只在停止的时候执行了一次,这个时候就应该用节流,在一定时间内多次执行,会流畅很多。输入字符串s,以及其重复的次数,输出重复的结果,例如输入abc,2,输出abcabc。

2023-02-13 10:16:31 535

原创 前端一面常考手写面试题整理

运行的字符串代码被恶意方(不怀好意的人)操控修改,您最终可能会在您的网页/扩展程序的权限下,在用户计算机上运行恶意代码。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)其实是相同的,只是遍历的顺序相反,它是从数组的最后一项开始,向前遍历到第一项。函数处理过的对象,我们就可以方便地访问普通对象内部的深层属性。是一个危险的函数,他执行的代码拥有着执行者的权利。都有着动态编译js代码的作用,但是在实际的编程中并不推荐使用。在转换JSON的实际应用中,只需要这么做。渲染大数据时,合理使用。

2023-02-13 10:15:07 399

原创 手写JS函数的call、apply、bind

/ Function.prototype.call()样例 function fun(arg1 , arg2) {name : 'YIYING' } // 接受的是一个参数列表;方法立即执行 fun . call(_this , 1 , 2)// 输出:YIYING3// Function.prototype.apply()样例 function fun(arg1 , arg2) {name : 'YIYING' } // 参数为数组;

2023-02-13 10:14:59 53

原创 高级前端常考手写面试题(必备)

函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。在指定时间内只执行一次回调函数,如果在指定的时间内又触发了该事件,则回调函数的执行时间会基于此刻重新开始计算。(4)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)(2)设置原型,将对象的原型设置为函数的 prototype 对象。

2023-02-07 09:31:49 360

原创 几个常见的js手写题,你能写出来几道

浏览器的一些事件,如:resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用。观察者模式观察者Observer和主体Subject都比较清晰,而发布订阅模式的发布和订阅都由一个调度中心来处理,发布者和订阅者界限模糊。其实面试的时候主要靠死记硬背,因为有一次 20 分钟让我写 5 个实现(包括promise),,,谁给你思考的时间。函数的参数的处理逻辑,待 Promise 操作有了结果就会执行。

2023-02-07 09:30:48 242

原创 社招前端一面经典手写面试题

类的继承在几年前是重点内容,有n种继承方式各有优劣,es6普及后越来越不重要,那么多种写法有点『回字有四样写法』的意思,如果还想深入理解的去看红宝书即可,我们目前只实现一种最理想的继承方式。某个文件时,如果这个对象里面有对应的值,就直接返回给你,如果没有就重复前面的步骤,执行目标文件,然后将它的。并没有什么黑魔法,就只是运行并获取目标文件的值,然后加入缓存,用的时候拿出来用就行。看似没有问题,父类的方法和属性都能够访问,但实际上有一个潜在的不足。某个文件时,就将这个文件拿出来执行,如果这个文件里面存在。

2023-02-07 09:30:19 458

空空如也

空空如也

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

TA关注的人

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