2021前端必问面试题及答案 |
您所在的位置：网站首页 › 前端安全问题面试题及答案 › 2021前端必问面试题及答案 |
2021前端必问面试题及答案
|
web前端面试题【持续更新】
js基础
原型链和继承浅拷贝和深拷贝js中的堆和栈闭包setTimeout事件委托this指向，call/apply/bind，回调函数数组的常用操作set和weakset，map和weakmaptypeof原理0.1+0.2 === 0.3吗，为什么前端安全 xss 和 csrf说明BFC及其使用js基本数据类型循环Js数组都有哪些方法及其作用、用法、返回值？详细说了一下splice()Js数组去重说明冒泡排序、插入排序实现的思想、步骤、每趟的结果等什么是二分查找HTTP协议相关：请求头、响应头、状态码（5大类）、报文格式，一次http完整的过程，详细说一下Accept - Encoding的作用，和性能有关系？http有哪些请求方式？Get和post的区别？Ajax相关：如何实现，用jQuery实现一个ajax，有没有看过jQuery内部是如何实现的？说说链式调用什么是Cookie和Session？他们的区别？Js实现cookie和session两者有联系吗？是什么？localStorage、sessionStorage， cookie垂直居中布局 4中浮动引起的问题，如何清除浮动【4种postion和z-index的关系？DOM操作：获取、增、删、查、改等操作JS交换两个节点如何实现？tcp三次握手四次挥手如何设置一个元素不可见 4中什么是跨域问题，有哪些跨域方式JS 异步解决方案的发展历程以及优缺点行内元素和块元素区别，image 标签属于哪种evalObject.assign()reduce 求和普通函数和构造函数 ES6
let，const解构赋值set、weakSet、map、weakMapproxygeneratorreflectasync、awaitclasspromise箭头函数 vue
keep-alivemixinsr o u t e 和 route和 route和router的区别 react
有状态组件和无状态组件immutable.js生命周期函数react哪些生命周期可以执行setState高阶组件setStatepureCompoent 和 compoenthook和class对比redux 打包和优化
npm和npx重绘和重排__dirname 路径名 __filename 文件名webpack官网Webpack打包原理，如何实现等优化vue前端如何处理十万级别的大量数据后台返回大量数据（百万级）页面接收问题nvm，node，npm 面试真题
14-22 14 （2020-12-3）11-22（2020-12-4）13-20 （2020-12-15）2019-7-142019-7-152019-7-22
推荐使用网页查看，可以点击问题跳转到解析，持续更新中，祝大家都能找到合适的工作~ 【个人学习笔记，包含各种前端，及工作中遇到的问题，欢迎大家关注我 会持续更新基本每天都更新 】 (▽) 笔记地址地址：十二的前端笔记-语雀 js基础 原型链和继承
基本数据类型：名字和值都存在栈中 引用数据类型：名字在栈中，值在堆中，栈内存会提供一个引用地址，指向堆内存中的值 浅拷贝：1.for只遍历第一层 2.assign 3. =直接赋值 深拷贝：1.递归遍历所有层级 2.利用JSON对象【JSON.stringfy() JSON.parse()】 3.通过jQuery的extend方法实现深拷贝 4.lodash函数库实现深拷贝 5.用slice实现对数组的深拷贝,slice() 方法可从已有的数组中返回选定的元素。6.使用扩展运算符实现深拷贝 8.Reflect法 9.用concat实现对数组的深拷贝 10.直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。11.手动实现深拷贝 7.如对象的value是基本类型，可以用Object.assign来实现深拷贝，但是要把它赋值给一个空对象 assign第一层是深拷贝，第二层以后是浅拷贝 function deepClone2(obj) { var _obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone; } // 无法实现对对象中方法的深拷贝，会显示为undefined var array = [1,2,3,4]; var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝 let result = _.cloneDeep(test)栈和堆 js中的堆和栈 栈（stack）：简单地数据段，存放在栈中，有固定大小的内存（自动分配），自动释放 基本数据类型：number，string，boolean，undefined，null栈存储了什么：变量名，基本数据类型值，地址全局作用域，私有作用域，都属是栈内存，理论上，存储的越少，运行速度越快先进后出栈内存回收：作用域销毁（立即销毁，不销毁，不立即销毁） 全局作用域销毁：一般情况不销毁，页面关闭，整个作用域销毁私有作用域销毁 ： 不销毁销毁不立即销毁 堆（heap）：动态分配内存，大小不定也不会自动释放 引用类型：栈中存放地址，指向堆中的对象，当我们要获取（函数，数组，对象等）的时候，先从栈中获取地址，然后从堆中获取数据先进先出堆存储了什么：引用数据类型的值内存回收：GC垃圾回收机制 chrome：标记法，每隔一段时间对所有的空间地址检测，如果没有被占用，立即回收ie和火狐：计数法，空间地址被占用一次+1，空闲一次空间地址-1，如果为0 被回收 闭包闭包：https://www.yuque.com/nizhidaoba/ufw9so/no2gre 闭包函数：声明在一个函数中的函数，叫做闭包函数。 闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。 参数和变量不会被垃圾回收机制回收 function a() { var name = 'Shier' return function(){ return name } } var b = a() console.log(b()) // 通过返回函数中返回的内部变量，使函数外部能够使用和访问函数内部变量 setTimeoutsetTimeout有两个参数，第一个参数为一个函数，我们通过该函数定义将要执行的操作。第二个参数为一个时间毫秒数，表示延迟执行的时间。 var timer = setTimeout(function() { console.log('如果不清除我，我将会一秒之后出现。'); }, 1000) clearTimeout(timer); // 清除之后，通过setTimeout定义的操作并不会执行 for (var i=1; ix*y) console.log( sum ); //求和，10 console.log( mul ); //求乘积，24 //高级用法 //（1）计算数组中每个元素出现的次数 //（2）数组去重 //（3）将二维数组转化为一维 //（4）将多维数组转化为一维 //（5）、对象里的属性求和 普通函数和构造函数普通函数：无返回值，person()调用， 构造函数：返回实例对象，let per = new Person()调用，内部用this来构造属性和方法 构造函数流程： 1.立刻在堆内存中创建一个对象 2.将新建的对象设置为函数中的this 3.逐个执行函数中的代码 4.将新建对象作为返回值 function Person(name,job,age) { this.name=name; this.job=job; this.age=age; this.sayHi=function() { alert(“Hi”) } } ES6 let，const1）let和const不存在变量提升 2）let：块级作用域 3）const：声明的变量不允许改变，声明的时候必须赋值 4）对于复合类型的变量（如数组，对象），const保存的只是地址，里面的内容是可以改变的，想要整个对象都不允许改变，可以使用Object.freeze()方法 5）一切用var声明的全局变量都是window的属性 6）有声明和没有声明的全局变量都会成为window的属性，有什么区别呢？ 没有声明的变量可以被删除，而声明的不可以 7）用let ，const 和 calss声明的全局变量不归window所有 解构赋值数组解构：可以设置默认值，可以赋值给新数组（修改新数组不会改变老数组） let a = [0,1,2,3] let b = [...a] b.push(4) console.log(a) // [0,1,2,3] console.log(b) // [0,1,2,3,4]对象解构：对象的解构赋值是根据key值进行匹配 let {name="swr",age} = {age:28} // 默认值给函数传不确定参数数量时，是通过arguments来获取的 function sum(...args){ // 使用...扩展运算符，arg要放在最后一个参数 //使用原始的arguments。是个伪数组，不利于操作，...args是数组方便操作 console.log(args) // [ 1, 2, 3, 4, 5, 6 ] args是一个数组 return eval(args.join('+')) } console.log(sum(1,2,3,4,5,6)) // 21 // 但是可以用Array.from把伪数组转为数组 let likeArr = { "0":1,"1":2,"length":2 } let arr = Array.from(likeArr) console.log(arr) // [1,2] set、weakSet、map、weakMap proxy generator reflect async、await class promise 箭头函数不适合使用箭头函数的场景 对象中的方法 const obj = { x: 1, print: () => { console.log(this === window); // => true console.log(this.x); // undefined } }; obj.print(); //解析：print 方法用了箭头函数，其内部的 this 指向的还是上下文 window //上下文中并没有定义 x，所以 this.x 输出为 undefined。 //解决办法：用 ES6 的短语法，或者传统的函数表达式print(){}都可以。 原型中的方法 function Cat (name) { this.name = name; } Cat.prototype.sayCatName = () => { console.log(this === window); // => true return this.name; }; const cat = new Cat(‘Miao’); cat.sayCatName(); // => undefined // 使用箭头函数会导致运行时的执行上下文错误 Cat.prototype.sayCatName = function () { console.log(this === cat); // => true return this.name; }; // sayCatName 变回传统的函数表达式之后，被调用时的执行上下文就会指向新创建的 cat 实例。 事件的回调 构造函数 箭头函数的用法 vue keep-alive mixinshttps://zhuanlan.zhihu.com/p/62729974 2.写 React/Vue 项目时为什么要在组件中写 key，其作用是什么？ key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度。vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff 函数中。可以先了解一下 diff 算法。 在交叉对比的时候，当新节点跟旧节点头尾交叉对比没有结果的时候，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。如果没找到就认为是一个新增节点。而如果没有 key，那么就会采用一种遍历查找的方式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言。map 映射的速度更快。 r o u t e 和 route和 route和router的区别$route: 正在跳转的路由对象，可以从里面获取name，path，params，query等 r o u t e r : 是 v u e R o u t e r 的 实 例 ， 相 当 于 一 个 全 局 的 路 由 对 象 ， 包 含 很 多 属 性 和 子 对 象 ， 例 如 h i s t o r y 对 象 ， t h i s . router:是vueRouter的实例，相当于一个全局的路由对象，包含很多属性和子对象，例如history对象，this. router:是vueRouter的实例，相当于一个全局的路由对象，包含很多属性和子对象，例如history对象，this.router.push() react 有状态组件和无状态组件性能更高，因为他就是一个函数 由于是无状态组件，所以，无论props会否变更，都会重新刷新这个组件 https://segmentfault.com/a/1190000016774551 const head = (props) => { return {props.name} } immutable.jshttps://www.jianshu.com/p/825b7b4c401d 生命周期函数 react哪些生命周期可以执行setState 高阶组件https://segmentfault.com/a/1190000019834626 https://www.jianshu.com/p/0aae7d4d9bc1 setState在this.setState({})之后打印信息，会出现延迟，想要同步需要在this.setState({},()=>{回调函数})，在回调函数中打印数据，可以同步 pureCompoent 和 compoenthttps://www.jianshu.com/p/c41bbbc20e65 hook和class对比https://www.jianshu.com/p/b666ac2407b0 reduxhttp://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html 打包和优化 npm和npxnpm常用操作 https://www.nowcoder.com/ta/front-end 重绘和重排https://www.cnblogs.com/soyxiaobi/p/9963019.html __dirname 路径名 __filename 文件名如果没有传入 path 片段，则 path.resolve() 会返回当前工作目录的绝对路径。 console.log(__filename); // 打印: /Users/mjr/example.js console.log(__dirname); // 打印: /Users/mjr webpack官网 Webpack打包原理，如何实现等 优化vue1）source-map：false：不生成.map文件 2）路由中配置reslove 按需加载 3）大的三方包：echert等，用《script标签引入，webpack中去掉这些打包 前端如何处理十万级别的大量数据worker：https://juejin.im/post/6844903821278199822utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com 后台返回大量数据（百万级）页面接收问题tomcat的压缩机制：https://blog.csdn.net/baidu_16250655/article/details/88688299 nvm，node，npmnvm：nodejs 版本管理工具。一个 nvm 可以管理很多 node 版本和 npm 版本。 nodejs：在项目开发时的所需要的代码库 npm：nodejs 包管理工具。 在安装的 nodejs 的时候，npm 也会跟着一起安装，它是包管理工具。 npm 管理 nodejs 中的第三方插件 关系： nvm 管理 nodejs 和 npm 的版本 npm 可以管理 nodejs 的第三方插件 面试真题 14-22 14 （2020-12-3） es6的assign能不能深拷贝：第一层是深拷贝，第二层是浅拷贝Json.string fly能深拷贝吗有什么问题：异步回调地狱怎么解决：promise，async/awaitPromise和回调函数性能问题chrome中查看内存泄漏React移除组件用哪个函数：componentWillUnmount()react更改数据的方法：this.setState()this.setstate什么时候传回调函数加载数据在willmontd有什么问题，那应该在哪个生命周期加载React的mvvm表示哪部分代码循环的时候使用key为什么Async 可以停止吗 11-22（2020-12-4） List itemjs数据类型this指向，如何修改this指向问题跨域有几种解决方式回调函数是什么，有什么问题，什么时候会发生内存泄露promise有几种状态，有什么静态方法js设计模式数据结构函数柯里化es6：泛型，proxy，reflect，迭代器ts：注释，装饰器react的super为什么要写，有什么作用高阶函数是什么react传值问题做一个及时聊天功能的思路 13-20 （2020-12-15） app中的桥是异步的还是同步的异步async await方法内部是什么还用过哪些es6方法http和https的区别，能相互请求吗为什么选择sass ，是做什么用的app兼容性布局，除了rem还可以用什么rpx跨域是用什么实现前端请求中间层，axios拦截Nginx除了代理还能做什么，代理的原理是什么Webpack做过哪些配置sessionstroage localstroage cookie的区别小程序中和vue页面中的数据不通，如何解决app中数据和vue页面数据不互通如何解决echart 底层用什么实现的，有什么坑吗spa单页面应用，如何加快首次加载的速度更新小程序或者app包的时候，如何解决缓存问题 2019-7-14 vue的虚拟domes6与数组有关的操作ajax原生vuex相关的用法vue的子父传值前端安全问题cookie，session，localstorage用法区别vue的路由如何传值var，let，const的区别forEach，map的区别数组的浅拷贝和深拷贝 2019-7-15 浏览器一个http请求过程http运行js为什么是单线程的js的事件绑定，事件监听，事件委托vue生命周期以及作用es6的箭头函数 2019-7-22 css如何清除浮动浮动会带来什么问题居中的方法盒模型flex兼容到ie几事件代理数组展开作用域var let const的区别改变this指向react的生命周期项目中的图片懒加载项目中的tree组件是如何编写的左边200px固定，右边自适应布局（清除浮动的方法）this指向事件代理 |
原型链：js对象独有的__proto__属性，当访问一个对象的属性时，如果该对象内不存在这个属性，会去它的__proto__属性所指向的那个对象（父对象）里找，直到null proto：对象都有私有属性__proto__（），从对象指向实例原型 prototype：函数独有的属性，从一个函数指向一个对象，包含所有实例可共享的属性和方法，任何函数创建时，会默认创建该函数的prototype对象 constructor：实例的构造函数（constructor）属性，指向实例 所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。【本文地址】