2021最新一线大厂前端面试题，包含腾讯，字节，顺丰······

前端入门基础HTML+CSS

前端Html5+Css3+移动Web教程，前端Web入门教程，零基础前端开发视频教程

JavaScript入门神器

JavaScript全套教程，Web前端必学的JS教程，零基础入门JavaScript

腾讯前端面试题

• 1、标签语义化的意义是什么？
o 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构。
o 用户体验，例如title、alt用于解释名词或解释图片信息、label标签的活用。
o 有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
o 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
o 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

• 2、常见的状态码有哪些？
o 200：这个是最常见的http状态码，表示服务器已经成功接受请求，并将返回客户端所请求的最终结果。
o 202：表示服务器已经接受了请求，但是还没有处理，而且这个请求最终会不会处理还不确定。
o 204：服务器成功处理了请求，但没有返回任何实体内容 ，可能会返回新的头部元信息。
o 301：客户端请求的网页已经永久移动到新的位置，当链接发生变化时，返回301代码告诉客户端链接的变化，客户端保存新的链接，并向新的链接发出请求，已返回请求结果。
o 304：协商缓存
o 404：请求失败，客户端请求的资源没有找到或者是不存在。
o 500：服务器遇到未知的错误，导致无法完成客户端当前的请求。
o 503：服务器由于临时的服务器过载或者是维护，无法解决当前的请求。

• 3、js的执行机制是什么？
o js是单线程执行的，页面加载时，会自上而下执行主线程上的同步任务，当主线程代码执行完毕时，才开始执行在任务队列中的异步任务。具体如下：
 1.所有同步任务都在主线程上执行，形成一个执行栈。
 2.主线程之外，还存在一个"任务队列(eventloop队列或者消息队列)"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
 3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
 4.主线程不断重复上面的第三步。

• 4、怎么理解的原型和原型链？
o 原型：函数都有prototype属性，这个属性的值是个对象，称之为原型。
o 原型链：对象都有__proto__属性，这个属性指向它的原型对象，原型对象也是对象，也有__proto__属性，指向原型对象的原型对象，这样一层一层形成的链式结构称为原型链。

• 5、let、const和var的区别？
o var声明变量存在提升（提升当前作用域最顶端），let和const是不存在变量提升的情况。
o var没有块级作用，let和const存在块级作用域。
o var允许重复声明，let和const在同一作用域不允许重复声明。
o var和let声明变量可以修改，const是常量不能改变。

• 6、vue组件中的data为什么是函数，new Vue 实例里，data 可以直接是一个对象 ？
o 组件是用来复用的，组件中的data写成一个函数,数据以函数返回值形式定义,函数有独立的作用域，这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。
o 而单纯的写成对象形式,由于对象是引用类型，就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
o 因为new vue根实例不复用，所以可以写成对象形式。

• 7、computed和watch的区别？
o 计算属性computed：
 1、支持缓存，只有依赖数据发生改变，才会重新进行计算。
 2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化。
 3、如果computed需要对数据修改，需要写get和set两个方法，当数据变化时，调用set方法。
 4、computed擅长处理的场景：一个数据受多个数据影响，例如购物车计算总价。
o 侦听属性watch：
 1、不支持缓存，数据变，直接会触发相应的操作。
 2、watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值。
 3、immediate：组件加载立即触发回调函数执行。
 4、deep:true的意思就是深入监听，任何修改obj里面任何一个属性都会触发这个监听器里的 handler方法来处理逻辑。
 5、watch擅长处理的场景：一个数据影响多个数据，例如搜索框。

• 8、v-if和v-show的区别，使用场景区别？
o 区别：
 1.实现原理：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
 4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

字节前端面试题

