【前端面试题】每日一个前端面试专题

一、typeof 与 instanceof 区别?如何instanceof的原理

问题回答思路

  1. typeof和instanceof 都可以检测数据类型，typeof检测如果是基本数据类型返回对应的结果。如果检测是对象的话，默认返回一个object，所以无法区分那种对象。

    typeof 数据

  2. instanceof是用于判断指定的数据，是否满足和指定构造函数匹配，只要匹配就说明他是同一种数据类型，主要用于判断对象的类型，无法用于基本数据类型，基本数据类型不存在构造器

    [] instanceof Array
{} instanceof Object
回答原理

instanceof的原理就是获取左边数据的构造函数，用于和右边（指定的构造函数）进行判断是否相等。

如果左边获取到的构造函数不等于右边，并不会马上结束，循环继续找对象的原型的函数是否和右边相等，直到找完了原型链对象，都匹配不了，返回false

代码复现：

function myInstanceof(left, right) {// 这里先用typeof来判断基础数据类型，如果是，直接返回falseif(typeof left !== 'object' || left === null) return false;// getProtypeOf是Object对象自带的API，能够拿到参数的原型对象let proto = Object.getPrototypeOf(left);while(true) {                  if(proto === null) return false;if(proto === right.prototype) return true;//找到相同原型对象，返回trueproto = Object.getPrototypeof(proto);}
}

二、bind、call、apply 区别？如何实现一个bind?

回答思路

从上面可以看到，apply、call、bind三者的区别在于：

  • 三者都可以改变函数的this对象指向
  • 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window
  • 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入
  • bind是返回绑定this之后的函数，apply、call 则是立即执行

三、说说 JavaScript 中内存泄漏的几种情况？

内存泄漏不等于内存溢出。完全两个概念。内存泄漏可能导致内存溢出

回答思路

内存泄漏指的就是代码运行过程中，变量使用完毕后无法被垃圾回收机制销毁（回收）。一直占这内存。这种情况称为内存泄漏。

常见的内存泄漏：

  1. 使用闭包，导致延长了变量的声明周期，函数调用完成后，变量无法及时被销毁。
  2. 定时器，组件中开启定时器后，离开了这个组件，但是定时器忘记清除，导致内存一直在运行定时器。
  3. 意外的全局变量。定义变量忘记使用var来声明。导致这个变量是全局的。函数被销毁了，变量无法被销毁
  4. dom元素删除：给dom元素绑定了事件，但是dom元素被删除后，事件绑定函数还存在。

四、说说 Javascript 数字精度丢失的问题，如何解决？

标准答案：

在javascript的世界中，所有的数据要进行处理，都要进行二进制的转换。

整数转化为二进制没有任何问题。但是小数转化二二进制就会出现无法整除的情况。

比如：

0.3-0.2 = 0.99999998

本身0.3和0.2

五、大文件上传如何做断点续传？

标准答案：

大文件上传上传遇到的问题，文件过大，上传很慢，上传中途可能出现网络异常、加上暂停功能解决续传的问题。

所以才出现了大文件断点续传。

思路：

  1. 本地通过<input type="file" onchange="">change事件可以获取文件对象file【size、type、name】

  2. 前端获取file对象后，使用slice对文件进行切片操作。得到多个切片数组。

  3. 前端封装文件上传代码。通过promise.all的方式来进行批量上传。虽然js是单线程的语言。但是浏览器是多线程，可以一次性处理多个文件上传任务。

    promise.all() //同时处理多个promise任务，当所有任务成功。all返回成功，但凡一个失败。all失败
promise.race() //同时处理多个promise任务，拿到最快的请求结果
promise.allsetlet() //同时处理多个promise任务，不管成功还是失败，都会返回结果。返回所有结果

  4. 如果需要暂停，需要使用axios提供的cancleToken来取消请求。

  5. 所有切片上传完毕后，在调用后端提供的合并接口，要求后端合并所有切片。返回结果给前端

  6. 前端拿到结果在提示用户上传成功

六、web常见的攻击方式有哪些？如何防御？

