前端面试题(下)

简介: 前端面试题

20. 对箭头函数的了解,箭头函数的优缺点?

箭头函数是匿名函数,ES5匿名函数的语法糖,并且没有自己的this,arguments,super或 new.target。
它的优点是:
(1)简洁的语法、   
(2)隐士返回,如 下面的代码可以去掉return,代码移到一行,减少代码量numbers.map((number)=>number*2)
(3)解决了this的指向问题,原生的写法this指向的是调用者,箭头函数this绑定的是定义时的那个对象。如果有对象嵌套的情况,则this绑定到最近的一层对象上
它的缺点是:
(1)做为构造函数的时候不能使用箭头函数                                       
(2)真正需要this的时候如给元素绑定click事件的 时候,执行的回调函数不能使用箭头函数。
(3)我们需要使用arguments对象的时候不能使箭头函数。箭头函数中没有arguments对象。

21. 箭头函数与普通函数的区别?

(1)定义的形式不同。
(2)箭头函数全都是匿名函数。
(3)普通函数的this指向调用者,箭头函数的 this 永远指向其上下文的 this,任何方法都改变不了箭头函数this指向,如 call() , bind() , apply()
(4)箭头函数不具有prototype属性,新建的对象的隐式原型无法被指定为箭头函数的原型
(5)箭头函数不能用于构造函数
(6)箭头函数不能Generator函数
(7)箭头函数不具有arguments对象

22. 如果Promise没有all方法的话,你怎么实现all

d8d94a9253d64162ae90c66a38712707.png

23. 简述一下对闭包理解?

闭包:在一个外函数中定义了一个内函数,内函数里运用了外函数的临时变量,并且外函数的返回值是内函数的引用。
这样就构成了一个闭包。一般情况下,在我们认知当中,如果一个函数结束,函数的内部所有东西都会释放掉,还给内存,局部变量都会消失。
但是闭包是一种特殊情况,如果外函数在结束的时候发现有自己的临时变量将来会在内部函数中用到,就把这个临时变量绑定给了内部函数,然后自己再结束。
经常用闭包来实现面向对象编程
一个函数和它的周围状态的引用捆绑在一起的组合
是一个可以读取其他函数内部变量的函数,在js中只有函数内部的函数才可以读取该函数内部的变量,因此,闭包可以是一个函数中返回的函数。
闭包的好处:可以读取其他函数内部的变量,并将其一直保存在内存中。
坏处: 可能会造成内存泄露或者内存溢出

24. Axios二次分装的目的?

二次封装axios,方便我们后续项目的使用。
api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.通常我们的项目会越做越大,页面也会越来越多,
如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?
那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代.

25. axios的原理,基于什么实现的。

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios还是属于 XMLHttpRequest, 因此需要实现一个ajax;还需要一个promise对象来对结果进行处理。

26. 说说constructor()?

constructor的作用是可以知道实例对象的构造函数是谁,constructor属性表示原型对象与构造函数之间的关联关系,如果修改了原型对象,一般会同时修改constructor属性,防止引用的时候出错。

27. class与function定义类的区别?

(1)关于构造器constructor:在function定义的构造函数中,其prototype.constructor属性指向构造器自身,在class定义的类中,constructor其实也相当于定义在prototype属性上
(2)重复定义:function会覆盖之前定义的方法;class会报错
(3)原型或者类中方法的枚举:class中所有方法不可枚举
(4)class没有变量提升,function有
(5)class定义的类没有私有方法和私有属性

28. SessionStorage一刷新还有吗?

刷新页面session stroage是不会消失的,只有关闭浏览器才会消失

29. 1+2等于3吗,在程序里面?

等于,但是0.1+0.2 = 0.30000000000000004。原因是由于JS浮点数存储机制

解决方法:自己实现浮点数加法,先转化可以计算的整数,再相加,最后转化为小数,精度取一定位数如5

30. 发布订阅怎么实现的?


发布—订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。

订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。

31. 自己实现发布订阅者模式 如何实现?

创建一个对象

在该对象上创建一个缓存列表(调度中心)

on 方法用来把函数 fn 都加到缓存列表中(订阅者注册事件到调度中心)

emit 方法取到 arguments 里第一个当做 event,根据 event 值去执行对应缓存列表中的函数(发布者发布事件到调度中心,调度中心处理代码)

off 方法可以根据 event 值取消订阅(取消订阅)

once 方法只监听一次,调用完毕后删除缓存函数(订阅一次)

32. 如何移除订阅发布者模式

实现一个off方法根据event值取消订阅,从订阅列表中移除即可。

33. 如果用本机存储的方式实现定时任务过期?

