产品展示

Products Classification

2020 前端面试 | 第一波面试题总结

  • 产品时间:2022-12-29 23:20
  • 价       格:

简要描述:一入前端深似海前言先先容一下自己的情况吧内蒙古呼和浩特某大学结业,专科,盘算机多媒体专业结业16年出来事情,事情履历四年,之前主要做平面相关,自己喜欢瞎折腾,从17年开始研究前端,然后公司内部转岗到开发部门事情,算下来前端履历也快三年之久。年底由于种种原因想换一份事情,但由于太忙,没认真搞简历,也没怎么温习基础,导致许多原来会的都没敢往简历上写。 于是写了一个简版的简历挂在Boss直聘上,准备年过完再认真筹备这件事情。令我意外的是,近一个月收到多家公司的面试邀请。...

详细介绍
本文摘要:一入前端深似海前言先先容一下自己的情况吧内蒙古呼和浩特某大学结业,专科,盘算机多媒体专业结业16年出来事情,事情履历四年,之前主要做平面相关,自己喜欢瞎折腾,从17年开始研究前端,然后公司内部转岗到开发部门事情,算下来前端履历也快三年之久。年底由于种种原因想换一份事情,但由于太忙,没认真搞简历,也没怎么温习基础,导致许多原来会的都没敢往简历上写。 于是写了一个简版的简历挂在Boss直聘上,准备年过完再认真筹备这件事情。令我意外的是,近一个月收到多家公司的面试邀请。

hth华体会最新网站

一入前端深似海前言先先容一下自己的情况吧内蒙古呼和浩特某大学结业,专科,盘算机多媒体专业结业16年出来事情,事情履历四年,之前主要做平面相关,自己喜欢瞎折腾,从17年开始研究前端,然后公司内部转岗到开发部门事情,算下来前端履历也快三年之久。年底由于种种原因想换一份事情,但由于太忙,没认真搞简历,也没怎么温习基础,导致许多原来会的都没敢往简历上写。

于是写了一个简版的简历挂在Boss直聘上,准备年过完再认真筹备这件事情。令我意外的是,近一个月收到多家公司的面试邀请。因此总结一波2020年最新面试题,希望对大家有所资助!后面的谜底为自行整理,如有疏漏,接待指正!面试总结重视基础和原理重视基础和原理重视基础和原理电话一面请先容一下原型结构函数是一种特殊的方法,主要用来在建立工具时初始化工具。

每个函数都有prototype(原型)属性(注:箭头函数以及function.prototype.bind()函数是没有prototype(原型)的),这个prototype(原型)属性是一个指针,指向一个工具,这个工具的用途是包罗特定类型的所有实例共享的属性和方法,即这个原型工具是用来给实例工具共享属性和方法的。每个实例工具的__proto__都指向这个结构函数/类的prototype属性。面向工具的三大特性:继续/多态/封装关于new操作符:1. new执行的函数, 函数内部默认生成了一个工具2. 函数内部的this默认指向了这个new生成的工具3. new执行函数生成的这个工具, 是函数的默认返回值ES5例子:function Person(obj) {this.name = obj.namethis.age= obj.age}// 原型方法Person.prototype.say = function() { console.log('你好,', this.name )}// p为实例化工具,new Person()这个操作称为结构函数的实例化let p = new Person({name: '番茄', age: '27'})console.log(p.name, p.age)p.say()ES6例子:class Person{constructor(obj) { this.name = obj.namethis.age= obj.age } say() { console.log(this.name) }}let p = new Person({name: 'ES6-番茄', age: '27'})console.log(p.name, p.age)p.say()ES5结构函数的写法及用法ES6类的写法及用法关于原型的继续我们借助寄生组合继续function Person(obj) { this.name = obj.name this.age = obj.age}Person.prototype.add = function(value){ console.log(value)}var p1 = new Person({name:"番茄", age: 18})function Person1(obj) { Person.call(this, obj) this.sex = obj.sex}// 这一步是继续的关键Person1.prototype = Object.create(Person.prototype)Person1.prototype.play = function(value){ console.log(value)}var p2 = new Person1({name:"鸡蛋", age: 118, sex: "男"})关于面向工具的更多相关信息请私信我发你我的小我私家博客总结闭包首先说明什么是闭包,闭包简朴来说就是函数嵌套函数,内部函数引用来外部函数的变量,从而导致垃圾接纳机制没有把当前变量接纳掉,这样的操作带来了内存泄漏的影响,当内存泄漏到一定水平会影响你的项目运行变得卡顿等等问题。

