前端最新2022面试题(JS)(最新前端技术)

前端最新2022面试题(JS) 这里写自定义目录标题JavaScript1、解释一下什么是闭包 ?2、解释一下原型和原型链 ?原型原型链3、说一下 ES6 中你熟悉的一些内容 ?4、数组排序的方式 ?5、什么是事件轮询(EventLoop) ?6、数组的一些API, 哪些能够改变原数组, 那些不能 ?7、for 循环与 forEach 的区别 ?8、深浅拷贝 ?9、url 的组成 ?10、常见的跨域方式 ?11、Promise 的使用场景 ?12、let, const, var 的区别 ?13、对 this 的理解, 三种改变 this 的方式 ?14、cookie, localStorage,sessionStorage 的区别 ?15、输入 url 到打开页面 都做了什么事情 ?16、原生 ajax 的流程 ?17、如何实现继承 ?18、null 和 undefined 的区别 ?19、函数的节流和防抖 ?20、什么是 Promise ?21、普通函数与箭头函数的区别 ?22、设计模式有哪些, 分别说一说 ?23、Promsie 和 async/await 的区别和使用 ?24、谈一谈垃圾回收机制 ?25、数组去重 ?26、判断对象为空 ?27、如何用一次循环找到数组中两个最大的值 ?28、new 一个对象的过程 ?29、箭头函数为什么不能用 new ?30、如何实现数组的复制 ?31、http 的理解 ?32、http 和 https 的区别 ?33、git 的常用指令有哪些 ?34、平时是使用 git 指令还是图形化工具 ?35、Promsie.all() 使用过吗, 它是怎么使用的 ?36、什么是三次握手和四次挥手 ?37、for in 和 for of 循环的区别 ?38、async/await 怎么抛出错误异常 ?39、 函数式编程和命令式编程的区别 ?40、http 常见的响应状态码 ?41、 什么是事件流以及事件流的传播机制 ?42、模块化语法 ? commonJS AMD CMD ES6 Module43、 什么是懒加载和预加载 ?44、token 一般存放在哪里 ? 为什么不存放在 cookie 内 ?45、 less 和 sass 的区别 ?44、浏览器的同源策略机制 ?45、 浏览器的缓存有哪些 ? 什么时候使用强制缓存 ? 什么时候使用协商缓存 ?46、 数组方法 forEach 和 map 的区别 ?47、 什么是函数作用域 ? 什么是作用域链 ?48、 ES6 中 Set 和 Map 的原理 ?49、 0.1 + 0.2 为什么不等于 0.3, 在项目中遇到要怎么处理 ?50、 什么是模块化思想 ?51、 说说怎么用js 写无缝轮播图52、 JS 如何实现多线程 ?53、 闭包的使用场景 ?54、 常见的兼容问题有哪些 ?55、 在 JS 中如何阻止事件冒泡 ?56、两个数组 var A = [1, 5, 6]; var B = [2, 6, 7]，实现一个方法，找出仅存在于A 或者 仅 存在于B中的所有数字。57、 你了解构造函数吗 ? class 是什么 ? 两者有什么区别 ?58、是否存在a的值（a==0 && a==1）为true 的情况 ?59、for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000); } 要求：输出0，1，2，3，460、实现一个 add 方法 使计算结果能够满足如下预期： - add(1)(2)(3)() = 6 - add(1,2,3)(4)() = 1061、常见的 HTTP 请求有哪些 ? 他们的区别是什么 ?62、 JS 的数据类型有哪些 ? 如何判断数据类型 ?他们的优缺点是什么？63、 symbol 你是怎么理解的 ?64、数组常用方法有那些65、JavaScript如何存储cookie66、柯理化函数67、对象遍历方法68、数组扁平化69、typeof 原理70、介绍类型转化71、执行上下文72、闭包的问题和优化73、浏览器和Node事件循环的区别74、移动端点击延迟75、cookie属性76、反柯里化77、千分位78、load和ready区别79、自定义事件80、setTimeout实现setInterval81、避免回调地狱82、callee和caller的作用83、统计字符串中字母个数或统计最多的字母数84、面对对象和面向过程的区别85、eval86、proxy二、Proxy所能代理的范围--handler三、Proxy场景87、事件代理88、不卡顿89、JavaScript中的instanceof90、forEach中的await91、src和href92、JavaScript中事件绑定的方法JavaScript1、解释一下什么是闭包 ?闭包：就是能够读取外层函数内部变量的函数。闭包需要满足三个条件：访问所在作用域；函数嵌套；在所在作用域外被调用 。优点： 可以重复使用变量，并且不会造成变量污染 。缺点： 会引起内存泄漏使用闭包的注意点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象 （object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。2、解释一下原型和原型链 ?原型原型就是一个为对象实例定义了一些公共属性和公共方法的对象模板。原型链对象之间的继承关系通过构造函数的prototype指向父类对象，直到指向Object对象为止形成的指向链条。通俗讲： 原型链是原型对象创建过程的历史记录。 注：在javascript中，所有的对象都拥有一个__proto__属性指向该对象的原型（prototype) 。3、说一下 ES6 中你熟悉的一些内容 ?

