2023年度-JS高频面试题
前言
2023年了, 今年形势确实不好, 各种的面试等结果, 各种未回复, 博主一到无聊的时候,就会写一写博客, 就顺着这个就业问题出一篇面试题总结吧, 虽然网上的面试题也有很多, 但是也实在不知道该写一些什么, 我js比较差, 也想为自己整理整理.
-- 博主找了将近一个月工作了, 所以找不到工作就很郁闷, 无聊, 我也是普通人, 大多数人学历, 经验几乎都差不多. -- 学历低, 非本专业入行, 专业入行毫无经验甚至刚出培训班直接包3年假简历 -- 再加上近几年学计算机的人越来越多, 全国培训班已经输送200w+(老数据), 计算机就业问题已经形成不可逆转的死局. -- 结果就是几十几百个人抢一个工作岗位(你入职的几率跟大海捞针没区别). -- 找不到工作的比比皆是, 迫使某些同学狠心转行, 不过不能说转行是错误的, 我倒是觉得转行就目前形势而言是一种解脱. -- 在这里也劝各位想辞职的同学不要辞职, 如果你是1,2本, 硕士, 研究生, 你当我没说过. -- 反正现在的形势就是: 现在的初级要求就是以前的中级, 现在的中级就是以前的高级, 一眼望去3-5, 5-10, 本科, 本科以上. -- 当然, 我也不是制造恐慌, 只是聊一聊当前真实形式, 也不是说工作就一定找不到, 只是很难找. -- 也送各位正在努力找工作的同学们一句话: 拥有什么心态,就会看到什么风景, 祝大家前程似锦!
JS面试题(一定要认真看哦)
1. 什么是内存泄漏?
- 什么是内存泄漏？哪些方式会造成内存泄漏? 内存泄漏解决方式?
内存泄漏: 内存泄漏也称之为"存储泄露", 在空间中分配的内存, 在js进程结束后未被释放, 结果导致一直占用内存单元,直到程序结束 (说白了就是该内存空间使用完毕后未被回收). 造成内存泄漏的方式: 1.setTimeOut的第一个参数为字符串代码而并非函数的时候, 就会引发内存泄漏 2.闭包(函数嵌套函数),控制台日志,循环(在两个对象彼此引用且彼此保留时,就会产生一个循环) 3.再多我也不会了 内存泄漏解决方式: 1. global variables: 对未声明的变量的引用在全局对象内创建一个新变量,在浏览器中,全局对象就是window. 1.1):创建意外的全局变量. function foo(arg) { bar = 'text'; // 等同于 window.bar = 'text' } 1.2): 可以在JavaScript文件开头添加 "use strict"(严格模式), 在严格模式下解析JavaScript可以防止意外的全局变量. 1.3): 在使用完成后, 对其赋值为 null 或者重新分配.
2. 数组常用方法有哪些?
数组: ------------------------------------------------------------------------ 1.array.forEach((item) => {}) // forEach 循环遍历数组 ------------------------------------------------------------------------ 2.array.map(function(currentValue, index, arr), thisIndex) currentValue: 必须.当前元素的的值. index: 可选.当前元素的索引. arr: 可选.当前元素属于的数组对象. map()方法定义在JavaScript的Array中，它返回一个新的数组，新返回数组中的每个元素为原始数组的每一个元素分别调用map中的回调函数处理后的值。 例子: var arr1 = [1,2,3]; var newArr = arr1.map(function(value, index) { return value + 1; // newArr = [2,3,4] }) ------------------------------------------------------------------------ 3.array.concat(arr,arr2,arr3); //拼接数组，返回一个新的数组，对其他数组不产生影响 let arr = [...arr1, ...arr2, ...arr3] // 展开符拼接 ------------------------------------------------------------------------ 4.array.every(function(val, index) {}, arg) 数组的every方法: 检测每个元素是否都符合条件, 如果有一个不符合条件就是false 第二个参数用于替换回调函数中的this 例子: <script> let obj = {name: 's'}; let arr = [10,11,12,13]; let a = arr.every(function(val,index) { console.log(this); // window => obj return val >= 10; },obj) console.log(a); // true </script> ------------------------------------------------------------------------ 5.array.filter(function(val, index) {}) // 检查元素,符合条件的元素构成一个新的数组,不会改变原数组 例子: <script> let array = [2,3,4] let a = array.filter(function(val) { return val > 2; }) console.log(a); // a = [3,4] </script> ------------------------------------------------------------------------ 6.array.some(function(val, index) {}) // 检测数组里有没有符合条件的元素, 有一个就返回为true 可看every方法 ------------------------------------------------------------------------ 7.array.splice(index, num, arg1, arg2...) // splice方法从指定的元素删除元素或添加元素,会改变原来的数组 第一个参数: 从第几个开始删除 第二个参数: 删除几个 后面的参数: 添加的元素 例子: <script> let array = [2,3,4] let a = array.splice(0, 1, '新增1', '新增2') console.log(array); // ['新增1', '新增2', 3, 4] </script> ------------------------------------------------------------------------ 8.array.join(string) // 将数组所有元素再转成一个字符串, 返回一个新字符串 例子: <script> let array = [2,3,4] let as = array.join("-"); console.log(as); // 2-3-4 </script> ------------------------------------------------------------------------ 9.array.shift(), array.unshift(arg1,arg2...) // shift方法删除数组的第一个元素, unshift方法在数组的开头添加一个或多个元素 ------------------------------------------------------------------------ 10.array.toString() // 将数组元素转化为字符串并返回这个字符串 例子: <script> let array = [2,3,4] let as = array.toString(); console.log(as); // 2,3,4 </script> ------------------------------------------------------------------------ 11.let arr = array.pop() // 删除的是数组的最后一个元素,返回的是删除的那个元素, 修改原数组 ------------------------------------------------------------------------ 12.let arr = array.push(arg) // 往数组末尾新增元素, 修改原数组 ------------------------------------------------------------------------
3. 介绍一下原型以及原型链?
原型: 每个对象都会在内部初始化一个属性, 就是prototype(原型) 原型链: 当访问一个对象的某个属性时,会现在这个对象本身的属性上去查找,如果找不到,会去他的 __proto__ 隐式原型上查找 即它的构造函数的prototype, 如果还没找到就会再在构造函数的 prototype 的 __proto__ 中查找 这样一层一层向上查找就形成了一种链式结构,统称为"原型链"
4. 知不知道防抖和节流?
防抖: 一定周期内多次执行只能执行一次 节流: 一定周期内多次执行只能执行最后一次
5. 可以说一下this指向的问题吗?
'谁调用this就指向谁' 在js中, this的意思为: 这个,当前, 是一个指针型变量, 它动态指向当前函数的运行环境; 在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者; 如果没有调用者，就指向全局对象window; // 在全局作用域下, this始终指向全局对象window, 无论是否是严格模式 console.log(this); window.console.log(this); // 当作为对象的方法被调用的时候， this指向当前对象 let obj = { name: '哈哈', skill: function() { name: '嘻嘻', console.log('对象this指针' + this.name); // this === skill } } obj.skill(); // 普通函数 function fn() { console.log(this); // 普通函数中this指向顶级对象window } // 定时器 setTimeOut(() => { console.log(this); // 定时器中的this永远指向window }) // 事件 document.querySelector('div').onclick=function() { console.log(this); // 事件当中this指向当前绑定的元素 } // 构造函数 function Fn(name) { // 在构造函数当中 this指向 被实例出来的对象 this.name = name console.log(this); } let name = new Fn('si');
6. 讲讲LocalStorage,SessionStorage,Cookie的区别(经典必问)
// cookie: 只有4kb左右, 一般用来保存登录信息 // localstorage 和 sessionstorage 可以达到 5M或更大, 用来本地存储 // sessionstorage 仅在窗口关闭前有效 // localstorage 始终有效 // cookie 只在设置的cookie过期时间内有效 //localstorage存取数据 let obj = [{ name: '张三', age: 14 },{ name: '李四', age: 15 }] // localStorage存数据 window.localStorage.setItem('localStorageObj', JSON.stringify(obj)); // localStorage取数据 let getLocalStorageData = JSON.parse(localStorage.getItem('localStorageObj')); getLocalStorageData.map(item => { console.log(item); })
7. 什么是闭包?
// 闭包: 一个函数内的另一个函数可以调用外部函数的变量, 称之为闭包 function fn1() { let a = 100; function fn2() { console.log(a + 1); } fn2(); } fn1();
8. 如何实现深拷贝浅拷贝?
浅拷贝: 1. Object.assign(target, obj); 2. 扩展运算符 let target = {...obj}; // 自己创建一个新的对象，来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型，复制的就是基本类型的值给新对象；但如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，肯定会影响到另一个对象。 深拷贝: 3. JSON.stringify(); // 因为我只会这个... // 把一个对象序列化成为 JSON 的字符串，并将对象里面的内容转换成字符串，最后再用 JSON.parse() 的方法将JSON 字符串生成一个新的对象 let obj1 = { a:1, b:[1,2,3] } let str = JSON.stringify(obj1)； let obj2 = JSON.parse(str)； console.log(obj2); //{a:1,b:[1,2,3]} obj1.a = 2； obj1.b.push(4); console.log(obj1); //{a:2,b:[1,2,3,4]} console.log(obj2); //{a:1,b:[1,2,3]}
9. Ajax如何使用?
// 自己学着写的 1. 先创建XMLHhttpRequest对象 2. 使用open方法创建请求, 设置请求地址 3. 为xhr.onreadystatechange设置监听事件(成功,失败) 4. 使用send发送请求 ------------------------------------------------------------------- <body> <div> 账号<input type="text" name="userId" id="userId"> 密码<input type="password" name="password" id="password"> <button id="sendBtn">send</button> </div> <script> // 创建 XMLHTTPRequest 对象 let xhl = new XMLHttpRequest(); document.getElementById('sendBtn').onclick = function() { let userid = document.getElementById('userId').value; let password = document.getElementById('password').value; // 使用open方法创建请求, 设置请求地址 xhl.open('get','/register?userid='+userid+'&password='+password); // 为xhr.onreadystatechange 设置监听事件 xhl.onreadystatechange = function() { if (xhl.readyState == 4 && xhl.status == 200) { window.alert('请求为200'); } else { window.alert('请求未成功'); } } // 使用send方法发送请求 xhl.send(); xhl.onload = function () { window.alert(xhl.responseText) } } </script> </body>
10. 什么是作用域链?
一般情况使用的变量取值是在当前执行环境的作用域中查找，如果当前作用域没有查到这个值，就会向上级作用域查找，知道查找到全局作用域，这么一个查找的过程我们叫做作用域链 ----------------------------------------------------------------------------------------------------------------------------------------------------- 1、全局执行环境的变量对象始终都是作用域链上的最后一个对象 2、内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数。 3、由于变量的查找是沿着作用域链来实现的，所以也称作用域链为变量查找的机制。 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————— 版权声明：本文为CSDN博主「Suzy_Xie」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_40854368/article/details/120470934
11. 什么是跨域? 如何解决跨域?
跨域: 指的是浏览器不能执行其他网站的脚本. 它是由浏览器的同源策略造成的, 是浏览器对javascript施加的安全限制, 跨域限制访问，其实是浏览器的限制. 例如: a页面想获取b页面资源, 如果a、b页面的协议,域名,端口,子域名不同，所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 同源策略: 是指协议, 域名, 端口都要相同, 其中有一个不同都会产生跨域; --------------------------------------------------------------------------------------------------------- 解决: 1. 不好意思博主不会 _(:з」∠)_
12. 了解过JS的垃圾回收吗？能详细讲讲吗?
1: GC–garbage collection ,js具有“自动”垃圾回收机制,即执行环境会负责管理代码执行过程中使用的内存 2: GC会定期（周期性的）找出那些不再继续使用的变量, 然后释放其内存 3: 不再使用的变量即生命周期结束的变量会被释放, 只能是局部变量, 全局变量的生命周期, 直到浏览器卸载页面才会结束 4: 闭包由于内部函数原因, 外部函数不能算结束, 无法释放内存 5: js的垃圾回收机制----采用的方式 --------------------------------------------------------------------------------------------------------- (1)标记清除法 解释: 当变量进入执行环境时,就将这个变量标记为“进入环境”, 当变量离开环境时会被标记“离开环境”, 离开环境的变量内存被释放 function f1(){ //被标记已进入执行环境 var a=1 var b=2 } f1() //执行完毕，a，b被标记离开执行环境，内存释放 --------------------------------------------------------------------------------------------------------- (2)引用计数法 解释: 跟踪记录每个值被引用的次数, 当某个值的引用次数变为0时, 说明没有方法在访问该值了, 则可将其占用的内存收回 function f1(){ //跟踪a的引用计数 var a={} //a的引用次数 0 var b=a //a的引用次数 1 var c=a //a的引用次数 2 var b={} //a的引用次数 1 var c=[] //a的引用次数 0 } --------------------------------------------------------------------------------------------------------- (3)手工 --直接置空, GC下次再运行时会删除这些值 a=null ———————————————————————————————————————————————————————————————————————————————————————————————————————————————— 版权声明：本文为CSDN博主「盐味气水」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_47433370/article/details/125944847
大家加油！！！！！_(:з」∠)_
书写不易，如果本期文章对您有帮助, 请点赞留下您的足迹，可以的话点个关注_(:з」∠)_， Thanks♪(･ω･)ﾉ
![[JS]面试官：你的简历上写着熟悉jsonp，那你说说它的底层逻辑是怎样的？](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635462/20241109/ab6c62833d4349a3b910e97f27656c88.png?x-oss-process=image/resize,h_160,m_lfit)