因此在项目中我们要只管制止内存泄漏。原型链原型链实际上在上面原型的问题中就有涉及到,在原型的继续中,我们继续来多个原型,这里再提一下实现完美继续的方案,通过借助寄生组合继续,PersonB.prototype = Object.create(PersonA.prototype)这是当我们实例化PersonB获得实例化工具,会见实例化工具的属性时会触发get方法,它会先在自身属性上查找,如果没有这个属性,就会去__proto__中查找,一层层向上直到查找到顶层工具Object,这个查找的历程就是原型链来。请先容一下vuex以及使用和注意事项vuex是一个专为vue.js应用法式开发的状态治理器,它接纳集中式存储治理应用的所有组件的状态,而且以相应的规则保证状态以一种可以预测的方式发生变化。

state: vuex使用单一状态树,用一个工具就包罗来全部的应用层级状态mutation: 更改vuex中state的状态的唯一方法就是提交mutationaction: action提交的是mutation,而不是直接变换状态,action可以包罗任意异步操作getter: 相当于vue中的computed盘算属性请先容一下vue-router以及使用和注意事项vue-router是vuex.js官方的路由治理器,它和vue.js的焦点深度集成,让构建但页面应用变得易如反掌<router-link> 组件支持用户在具有路由功效的应用中 (点击) 导航。通过 to 属性指定目的地址<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<keep-alive> 组件是一个用来缓存组件router.beforeEachrouter.afterEachto: Route: 即将要进入的目的 路由工具from: Route: 当前导航正要脱离的路由next: Function: 一定要挪用该方法来 resolve 这个钩子。执行效果依赖 next 方法的挪用参数。

先容了路由守卫及用法,在项目中路由守卫起到的作用等等浅拷贝/深拷贝浅拷贝:浅拷贝通过ES6新特性Object.assign()或者通过扩展运算法...来到达浅拷贝的目的,浅拷贝修改副本,不会影响原数据,但缺点是浅拷贝只能拷贝第一层的数据,且都是值类型数据,如果有引用型数据,修改副本会影响原数据。深拷贝:通过使用JSON.parse(JSON.stringify())来实现深拷贝的目的,但使用JSON拷贝也是有缺点的,当要拷贝的数据中含有undefined/function/symbol类型是无法举行拷贝的,固然我们想项目开发中需要深拷贝的数据一般不会含有以上三种类型,如有需要可以自己在封装一个函数来实现。vue中通信有哪些方式1.props和$emit2.中央事件总线 EventBus(基本不用)3.vuex(官方推荐状态治理器)4.$parent和$children固然另有一些其他措施,但基本不常用,或者用起来太庞大来。