• 1、说说2种盒模型的区别？
o 标准盒模型与怪异盒模型的表现效果的区别之处：
 1、标准盒模型中width指的是内容区域content的宽度，height指的是内容区域content的高度，标准盒模型下盒子的大小 = content + border + padding + margin
 2、怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding），height指的是内容、边框、内边距总的高度，怪异盒模型下盒子的大小 = width（content + border + padding） + margin
 3、注意：除此之外，我们还可以通过属性box-sizing来设置盒子模型的解析模式，可以为box-sizing赋两个值：
 content-box：默认值，border和padding不算到width范围内，可以理解为是 W3c的标准模型(default)。总宽=width+padding+border+margin
 border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型，总宽=width+margin

• 2、js数据类型？
o 数据类型：
 基本数据类型：Number、String、Boolean、null、undefined
 引用数据类型：Function、Object、Array
o 区别：
 undefined:表示变量声明但未初始化时的值
 null：表示准备用来保存对象，还没有真正保存对象的值。从逻辑角度看，null值表示一个 空对象指针
 JavaScript（ECMAScript标准）里共有5种基本类型：undefined, null, Boolean, Number, String，和一种复杂类型Object。可以看到null和undefined分属不同的类型，未初始化 定义的值用typeof检测出来是"undefined"(字符串)，而null值用typeof检测出来是 “object”（字符串）。任何时候都不建议显式的设置一个变量为undefined，但是如果保 存对象的变量还没有真正保存对象，应该设置成null。实际上，undefined值是派生自null 值的，ECMAScript标准规定对二者进行相等性测试要返回true

• 3、写出3个及以上的数组方法？
o join()：将一个数组转成字符串，返回一个字符串。
o reverse()：将数组中各元素颠倒顺序
o delete()：运算符 只能删除数组元素的值，而所占空间还在，总长度没变(arr.length)。
o shift()：删除数组中第一个元素，返回删除的那个值，并将长度减 1。
o pop()：删除数组中最后一个元素，返回删除的那个值，并将长度减 1。
o unshift()：往数组前面添加一个或多个数组元素，长度要改变。arrObj.unshift(“a”, “b”, “c”)
o push()：往数组结尾添加一个或多个数组元素，长度要改变。arrObj.push(“a”, “b”, “c”)
o concat()：连接数组
o slice()：返回数组的一部分
o sort()：对数组元素进行排序
o splice()：插入、删除或替换数组的元素

• 4、解释下http响应码200，301，304，502的含义？
o 200（ OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。
o 301 => 永久重定向/永久转移
o 304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验
o 502 => 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求

• 5、vue组件间通信方法？
o 父组件向子组件传递数据
 父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可
o 子组件向父组件传递数据
 子组件通过Vue实例方法KaTeX parse error: Unexpected character: '' at position 60: … o 非父子组件之间传递数据 ̲ 1、引入第三方new Vue…on(“自定义事件名”,methods中的方法名)
 3、在另一个兄弟组件中的methods中写函数，在函数中发布eventBus订阅的方法eventBus.$emit(“自定义事件名”)
 4、在组件的template中绑定事件(比如click)

• 6、如何区分数组和对象，至少2种？
o 方法一：通过ES6中的Array.isArray来识别
 Array.isArray([]) //true
 Array.isArray({}) //false
o 方法二：通过instanceof来识别
 [] instanceof Array //true
 {} instanceof Array //false
o 方法三：通过调用constructor来识别
 {}.constructor //返回object
 [].constructor //返回Array
o 方法四：通过Object.prototype.toString.call方法来识别
 Object.prototype.toString.call([]) //[“object Array”]
 Object.prototype.toString.call({}) //[“object Object”]

顺丰前端面试专题

• 1、介绍下 Set、Map 的区别？
o 应用场景 Set 用于数据重组，Map 用于数据储存
o Set：
 成员不能重复
 只有键值没有键名，类似数组
 可以遍历，方法有 add, delete,has
o Map:
 本质上是健值对的集合，类似集合
 可以遍历，可以跟各种数据格式转换

• 2、Promise 有几种状态，什么时候会进入 catch？
o Promise 有几种状态
 三个状态：pending、fulfilled、reject
 两个过程：padding -> fulfilled、padding -> rejected