web攻击指的就是利用前端页面。或者前端身份信息。对服务区发起恶意的请求。

  • XSS (Cross Site Scripting) 跨站脚本攻击：

    • 攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后，攻击者甚至可以假冒合法用户与网站进行交互。
    • 在页面文本框里面容易输入<script>标签，里面写死循环造成对服务器攻击，或者写入特殊的代码。

  • CSRF（Cross-site request forgery）跨站请求伪造

    攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求

    利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目

    一个典型的CSRF攻击有着如下的流程：

    • 受害者登录a.com，并保留了登录凭证（Cookie）
    • 攻击者引诱受害者访问了b.com
    • b.com 向 a.com 发送了一个请求：a.com/act=xx。浏览器会默认携带a.com的Cookie
    • a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求
    • a.com以受害者的名义执行了act=xx
    • 攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作

  • SQL注入攻击：前端在输入框恶意输入sql语句，传递给后端，后端服务器如果在没有验证的情况，直接拿去进行sql拼接。就可能出现绕过身份，直接访问数据库。

七、如何递归实现一个深度拷贝

递归实现一个深度拷贝，最核心的问题就是知道你每次克隆的属性是基本类型还是引用类型，

如果是基本类型直接返回结果，赋值给新对象，如果是引用类型，我们采用递归来生成新对象，在返回上一层对象

function deepClone(obj, hash = new Map()) {if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作if (obj instanceof Date) return new Date(obj);if (obj instanceof RegExp) return new RegExp(obj);// 可能是对象或者普通的值  如果是函数的话是不需要深拷贝if (typeof obj !== "object") return obj;// 是对象的话就要进行深拷贝if (hash.get(obj)) return hash.get(obj);let cloneObj = new obj.constructor();// 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身hash.set(obj, cloneObj);for (let key in obj) {if (obj.hasOwnProperty(key)) {// 实现一个递归拷贝cloneObj[key] = deepClone(obj[key], hash);}}return cloneObj;
}

八、事件代理你在项目中那个地方使用到了？具体说一个场景

标准：

事件代理和事件委托利用了冒泡机制来实现页面优化。

当需要绑定在组件身上的事件冒泡到父组件，我们可以在父组件统一处理业务

比如在React开发过程中，表格的每一行数据都添加删除功能。

如果你每一行数据都绑定一个点击事件，数据多了性能并不好。

可以在表格上面动态获取点击的按钮编号来实现删除。

九、说一下你对this在不同环境下的指向问题

标准：

this指向最核心的概念：

  1. this永远指向一个对象，无论在哪个环境下执行
  2. 箭头函数本身没有this，他的this来源于父级作用域（作用域概念理解清楚）
  3. 普通函数的this，遵循一个原则，谁调用这个函数，this就指向谁。

十、ajax原理是什么？axios和ajax什么关系。

ajax就是浏览器提出的前端异步请求的一种技术。

核心代码如下：

const xmlhttp = new XMLHttpRequest()
//建立连接
xmlhttp.open(method, url, [async][, user][, password])
xmlhttp.open("GET","http://127.0.0.1:8002/users/findUser",false)//发送请求
xmlhttp.send("username=xiaowang&password=123")//得到响应结果
//监听浏览器状态码，一旦状态码发生变化，这个事件触发
xnlhttp.onreadystatechange = function(){if(xmlhttp.status>=200 && xmlhttp.readystate==4){const msg = xmlhttp.responseTextconst data = JSON.parse(msg)}
}

步骤：

  1. 创建异步请求对象XMLHttpRequest。
  2. 建立服务器连接，open函数。只有通过TCP三次握手成功后，前端才可以继续后面的操作
  3. 前端可以发送请求，send传递参数
  4. 前端要直到请求成功没有，只能通过状态码来判断。所以需要onreadystatechange监听状态码的变化。当状态码等于200，才代表成功，readystate等于才代表可以获取后端数据

axios是一个第三方的请求工具。

底层：ajax+promise进行封装。调用axios的api函数默认返回的就是promise对象。解决了回调地狱的问题。

并且还提供了请求拦截器、响应拦截器等等功能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/609221.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

组件封装原则

组件封装原则

在Vue中封装组件时&#xff0c;遵循低耦合、高内聚、可扩展性和可维护性的原则非常重要。以下是一些实现这些原则的关键点&#xff0c;并结合Vue的实践方式给出案例说明&#xff1a; 1. 单一职责原则&#xff1a; 每个组件专注于一个特定的功能或UI部分&#xff0c;例如&#…
阅读更多...
Java动态代理机制，创建代理对象的方法（InvocationHandler，Proxy）