先容来通信的方式,还可以扩展说一下使用场景,如何使用,注意事项之类的。你在事情中遇到过那些问题,是如何解决的?经常遇到的问题就是Cannot read property ‘prototype’ of undefined解决措施通过浏览器报错提示代码定位问题,解决问题Vue项目中遇到视图不更新,方法不执行,埋点不触发等问题一般解决方案检察浏览器报错,检察代码运行到谁人阶段未之行竣事,阅读源码以及相关文档等然后举出来最近开发的项目中遇到的算是两个比力大的问题webpack设置入口出口module.exports={ //入口文件的设置项 entry:{}, //出口文件的设置项 output:{}, //模块:例如解读CSS,图片如何转换,压缩 module:{}, //插件,用于生产模版和各项功效 plugins:[], //设置webpack开发服务功效 devServer:{}}简朴形貌了一下这几个属性是干什么的。形貌一下npm run dev / npm run build执行的是哪些文件通过设置proxyTable来到达开发情况跨域的问题,然后又可以扩展和他聊聊跨域的发生,如何跨域最后可以在聊聊webpack的优化,例如babel-loader的优化,gzip压缩等等webpack3和webpack4的区别1.modewebpack增加了一个mode设置,只有两种值development | production。

对差别的情况他会启用差别的设置。2.CommonsChunkPluginCommonChunksPlugin已经从webpack4中移除。可使用optimization.splitChunks举行模块划分(提取公用代码)。

可是需要注意一个问题,默认设置只会对异步请求的模块举行提取拆分,如果要对entry举行拆分需要设置optimization.splitChunks.chunks = 'all'。3.webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。4.代码支解。

使用动态import,而不是用system.import或者require.ensure5.vue-loader。使用vue-loader插件为.vue文件中的各部门使用相对应的loader,好比css-loader等6.UglifyJsPlugin现在也不需要使用这个plugin了,只需要使用optimization.minimize为true就行,production mode下面自动为trueoptimization.minimizer可以设置你自己的压缩法式以上或许就是一面的一些比力重要的题目了,另有一些很简朴的问题和代码执行的问题就没有写出来了电话二面陈述输入URL回车后的历程1.读取缓存: 搜索自身的 DNS 缓存。

(缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤,直接会见该 IP 地址。)2.DNS 剖析:将域名剖析成 IP 地址3.TCP 毗连:TCP 三次握手,浅易形貌三次握手 客户端:服务端你在么? 服务端:客户端我在,你要毗连我么? 客户端:是的服务端,我要链接。毗连买通,可以开始请求来 4.发送 HTTP 请求5.服务器处置惩罚请求并返回 HTTP 报文6.浏览器剖析渲染页面7.断开毗连:TCP 四次挥手关于第六步浏览器剖析渲染页面又可以聊聊如果返回的是html页面凭据 HTML 剖析出 DOM 树凭据 CSS 剖析生成 CSS 规则树联合 DOM 树和 CSS 规则树,生成渲染树凭据渲染树盘算每一个节点的信息凭据盘算好的信息绘制页面陈述一下http基本观点:HTTP,全称为 HyperText Transfer Protocol,即为超文本传输协议。是互联网应用最为广泛的一种网络协议所有的 www 文件都必须遵守这个尺度。

http特性:HTTP 是无毗连无状态的HTTP 一般构建于 TCP/IP 协议之上,默认端口号是 80HTTP 可以分为两个部门,即请求和响应。http请求:HTTP 界说了在与服务器交互的差别方式,最常用的方法有 4 种划分是 GET,POST,PUT, DELETE。URL 全称为资源形貌符,可以这么认为:一个 URL 地址对应着一个网络上的资源,而 HTTP 中的 GET,POST,PUT,DELETE 就对应着对这个资源的查询,修改,增添,删除4个操作。HTTP 请求由 3 个部门组成,划分是:状态行,请求头(Request Header),请求正文。

HTTP 响应由 3 个部门组成,划分是:状态行,响应头(Response Header),响应正文。HTTP 响应中包罗一个状态码,用来表现服务器对客户端响应的效果。状态码一般由3位组成:1xx : 表现请求已经接受了,继续处置惩罚。

2xx : 表现请求已经处置惩罚掉了。3xx : 重定向。4xx : 一般表现客户端有错误,请求无法实现。

5xx : 一般为服务器端的错误。好比常见的状态码:200 OK 客户端请求乐成。301 Moved Permanently 请求永久重定向。

302 Moved Temporarily 请求暂时重定向。304 Not Modified 文件未修改,可以直接使用缓存的文件。

400 Bad Request 由于客户端请求有语法错误,不能被服务器所明白。401 Unauthorized 请求未经授权,无法会见。403 Forbidden 服务器收到请求,可是拒绝提供服务。

服务器通常会在响应正文中给出不提供服务的原因。404 Not Found 请求的资源不存在,好比输入了错误的URL。

500 Internal Server Error 服务器发生不行预期的错误,导致无法完成客户端的请求。503 Service Unavailable 服务器当前不能够处置惩罚客户端的请求,在一段时间之后,服务器可能会恢复正常。或许另有一些关于http请求和响应头信息的先容。Vue路由守卫有哪些,怎么设置,使用场景等常用的两个路由守卫:router.beforeEach 和 router.afterEach每个守卫方法吸收三个参数:to: Route: 即将要进入的目的 路由工具from: Route: 当前导航正要脱离的路由next: Function: 一定要挪用该方法来 resolve 这个钩子。

hth华体会最新网站

在项目中,一般在beforeEach这个钩子函数中举行路由跳转的一些信息判断。判断是否登录,是否拿到对应的路由权限等等。扩展形貌路由传参,新开页面,编程式导航等等。数组去重第一种: 通过ES6新特性Set()例如: var arr = [1, 2, 3, 1, 2]; var newArr= [...new Set(arr)]ES6新特性Set()去重第二种:封装函数使用 {} 和【】function uniqueEasy(arr) { if(!arr instanceof Array) { throw Error('当前传入的不是数组') } let list = [] let obj = {} arr.forEach(item => { if(!obj[item]) { list.push(item) obj[item] = true } }) return list}封装函数使用 {} 和【】固然另有其他的方法,但我在项目中一般使用以上两种基本满足Set, Map解构ES6 提供了新的数据结构 Set。

它类似于数组,可是成员的值都是唯一的,没有重复的值。Set 自己是一个结构函数,用来生成 Set 数据结构。ES6 提供了 Map 数据结构。

它类似于工具,也是键值对的荟萃可是“键”的规模不限于字符串,种种类型的值(包罗工具)都可以看成键。对数组排序第一种方法使用sort方法,例如:var arr = [1,2,3,2,3,7,1,23,2 ,4]sort方法排序第二种手写冒泡排序var arr = [1, 2, 3, 2, 3, 7, 1, 23, 2, 4]function sort(arr) {for(let i = 0; i < arr.length; i++){for(let j = 0; j < arr.length - i - 1; j++) { if(arr[j] > arr[j + 1]) { let temp = arr[j] arr[j] = arr[j + 1] arr[j + 1] = temp } }}}console.log(arr)手写冒泡排序说一说js是什么语言JavaScript是一种直译式剧本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部门,广泛用于客户端的剧本语言,最早是在HTML(尺度通用标志语言下的一个应用)网页上使用,用来给HTML网页增加动态功效。js语言是弱语言类型, 因此我们在项目开发中当我们随意更该某个变量的数据类型后有可能会导致其他引用这个变量的方法中报错等等。

后续大型项目开发中用TS比力多,TS是JS的超集说说ES6新特性1.ES6引入来严格模式 变量必须声明后在使用 函数的参数不能有同名属性, 否则报错 不能使用with语句 (说实话我基本没用过) 不能对只读属性赋值, 否则报错 不能使用前缀0表现八进制数,否则报错 (说实话我基本没用过) 不能删除不行删除的数据, 否则报错 不能删除变量delete prop, 会报错, 只能删除属性delete global[prop] eval不会在它的外层作用域引入变量 eval和arguments不能被重新赋值 arguments不会自动反映函数参数的变化 不能使用arguments.caller (说实话我基本没用过) 不能使用arguments.callee (说实话我基本没用过) 克制this指向全局工具 不能使用fn.caller和fn.arguments获取函数挪用的客栈 (说实话我基本没用过) 增加了保留字(好比protected、static和interface)2.关于let和const新增的变量声明3.变量的解构赋值4.字符串的扩展 includes():返回布尔值,表现是否找到了参数字符串。startsWith():返回布尔值,表现参数字符串是否在原字符串的头部。

endsWith():返回布尔值,表现参数字符串是否在原字符串的尾部。5.数值的扩展 Number.isFinite()用来检查一个数值是否为有限的(finite)。Number.isNaN()用来检查一个值是否为NaN。

6.函数的扩展 函数参数指定默认值7.数组的扩展 扩展运算符8.工具的扩展 工具的解构9.新增symbol数据类型10.Set 和 Map 数据结构 ES6 提供了新的数据结构 Set。它类似于数组,可是成员的值都是唯一的,没有重复的值。Set 自己是一个结构函数,用来生成 Set 数据结构。Map它类似于工具,也是键值对的荟萃,可是“键”的规模不限于字符串,种种类型的值(包罗工具)都可以看成键。

11.Proxy Proxy 可以明白成,在目的工具之前架设一层“拦截”,外界对该工具的会见 都必须先通过这层拦截,因此提供了一种机制,可以对外界的会见举行过滤和改写。Proxy 这个词的原意是署理,用在这里表现由它来“署理”某些操作,可以译为“署理器”。

Vue3.0使用了proxy12.Promise Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。特点是: 工具的状态不受外界影响。一旦状态改变,就不会再变,任何时候都可以获得这个效果。

13.async 函数 async函数对 Generator 函数的区别: (1)内置执行器。Generator 函数的执行必须靠执行器,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行。

(2)更好的语义。async和await,比起星号和yield,语义更清楚了。

async表现函数里有异步操作,await表现紧跟在后面的表达式需要等候效果。(3)正常情况下,await下令后面是一个 Promise 工具。

如果不是,会被转成一个立刻resolve的 Promise 工具。(4)返回值是 Promise。async函数的返回值是 Promise 工具,这比 Generator 函数的返回值是 Iterator 工具利便多了。

hth华体会全站app

你可以用then方法指定下一步的操作。14.Class class跟let、const一样:不存在变量提升、不能重复声明... ES6 的class可以看作只是一个语法糖,它的绝大部门功效 ES5 都可以做到,新的class写法只是让工具原型的写法越发清晰、更像面向工具编程的语法而已。15.Module ES6 的模块自动接纳严格模式,不管你有没有在模块头部加上"use strict";。import和export下令以及export和export default的区别 关于ES6新特性有许多,你可以每个都和面试官详细聊聊细节Css3新特性1.过渡 transition2.动画 animation3.形状转换 transform4.阴影 box-shadow5.滤镜 Filter6.颜色 rgba7.栅格结构 gird8.弹性结构 flex等等还多...CSS3新特性用到的比力少,我自己一般都是用到什么去查询什么,可是以上几点常用的还是需要相识说一说你用过的UI框架Element-UI Vant Antd 我自己主要项目中用这几类。

大家可以扩展说明形貌一下自己是如何二次封装组件,封装分页,弹窗,提示等等。说一说什么是跨域,怎么解决因为浏览器出于宁静思量,有同源计谋。也就是说,如果协议、域名或者端口有一个差别就是跨域Ajax 请求会失败。为来防止CSRF攻击1.JSONP JSONP 的原理很简朴,就是使用 <script> 标签没有跨域限制的毛病。

通过 <script> 标签指向一个需要会见的地址并提供一个回调函数来吸收数据当需要通讯时。<script src="http://domain/api?param1=a¶m2=b&callback=jsonp"></script> <script> function jsonp(data) { console.log(data) } </script> JSONP 使用简朴且兼容性不错,可是只限于 get 请求。2.CORS CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

3.document.domain 该方式只能用于二级域名相同的情况下,好比 a.test.com 和 b.test.com 适用于该方式。只需要给页面添加 document.domain = 'test.com' 表现二级域名都相同就可以实现跨域4.webpack设置proxyTable设置开发情况跨域5.nginx署理跨域6.iframe跨域7.postMessage这种方式通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息,另一个页面判断泉源并吸收消息说一说前端性能优化方案三个方面来说明前端性能优化一: webapck优化与开启gzip压缩 1.babel-loader用 include 或 exclude 来帮我们制止不须要的转译,不转译node_moudules中的js文件 其次在缓存当前转译的js文件,设置loader: 'babel-loader?cacheDirectory=true' 2.文件接纳按需加载等等 3.详细的做法很是简朴,只需要你在你的 request headers 中加上这么一句: accept-encoding:gzip 4.图片优化,接纳svg图片或者字体图标 5.浏览器缓存机制,它又分为强缓存和协商缓存二:当地存储——从 Cookie 到 Web Storage、IndexedDB 说明一下SessionStorage和localStorage另有cookie的区别和优缺点三:代码优化 1.事件署理 2.事件的节省和防抖 3.页面的回流和重绘 4.EventLoop事件循环机制 5.代码优化等等说一说SessionStorage和localStorage另有cookie配合点:都是生存在浏览器端、且同源的差别点: 1.cookie数据始终在同源的http请求中携带(纵然不需要),即cookie在浏览器和服务器间往返通报。

cookie数据另有路径(path)的观点,可以限制cookie只属于某个路径下 sessionStorage和localStorage不会自动把数据发送给服务器,仅在当地生存。2.存储巨细限制也差别,cookie数据不能凌驾4K,sessionStorage和localStorage可以到达5M 3.sessionStorage:仅在当前浏览器窗口关闭之前有效; localStorage:始终有效,窗口或浏览器关闭也一直生存,当地存储,因此用作持久数据; cookie:只在设置的cookie逾期时间之前有效,纵然窗口关闭或浏览器关闭 4.作用域差别 sessionStorage:不在差别的浏览器窗口中共享,纵然是同一个页面; localstorage:在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在 cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭,数据仍然存在固然细说另有很多多少可以说的方面,就看你和面试官怎么聊了,可是关键点要说出来。说一说你用过的css结构gird结构,layout结构,flex结构,双飞翼,圣杯结构等,详细详细形貌我就不写啦。Promise是什么,解决了什么,之前怎么实现的Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

用来解决来之前在ajax请求中回调请求发生的回调地使得现在的代码越发合理越发优雅,也越发容易定位查找问题。形貌Promise工具代表一个异步操作,有三种状态:pending(举行中)、fulfilled(已乐成)和rejected(已失败)。

只有异步操作的效果,可以决议当前是哪一种状态,任何其他操作都无法改变这个状态。缺点无法取消Promise,一旦新建它就会立刻执行,无法中途取消。

如果不设置回调函数,Promise内部抛出的错误,不会反映到外部。当处于pending状态时,无法得知现在希望到哪一个阶段(刚刚开始还是即将完成)说说浏览器缓存缓存可以淘汰网络 IO 消耗,提高会见速度。浏览器缓存是一种操作简朴、效果显著的前端性能优化手段许多时候,大家倾向于将浏览器缓存简朴地明白为“HTTP 缓存”。但事实上,浏览器缓存机制有四个方面,它们根据获取资源时请求的优先级依次排列如下:Memory CacheService Worker CacheHTTP CachePush Cache缓存它又分为强缓存和协商缓存。

优先级较高的是强缓存,在掷中强缓存失败的情况下,才会走协商缓存实现强缓存,已往我们一直用 expires。当服务器返回响应时,在 Response Headers 中将逾期时间写入 expires 字段,现在一般使用Cache-Control 两者同时泛起使用Cache-Control 协商缓存,Last-Modified 是一个时间戳,如果我们启用了协商缓存,它会在首次请求时随着 Response Headers 返回:每次请求去判断这个时间戳是否发生变化。从而去决议你是304读取缓存还是给你返回最新的数据三面HRHR谈薪水,问一些公司方面待遇方面,为啥要去职之类的。这个就要看你怎么说来,说得好薪资多点。

说欠好薪资就要被压一些,重点就是不要说上家公司的坏话。可以谈谈你日后的生长偏向,准备专精于某个方面,例如数据可视化之类的末端面试题还在连续总结中,以上是部门总结的面试题,如果谜底有错误请指出利便修正。

请关注我,定时更新前端相关知识。


本文关键词:hth华体会最新网站,2020,前端,面试,第一,波面,试题,总结,一入

本文来源:hth华体会最新网站-www.nhhmw.com

 


产品咨询

留言框

  • 产品:

  • 留言内容:

  • 您的单位:

  • 您的姓名:

  • 联系电话:

  • 常用邮箱:

  • 详细地址:


推荐产品

Copyright © 2008-2022 www.nhhmw.com. hth华体会最新网站科技 版权所有 备案号:ICP备65648000号-8

在线客服 联系方式 二维码

服务热线

072-276908026

扫一扫,关注我们