o Promise 什么时候会进入 catch
 当 pending 为 rejectd 时，会进入 catch

• 3、什么是闭包？
o 闭包就是能够读取其他函数内部变量的函数。例如在 javascript 中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

• 4、简单说说 js 中的继承？
o 继承有以下六种方法
 1、原型链继承 JavaScript 实现继承的基本思想：通过原型将一个引用类型继承另一个引用类型的属性和方法
 2、借用构造函数继承(伪造对象或经典继承) JavaScript 实现继承的基本思想：在子类构造函数内部调用超类型构造函数。 通过使用 apply()和 call()方法可以在新创建的子类对象上执行构造函数
 3、组合继承(原型+借用构造)(伪经典继承) JavaScript 实现继承的基本思想：将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式将原型链和借用构造函数的技术组合到一起，从而取长补短发挥两者长处的一种继承模式
 4、型式继承 JavaScript 实现继承的基本思想：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型
 5、寄生式继承 JavaScript 实现继承的基本思想：创建一个仅用于封装继承过程的函数，该 函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。寄生式继承是原型式继承的加强版
 6、寄生组合式继承 JavaScript 实现继承的基本思想：通过借用函数来继承属性，通过原型链的混成形式来继承方法

• 5、介绍 this 各种情况？
o 1、以函数形式调用时，this 永远都是 window
o 2、以方法的形式调用时，this 是调用方法的对象
o 3、以构造函数的形式调用时，this 是新创建的那个对象
o 4、使用 call 和 apply 调用时，this 是指定的那个对象
o 5、箭头函数：箭头函数的 this 看外层是否有函数如果有，外层函数的 this 就是内部箭头函数的 this如果没有，就是 window
o 6、特殊情况：通常意义上 this 指针指向为最后调用它的对象。这里需要注意的一点就是如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象那么this 还是指向函数的实例

• 6、Call 和 apply，bind 的区别？
o call、apply和bind都是用于改变方法中this指向的。
o call调用 将方法中的this指向call中第一个参数，当第一个参数为null、undefined时，默认指向window，call中第一个参数之后是要传递给方法的参数列表。
o apply与call相似，不同之处在于传递给方法的参数形式不一致，apply传递给方法的参数是数组的形式。
o call和apply在改变方法的this指向时，会同时执行方法；而bind不会执行方法，而是返回改变this指向后的新方法。

• 7、请详细说下你对 vue 生命周期的理解？
o 总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：
o beforeCreate（创建前）
 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
o created（创建后）
 实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成。
o beforeMount（载入前）
 挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
o mounted（载入后）
 挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
o beforeUpdate（更新前）
 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程
o updated（更新后）
 在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
o beforeDestroy（销毁前）
 在实例销毁之前调用，实例仍然完全可用，这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
o destroyed（销毁后）
 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

• 8、vue-router 有哪几种导航钩子？
o 全局前置守卫 router.beforeEach
o 全局解析守卫 router.beforeResolve
o 全局后置钩子 router.afterEach
o 路由独享的守卫 beforeEnter
o 组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

• 9、的作用是什么？

o 作用：用于保留组件状态或避免重新渲染（缓存的作用）
 比如：当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用进行缓存，这样用户每次返回目录时，都能从缓存中快速渲染，而不用重新渲染。
o 该标签有两个属性include与exclude：
 include：字符串或者正则表达式。只有匹配的组件会被缓存
 exclude：字符串或者正则表达式。任何匹配的组件都不会被缓存。
 以上两个参数可以是逗号分隔字符串、正则表达式或一个数组，include=“a, b”、include="/a|b/"、include="[‘a’, ‘b’]"；
 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配。

• 10、v-if和v-show的区别及使用场景
o 区别：
 1.实现原理：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
 4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
o 使用场景：
 基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
o v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

Vue2+Vue3入门+实战：

从Vue2.0到Vue3.0一套全覆盖，核心知识+项目实战