本题的核心是考查的是如何实现localstorage本地定时缓存?方案:ES5扩展Storage,思路很简单,存储的值加一个时间戳,下次取值时验证时间戳;注意: localStorage只能存储字符,存入时将对象转为json字符串,读取时也要解析

34. 暂时性死区的报错是什么样的,为什么会有暂时性死区,Var为什么没有暂时性死区?

if(true){console.log(tmp); let tmp = 90;}如上代码会出现暂时性死区报错,报措信息“Uncaught ReferenceError: Cannot access ‘tmp’ before initialization at :3:7”

出现暂时性死区的原因:let/const 命令会使区块形成封闭的作用域。若在声明之前使用变量,就会报错。总之,在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。这在语法上,称为 “暂时性死区”( temporal dead zone,简称 TDZ)。

Var 具有声明提升的特性,所以在使用前调用该变量值为undefined,并不会出现暂时性死区现象

35. 数组里面常用的方法

1. push   向数组的末尾添加一项或多项元素
2. pop     删除数组的最后一项
3. shift    删除数组的首项
4. unshift  向数组的开头添加一或多项
5. splice  增删改
6. slice    截取数组(复制数组)
7. join      用指定的分隔符将数组每一项拼接为字符串
8. concat  用于连接两个或多个数组
9. sort   对数组的元素进行排序
10. reverse  倒序数组

36. forEach和map循环区别

最大的区别是forEach没有返回值,map有返回值,可以return;

37. 影响js性能的操作

for()语句性能优于for(…in…)语句

避免重复创建函数,避免使用闭包。推荐使用prototype追加方法

判断一个js对象是否支持某个属性或方法时使用if(typeof(person.attr)!=‘undefined’) ,考虑到当person.attr=null,0,false的情况

在IE中根据name属性取得SPAN元素:w3c规范中getElementsByName是按着name属性进行检索的,而MS的IE却是按着id来检索,导致不能得到应该得到的Elements。可用getElementsByTagName后再getAttribute(“name”)判断。

得到字符串所占的字符个数: if (intCode>=0&&intCode<=128) { totallength=totallength+1;//非中文单个字符长度加 1}else{ totallength=totallength+2; //中文字符长度则加 2}

原始类型(string,number,boolean,null,undefined):值; 复合类型(object,array,function):访问地址。

使用{}创建对象

使用[]创建数组,如果你不知道数组长度,使用Array#push。当你需要复制数组的时候,请使用Array#slice。

对于字符串,使用单引号’

字符串拼接,可以使用Array#join。尤其是对IE浏览器。

绝对不要在非函数块(if,while)申明一个函数。可以把函数申明变成一个函数表达式 var test = function test(){…}

访问属性使用点(.)操作符, 当以变量的方式访问属性的时候,用下标符号([])。——除非特殊需求,否则尽量避免使用obj[variable]的方式进行属性访问。

使用一个var定义多个变量,每个变量在一个新行上,把不进行赋值的变量放置到最后

在选择时,最好以ID选择符作为开头

尽量少用选择符,而使用逗号

在循环次数很多时避免使用$().each,而使用for循环

尽量减少对DOM的操作

如果参数可以是JS对象,尽量使用对象:$(“div”).css({ “display”: “block”, “background-color”: “blue” });。

38. 谈谈对深浅拷贝的理解,怎么实现深浅拷贝的?

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

深拷贝:层层拷贝 每一层的数据都会拷贝 — 产生了新的数据

浅拷贝:只拷贝一层数据,深层次对象级别的只拷贝了地址 – 拷贝引用

浅拷贝的实现方式:

(1)Object.assign()

(2)Array.prototype.concat()

(3)Array.prototype.slice()

深拷贝的实现方式:

(1)JSON.parse(JSON.stringify())

(2)手写递归方法:递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝(源码可参考:https://www.cnblogs.com/secretAngel/p/10188716.html

39. 谈谈this指向

this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象。它的指向由调用它的对象来决定,如:


在全局中this指向window

直接调用函数this指向window

事件处理函数中this指向绑定事件的元素

obj.fn(); fn函数中this指向obj

回调函数中this指向window

构造函数中this指向实例化对象

40. js里哪些操作会造成内存泄漏

(1)在函数中定义全局变量

(2)闭包。闭包可以维持函数内局部变量,使其得不到释放。

(3)删除元素却没有清除DOM元素引用

(4)被遗忘的定时器或者回调

(5)子元素存在引用引起的内存泄漏

相关文章
|
3月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
90 1
|
4月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
5月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
6月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
130 57
|
6月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
81 2
|
6月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
6月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
6月前
|
存储 JavaScript 前端开发
|
6月前
|
Web App开发 存储 缓存
|
6月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    智能编码在前端研发的创新应用
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75