高频前端面试题汇总

已于 2022-07-16 11:19:27 修改
阅读量519 收藏 1
点赞数 1
文章标签： 前端 javascript vue.js
于 2022-04-18 15:45:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49029709/article/details/124249807
版权

js中的继承

  1. 原型链继承
  2. 借用构造函数(经典继承)
  3. 组合继承
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合继承

1.1-事件委托面试点

  1. 什么是事件委托
    给父元素注册事件，委托给子元素处理

  2. 事件委托原理：
    事件冒泡

  3. 事件委托注意点
    this：指向父元素
    e.target：指向触发事件的子元素

  4. 事件委托场景 ：
    给动态新增元素注册委托事件

1.2-localStorage与sessionStorage区别

  1. 相同点：
    作用一致：用于存储数据
    都是只能存储字符串类型数据（上限5MB）

  2. 不同点： 存储方式不同
    localStorage：硬盘存储（永久存储，页面关闭还在，存在硬盘）
    sessionStorage：内存存储（临时存储，页面关闭了就消失）

  3. localStorage与sessionStorage如何存储引用类型数据（数组和对象）
    转json存储

1.1-new关键字做了哪些事情

  1. 创建空对象
  2. this指向这个对象
  3. 给对象赋值
  4. 返回实例对象

1.2-原型链相关

  1. 原型链作用：面向对象继承
  2. 对象访问原型链规则：就近原则
    先访问自己，自己没有找原型，原型没有找原型的原型，直到原型链终点。 如果还找不到，属性则获取undefined，方法则报错xxx is not defined

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去
它的__proto__隐式原型上查找，即它的构造函数的 prototype，如果还没有找到就会再在
构造函数的 prototype 的__proto__中查找，这样一层一层向上查找就会形成一个链式结
构，我们称为原型链。

1.3-如何判断this指向

this：谁调用我，我就指向谁
普通函数 函数名（）：window
对象方法 对象名.方法名（）：对象
构造函数 new 函数名（）：new创建的实例对象

1.4-call apply bind区别

  • 共同点:
    • 都可以修改this，第一个参数都是修改的this
  • 不同点
    • 传参方式不同： call是逐一传参， apply是数组/伪数组传参
      • 函数名.call(修改的this,参数1,参数2…)
      • 函数名.apply(修改的this,数组/伪数组)
    • 执行机制不同：call和apply会立即执行函数，bind不会立即执行
      • bind会得到一个修改this后的新函数

1.5-如何判断数据类型

    1. typeof有两种数据类型无法检测： null 、array
    1. Object.prototype.toString.call(数据)

1.6-闭包

  • 1.闭包是什么 :
    • 闭包 是 使用其他函数内部变量的 函数 （闭包 = 函数 + 其他函数内部变量）
    • 闭包 = 函数 + 上下文引用
  • 2.闭包作用 : 解决全局变量污染

我的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

1.7-递归及应用场景

  • 1.递归 ： 在函数内部调用自己
  • 2.递归作用 ：
    • 浅拷贝与深拷贝
    • 遍历dom树

1.8-浅拷贝与深拷贝

  • 1.浅拷贝：拷贝地址， 修改拷贝后的数据原数据也会变化
  • 2.深拷贝：拷贝数据， 修改拷贝后的数据原数据不会变化
    • 推荐 json : let obj = JSON.parse( JSON.stringify( 对象 ) )
    • 递归

1.9-数组常用迭代方法

1.数组map遍历：

  1. map方法作用: 根据某种规则映射数组，得到映射之后的新数组
    说人话： 按照某种规则，对数组每一个元素进行处理
    应用场景 : (1)数组中所有的元素 * 0.8 (2)将数组中的js对象 隐射成 html字符串

  2. map语法特点 :

       (1) 回调执行次数  ==  数组长度
   (2) 回调函数内部return
       return 新元素
       如果没有return, 新元素是undefined
   (3) 方法自身的返回值 
       映射后的新数组

2.数组filter遍历：

  1. filter方法作用: 根据条件，筛选数组
    应用场景 : (1)筛选数组中的偶数 (2)商品价格筛选

  2. filter语法特点 :

        (1) 回调执行次数  ==  数组长度
    (2) 回调函数内部return
        return true : 满足筛选条件，放入新数组中
        return false : 不满足筛选条件，不放入新数组中
    (3) 方法自身的返回值 
        筛选之后的新数组

3.数组forEach遍历

  1. forEach方法作用: 相当于 for循环另一种写法
    应用场景 : 遍历数组

  2. forEach语法特点 :

         (1) 回调执行次数  ==  数组长度
     (2) 回调函数内部return
         无
     (3) 方法自身的返回值 
         无