Java动态代理机制，创建代理对象的方法（InvocationHandler，Proxy）

目录 1.什么是动态代理2.如何为Java对象创建一个代理对象 1.什么是动态代理 特点&#xff1a;无侵入式的给代码增加额外的功能。 在Java中&#xff0c;动态代理是一种机制&#xff0c;允许在运行时创建一个代理对象来代替原始对象&#xff0c;并可以在代理对象的方法执行前后追…
阅读更多...
Hive操作命令上手手册

Hive操作命令上手手册

内容来自于《大数据Hive离线计算开发实战》 Hive原理 Hive是一个基于Hadoop的数据仓库和分析系统&#xff0c;用于管理和查询大型数据集。以下是Hive的原理&#xff1a; 数据仓库&#xff1a;Hive将结构化的数据文件映射成一张表&#xff0c;并提供类SQL查询功能。用户可以使…
阅读更多...
第十五章 ECMAScript6新增的常用语法

第十五章 ECMAScript6新增的常用语法

文章目录 一、声明关键字二、箭头函数三、解构赋值四、展开运算符五、对字符的补充六、Symbol七、对象的简写语法八、Set和Map九、for-of 一、声明关键字 ES6新增的声明关键字&#xff1a; let&#xff0c;const&#xff1a;声明变量class&#xff1a;声明类import&#xff0c…
阅读更多...
《网络是怎样连接的》2.5节图表（自用）

《网络是怎样连接的》2.5节图表（自用）

图5.1&#xff1a;ip包结构 图5.2&#xff1a;ip网络包的传输方式 1.以太网的部分也可以替换成其他的东西&#xff0c;例如无线局域网、ADSL、FTTH等&#xff0c;它们都可以替代以太网的角色帮助IP协议来传输网络包 2.根据ARP协议&#xff0c;客户端可以根据ip地址得到下一个路…
阅读更多...
最新最简操作系统期末复习（考前速过）

最新最简操作系统期末复习（考前速过）

操作系统复习 第一章&#xff08;操作系统引论&#xff09;计算机操作系统包括&#xff1a;操作系统的目标&#xff1a;操作系统的作用&#xff1a;未配置操作系统的计算机系统&#xff1a;单道批处理系统&#xff1a;缺点&#xff1a; 多道批处理系统&#xff1a;优点&#xf…
阅读更多...
国际版WPS Office18.6.0

国际版WPS Office18.6.0

​【应用名称】&#xff1a;WPS Office 【适用平台】&#xff1a;Android 【软件标签】&#xff1a;WPS 【应用版本】&#xff1a;18.5.4 → 18.6.0 【应用大小】&#xff1a;160MB 【软件说明】&#xff1a;WPS Office是使用人数最多的移动办公软件。它具有独有手机阅读…
阅读更多...
TypeScript基础

TypeScript基础

ts学习 目录概述需求&#xff1a; 设计思路实现思路分析1.TypeScript 基础类型2.TypeScript 变量声明3.TypeScript 接口4.TypeScript 类5.TypeScript 函数5.TypeScript 泛型5.TypeScript 枚举TypeScript 类型推论TypeScript 类型兼容性TypeScript 高级类型TypeScript 迭代器和生…
阅读更多...
读史笔记（二）

读史笔记（二）

读史笔记&#xff08;二&#xff09; 考古是探求过去人类遗留的物质资料为手段&#xff0c;以研究人类发展进程及其规律为目的&#xff0c;为人们了解人类起源及相关的社会制度&#xff0c;宗教祭祀&#xff0c;生活习俗等提供了一种途径。而在我国&#xff0c;传统的金石学即源…
阅读更多...
RoadMap8：C++中类的封装、继承、多态与构造函数

RoadMap8：C++中类的封装、继承、多态与构造函数

摘要&#xff1a;在本章中涉及C最核心的内容&#xff0c;本文以C中两种基础的衍生数据结构&#xff1a;结构体和类作为引子&#xff0c;从C的封装、继承与多态三大特性全面讲述如何在类这种数据结构进行体现。在封装中&#xff0c;我们讲解了类和结构体的相似性&#xff1b;在继…
阅读更多...
自带恒压恒流环路的降压型单片车充专用芯片