推荐整理分享前端最新2022面试题(JS)(最新前端技术)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端 2020,前端2021,2021前端最新技术,前端最新资讯,前端2021,前端2021,前端2021,2021前端最新技术,内容如对您有帮助，希望把文章链接给更多的朋友！

class 类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

Set是类似于数组的数据集合，无序，插入删除速度快，元素不重复，查找速度快。

Map是一个类似对象的数据结构，和对象不同的在于它的key可以是任意类型，但是对象只能使用string和symbol类型，Map的存储关联性更强

生成器函数可以进行阻断函数执行的过程，通过传参可以传入新的值进入函数继续执行，可以用于将异步变为阻塞式同步

4、数组排序的方式 ?冒泡排序： for(var i=0;i<arr.length-1;i++){ for(var j=0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ var temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; } } if(arr[j]===arr[j-1]) i++; }选择排序： for(var i=0;i<arr.length;i++){ var min=i; for(var j=i+1;j<arr.length;j++){ if(arr[j]<arr[min]) min=j; } if(min!==i){ var temp=arr[i]; arr[i]=arr[min]; arr[min]=temp; } if(arr[i]===arr[i+1])i++;}快速排序：function quickSort(arr) { if (arr.length <= 1) return arr; var centerIndex = ~~(arr.length / 2); var left = []; var right = []; for (var i = 0; i < arr.length; i++) { if (i === centerIndex) continue; if (arr[i] < arr[centerIndex]) left.push(arr[i]); else right.push(arr[i]); } return quickSort(left).concat(arr[centerIndex], quickSort(right)); }5、什么是事件轮询(EventLoop) ?

一个用来等待和发送消息和事件的程序结构。

1、所有任务都在主线程上执行，形成一个执行栈。2、主线程发现有异步任务，如果是微任务就把他放到微任务的消息队列里，如果是宏任务就把他放到宏任务的消息队列里。3、执行栈所有同步任务执行完毕。4、执行微任务队列，之后再执行宏任务队列。5、轮询第4步。6、数组的一些API, 哪些能够改变原数组, 那些不能 ?改变原数组的方法：shift()unshift()pop()push()reverse()sort()splice()不改变原数组的方法：concat()every()filter()forEach()indexOf()join()lastIndexOf()map()some()every()slice()reduce()reduceRight() flat()flatMap()find()7、for 循环与 forEach 的区别 ?1.for循环可以使用break跳出循环，但forEach不能。2.for循环可以控制循环起点（i初始化的数字决定循环的起点），forEach只能默认从索引0开始。3.for循环过程中支持修改索引（修改 i），但forEach做不到（底层控制index自增，无法左右它）。8、深浅拷贝 ?深拷贝：function cloneObject(source, target) { if (target === undefined) { if (Node.prototype.isPrototypeOf(source)) { target = document.createElement(source.nodeName); target.style = source.style.cssText; } else if (source.constructor === Uint8Array) { target = new source.constructor(Array.from(source)); } else if (source.constructor === Date || source.constructor === RegExp || source.constructor === Set || source .constructor === Map) { target = new source.constructor(source); } else if (source.constructor === Function) { var arg = source.toString().match(/\((.*?)\)/)[1]; var content = source.toString().replace(/\n|\r/g, "").match(/\{(.*)\}/)[1]; target = new Function(arg, content) } else { target = new source.constructor(); } } var names = Object.getOwnPropertyNames(source).concat(Object.getOwnPropertySymbols(source)); for (var i = 0; i < names.length; i++) { if (names[i] === "constructor") { Object.defineProperty(target, "constructor", { value: source.constructor }); continue; } var desc = Object.getOwnPropertyDescriptor(source, names[i]); if ((typeof desc.value === "object" && desc.value !== null) || typeof desc.value === "function") { var o = cloneObject(desc.value) Object.defineProperty(target, names[i], { value: o, enumerable: desc.enumerable, writable: desc.writable, configurable: desc.configurable }) } else { Object.defineProperty(target, names[i], desc); } } return target; }浅拷贝： 1、Object.assign(目标对象，源对象) 2、 var obj1={} for(var key in obj){ obj1[key]=obj[key] } 3、obj1={...obj};9、url 的组成 ? http:/https: 协议 www.baidu.com 域名 :8080 端口 /sf/vsearch 路径 ?wd=百度热搜 查询(可有可无) #a=1&b=2 哈希值(可有可无) 10、常见的跨域方式 ?JSONP： JSONP是利用外链脚本，没有跨源限制的特点，来实现跨源请求的一种技术。CORS： cors：跨域资源共享，是一种实现跨源请求数据的技术。这就是跨源问题的解决方案之一。也是广泛的解决方案。正向代理 先搭建一个属于自己的代理服务器1、用户发送请求到自己的代理服务器2、自己的代理服务器发送请求到服务器3、服务器将数据返回到自己的代理服务器4、自己的代理服务器再将数据返回给用户反向代理1、用户发送请求到服务器（访问的其实是反向代理服务器，但用户不知道）2、反向代理服务器发送请求到真正的服务器3、真正的服务器将数据返回给反向代理服务器4、反向代理服务器再将数据返回给用户通过postMassage，11、Promise 的使用场景 ?场景1：获取文件信息。场景2：配合AJAX获取信息场景3：解决回调地狱，实现串行任务队列。场景4: node中进行本地操作的异步过程12、let, const, var 的区别 ?