4.数组some遍历

  1. some方法作用: 判断 数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可)
    应用场景 : (1)判断数组中有没有奇数
    (2)非空判断 : 判断表单数组中，有没有元素value为空

  2. some语法特点 :

         (1) 回调执行次数  !=  数组长度
     (2) 回调函数内部return
         return true 
             * 循环结束。 找到满足条件的元素, some自身返回true
         return false : 
             * 循环继续。没有找到满足条件的，如果所有的元素都是返回false，最终some默认返回false
     (3) 方法自身的返回值 
         true: 有满足条件的元素
         false: 没有满足条件的元素

5.数组every遍历

  1. every 方法作用: 判断 数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足)
    应用场景 : (1)判断数组中是否所有元素都是 偶数
    (2)开关思想 : 购物车是否全选

  2. every语法特点 :

         (1) 回调执行次数  !=  数组长度
     (2) 回调函数内部return
         return true 
             * 循环继续。满足条件,如果所有元素都满足,最终every默认返回值true
         return false : 
             * 循环结束。不满足条件，此时every返回值false
     (3) 方法自身的返回值 
         true: 所有满足都满足条件
         false: 有元素不满足条件

6.数组 findIndex方法

  1. findIndex方法作用: 找元素下标
    应用场景 :
    (1)如果数组中是值类型，找元素下标用： arr.indexOf( 元素 )
    (2)如果数组中是引用类型，找元素下标： arr.findIndex( )

  2. findIndex语法特点 :

        (1) 回调执行次数  !=  数组长度
    (2) 回调函数内部return
        return true 
            * 循环结束。 找到元素，返回当前元素下标
        return false : 
            * 循环继续。没找到。 如果全部都是false，最终返回固定值-1
    (3) 方法自身的返回值 
        -1 : 没有
        下标 : 有

7.数组reduce方法

  1. 数组reduce遍历 : 为每一个元素执行一次回调,返回最后一次回调的结果

  2. reduce场景 : 求数组累加和

reduce的使用格式

reduce可以返回任意值，功能就是将一个数组的内容聚合成单个值。这个值可以是数字、字符串、甚至可以是对象或新数组

数组常用api

常用数组API汇总

什么是回调地狱，如何解决

  • 什么是回调地狱（函数作为参数层层嵌套）

如何解决

  • 保持你的代码简短(给函数取有意义的名字，见名知意，而非匿名函数，写成一大坨)
  • 模块化(函数封装，打包，每个功能独立，可以单独的定义一个js文件Vue，Creact中通过import导入就是一种体现)
  • 处理每一个错误
  • 创建模块时的一些经验法则
  • Promise承诺、2F生成器、ES6等

for in和for of的区别

  1. 推荐在循环对象属性的时候，使用for…in，在遍历数组的时候的时候使用for…of。
  2. for…in循环出的是key，for…of循环出的是value
  3. 注意，for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
  4. for…of不能循环普通的对象，需要通过和Object.keys()搭配使用

递归及应用场景

递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
简单理解：函数内部自己调用自己，这个函数就是递归函数
应用场景：树形组件

https和http的区别：

HTTP是明文传输，HTTPS通过SSL\TLS+进行了加密

  • HTTP 的端口号是80，HTTPS 是443
  • HTTPS需要到CA+申请证书，一般免费证书很少，需要交费
  • HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全

js延迟加载的方式

defer属性
async属性
动态创建DOM方式
使用jQuery的getScript方法
使用setTimeout延迟方法
让JS最后加载

get请求和post请求的区别：

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

哈希路由和history路由的区别：

Hash模式：

  1. url路径会出现#字符
  2. Hash值不包括在HTTP请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求
  3. Hash值的改变会触发hashchange事件

History模式：

  1. 整个地址重新加载，可以保存历史记录，方便前进后退
  2. 使用HTML5+API（旧浏览器不支持）和HTTP服务端配置，没有后台配置的话，页面刷新时会出现404

父子组件的生命周期钩子：

父子组件的生命周期钩子

v-mode和.sync的对比

两者本质都是一样，并没有任何区别：“监听一个触发事件” =“(val)=> value = val”。

  1. 只不过v-model默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。比较单一，不能有多个。
  2. 一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。

vue路由钩子beforeEach的参数

to：Route：即将要进入的目标路由对象
from：Route：当前导航正要离开的路由
next：Function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。

计算属性和watcher的使用区别

计算属性和watcher的使用区别

v-if和v-show的区别：

v-if是动态添加，当值为false时，是完全移除该元素，即dom树中不存在该元素。
v-show仅是隐藏 / 显示，值为+false+时，该元素依旧存在于dom树中。若其原有样式设置了+display：none则会导致其无法正常显示。

key的作用：

key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，减少DOM操作量，提高性能。

vue2中$nextTick:

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

vue2中响应式的原理