自带恒压恒流环路的降压型单片车充专用芯片

一、基本概述 XL2009是一款高效降压型DC-DC转换器&#xff0c;固定180KHz开关频率&#xff0c;可以提供最高2.5A输出电流能力&#xff0c;具有低纹波&#xff0c;出色的线性调整率与负载调整率特点。XL2009内置固定频率振荡器与频率补偿电路&#xff0c;简化了电路设计。 PWM …
阅读更多...
Java后端和前端传递的请求参数的三种类型

Java后端和前端传递的请求参数的三种类型

在 HTTP 请求中&#xff0c;常见的请求参数类型有三种&#xff1a;application/x-www-form-urlencoded、multipart/form-data 和 application/json&#xff08;通常用于 raw 类型&#xff09;。这三种类型主要指的是请求体中的数据格式&#xff0c;其中包括参数的传递方式和编码…
阅读更多...
Docker（八）Python+旧版本chrome+selenium+oss2+fastapi镜像制作

Docker（八）Python+旧版本chrome+selenium+oss2+fastapi镜像制作

目录 一、背景二、能力三、核心流程图四、制作镜像1.资源清单2.Dockerfile3.制作镜像 五、启动测试 一、背景 近几年我们线下的创业团队已从零到一开发过好几个小程序项目&#xff0c;都是和体育相关。其中生成海报分享图片好像都是不可或缺的功能。之前的项目老板给的时间都比…
阅读更多...
从零学算法17

从零学算法17

17.给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits “23” 输出&#xff1a;[…
阅读更多...
【Spring】容器

【Spring】容器

注意点&#xff1a; p命名和c命名空间不能直接使用&#xff0c;需要导入xml约束&#xff01; xmlns:p"http://www.springframework.org/schema/p" xmlns:c"http://www.springframework.org/schema/c"使用注解实现自动装配 jdk1.5 支持的注解&#xff0c;…
阅读更多...
Java进击框架：Spring-Web（八）

Java进击框架：Spring-Web（八）

Java进击框架&#xff1a;Spring-Web&#xff08;八&#xff09; 前言DispatcherServlet拦截器异常视图解析重定向转发 语言环境日志 过滤器带注释的控制器声明映射请求其它注解验证 功能性端点URI Links异步请求CORSHTTP缓存视图技术MVC配置其他Web框架 前言 Spring Web MVC是…
阅读更多...
519基于单片机的自动切割流程控制系统

519基于单片机的自动切割流程控制系统

基于单片机的自动切割流程控制系统[proteus仿真] 自动切割流程控制系统这个题目算是课程设计和毕业设计中常见的题目了&#xff0c;本期是一个基于单片机的自动切割流程控制系统 需要的源文件和程序的小伙伴可以关注公众号【阿目分享嵌入式】&#xff0c;赞赏任意文章 2&…
阅读更多...
【蓝桥备赛】技能升级——二分查找

【蓝桥备赛】技能升级——二分查找

题目链接 技能升级 个人思路 需要给n个技能添加技能点&#xff0c;无论技能点加成如何衰减&#xff0c;每次始终都是选择当前技能加点加成最高的那一项技能&#xff0c;所以最后一次的加点一定也是加在当时技能攻击加成最高的那个。此时&#xff0c;我们去寻找最后一次的加点…
阅读更多...
无人驾驶卡尔曼滤波

无人驾驶卡尔曼滤波

无人驾驶卡尔曼滤波&#xff08;行人检测&#xff09; x k a x k − 1 w k x_k ax_{k-1} w_k xk​axk−1​wk​ w k w_k wk​&#xff1a;过程噪声 状态估计 估计飞行器状态&#xff08;高度&#xff09; x k z k − v k x_k z_k - v_k xk​zk​−vk​ 卡尔曼滤波通…
阅读更多...
JavaScript中表格文件导出功能详解

JavaScript中表格文件导出功能详解

一、背景 在现代web开发中&#xff0c;提供数据导出功能已成为许多应用程序的必备功能。用户可能希望将数据保存为文件以便于离线查看或分享。在众多的数据展示形式中&#xff0c;表格因其直观性而广受欢迎。本文将专注于如何使用JavaScript将HTML表格导出为文件。 二、实现原…
阅读更多...
最新文章

Copyright @ 2022~2023