主要做了这么几件事：数据劫持、收集依赖、派发更新

  1. 数据劫持：new+Vue的时候遍历data对象，用Object.defineProperty给所有属性加上了getter和setter
  2. 依赖的收集：render的过程，会触发数据的getter+，在getter的时候把当前的watcher对象收集起来
  3. 派发更新：setter的时候，遍历这个数据的依赖对象（watcher对象），进行更新
前端-公瑾
关注
前端高频面试题（附答案）
helloworld1024fd的博客
08-29 333
前端高频面试题（附答案）
高频前端开发面试问题及答案整理
小生方勤
10-19 582
来自：csdnhttps://blog.csdn.net/p358278505/article/details/78718283说说你对闭包的理解使用闭包主要是为了设计私有的方法和变量。...
前端高频面试题 - 总汇篇（持续更新中……）
最新发布
PNPYY的博客
08-15 1300
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的严格模式：是以浏览器支持的最高标准运行混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为。
前端高频面试题
越努力，越幸运！
07-16 7605
前言 多小伙伴为了面试会去看一些大厂的经典面试题，这里的“看”只是说加深一下以往的印象，也就是说你之前是用到过或者是学过，只是长时间用不到有点淡忘了。千万不要为了面试而死记硬背，这是程序员最大的悲哀，请记住一句话：“未经你思考的知识是不属于你的” 楼主2018年毕业，三年前端开发经验。前段时间花了半个月时间面试，收到七八个offer，其中包括美的集团。以下是我对前端开发一些碎片化知识的总结，所谓碎片化，其实都是积木化，每一块积木都可以单独学习，自主拼接，进而组合成自己想要的形状，充分运用。 ..
前端高频面试题汇总（一）
loveX001的博客
09-15 188
滴滴前端经典面试题汇总
「2021」高频前端面试题汇总之JavaScript篇.pdf
12-14
「2021」高频前端面试题汇总之JavaScript篇
「2021」高频前端面试题汇总之计算机网络篇.pdf
12-14
计算机网络是前端开发中一个非常重要的知识点，本文将从 HTTP 协议、HTTP 状态码、HTTP 请求头和响应头等方面对计算机网络进行详细的讲解。 HTTP 协议 HTTP（HyperText Transfer Protocol）是用于从万维网...
「2021」高频前端面试题汇总之React篇.pdf
12-14
React 面试题汇总 React 是一个流行的前端框架，拥有庞大的开发者社区和丰富的生态系统。本文将从 React 的事件机制、组件基础、事件代理、高阶组件、Render Props、Hooks 等方面总结一些常见的面试题。 1. React ...
「2021」高频前端面试题汇总之手写代码篇.pdf
12-14
"前端面试题汇总之手写代码篇" 本资源主要对前端面试题的常见问题进行了总结和分类，涵盖了 JavaScript 基础知识、手写代码等方面的知识点。下面是对本资源中提到的知识点的详细解释： 1. 手写 Object.create 方法...
「2021」高频前端面试题汇总之JavaScript篇
公众号：前端充电宝
03-08 6488
系列文章： 【1】「2021」前端面试题之HTML篇 【2】「2021」前端面试题之CSS篇 【3】「2021」前端面试题之浏览器原理篇 【4】「2021」前端面试题之计算机网络篇 【5】「2021」前端面试题之Vue篇 【6】「2021」前端面试题之React篇 【7】「2021」前端面试题之JavaScript篇（上） 目录系列文章：一、数据类型1. JavaScript有哪些数据类型，它们的区别2. 数据类型检测的方式有哪些3. 判断数组的方式有哪些4. null和undefined区别5. type
前端高频面试题及答案汇总！
程序人生的博客
03-10 5297
作者 |木易杨 责编 | 伍杏玲 别惊讶！人工智能时代即将到来！ https://edu.csdn.net/topic/ai30?utm_source=cxrs_bw 第 1 题：简单讲解一下 HTTP2 的多路复用 在 HTTP/1 中，每次请求都会建立一次TCP连接，也就是我们常说的3次握手4次挥手，这在一次请求过程中占用了相当长的时间，即使开启了...
前端高频面试题及知识点汇总
豆。的博客
05-23 1442
文章目录前言javascript部分一、闭包二、栈内存和堆内存三、原型对象、原型链、作用域链四、说一下JS继承（含ES6的）1.什么是继承：2.如何实现继承1）Js继承：构造函数继承2）Js继承：插入继承3）ES6：（类）继承五、call()、apply()、bind()的用法及区别 前言 结合高频面试题对前端各知识点做个汇总，并对部分知识点单独详解 有试题答案， 因为是根据面试题来做的所以知识点会有点乱没有先后顺序 就当看面试题吧！ javascript部分 一、闭包 闭包就是打通函数外部访问函数内
2023年高频前端面试题
08-24
- *1* *2* [2023高频前端面试题总结（附答案）](https://blog.csdn.net/weixin_45102366/article/details/125525247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值