网站首页 > 技术文章 正文
窗外的树叶被晨风轻轻吹动,洒下斑驳的光影,泡上一杯清香的绿茶,在这宁静美好的清晨时光里,别把面试的压力放在心上。让我们像朋友聊天一样,慢慢聊聊两道 JavaScript 高频面试题,在舒缓的氛围中,悄悄提升自己的知识储备,为新的一天注入满满的能量!
第一题:JavaScript 中的变量提升与暂时性死区
面试官经常会问:“说一说 JavaScript 中的变量提升是什么?let 和 const 声明的变量为什么会有暂时性死区?” 别被这些听起来复杂的概念吓到,把变量提升想象成提前把东西放在桌上,虽然还没开始用,但已经在那了;而暂时性死区,就像一片 “禁止踏入” 的区域,在特定条件下不能随意访问变量。
// 变量提升示例,使用var声明变量
console.log(num); // 输出undefined,因为var声明的变量会提升到作用域顶部
var num = 10;
// 暂时性死区示例,使用let声明变量
// console.log(name); // 报错,ReferenceError: name is not defined,处于暂时性死区
let name = '前端开发者';
在 JavaScript 中,用var声明的变量存在变量提升,它的声明会被 “提升” 到当前作用域的顶部,但初始化(赋值)还是在原来的位置,所以在声明前访问var变量,会得到undefined。而let和const声明的变量不存在这种提升,在它们声明之前的区域就是暂时性死区,一旦在这个区域访问变量,就会报错。理解这些特性,能帮助我们写出更严谨、不会出错的代码。
第二题:JavaScript 中的数组扁平化处理
“实现数组扁平化有哪些方法?请举例说明并分析它们的优缺点。” 数组扁平化就像是把一堆叠在一起的盒子,都摊开变成一层,让里面的东西一目了然。实现的方法有很多,各有千秋。
方法一:使用 ES6 的扩展运算符(...)
const arr1 = [[1, 2], [3, 4]];
const flatArr1 = [].concat(...arr1);
console.log(flatArr1); // 输出 [1, 2, 3, 4]
这种方法简洁直观,代码量少,但它只能处理一层嵌套的数组,如果数组嵌套多层,就需要多次使用扩展运算符,不太方便。
方法二:使用 Array.prototype.flat () 方法
const arr2 = [[1, 2], [[3, 4], 5]];
const flatArr2 = arr2.flat(Infinity);
console.log(flatArr2); // 输出 [1, 2, 3, 4, 5]
flat()方法可以指定扁平化的层数,传入Infinity能将数组无限扁平化,不管嵌套多少层都能处理,非常强大。不过,它的兼容性稍差,在一些老旧浏览器中可能不支持。
方法三:使用递归实现
function flatten(arr) {
let result = [];
for (let item of arr) {
if (Array.isArray(item)) {
result = result.concat(flatten(item)); // 递归处理子数组
} else {
result.push(item);
}
}
return result;
}
const arr3 = [[1, 2], [[3, 4], 5]];
const flatArr3 = flatten(arr3);
console.log(flatArr3); // 输出 [1, 2, 3, 4, 5]
递归方法通用性强,能处理各种复杂的嵌套数组,但如果数组非常大,递归调用次数过多,可能会导致栈溢出的问题。
面试应答模板
变量提升与暂时性死区问题回答
“JavaScript 里的变量提升,主要说的是用var声明的变量。它会把声明‘提前’到作用域的最上面,不过赋值还是在原来的地方。比如说var a = 1;,在代码执行的时候,相当于先把var a;放到作用域开头,所以在a赋值之前调用它,会得到undefined。而let和const就不一样了,它们不存在变量提升,在声明之前的区域是暂时性死区,如果在这个区域访问变量,就会报错。这是因为let和const是 ES6 引入的新特性,设计上更严谨,能避免一些意外的变量访问问题,让代码更安全。”
数组扁平化问题回答
“数组扁平化有好几种办法。最简单的是用 ES6 的扩展运算符,把数组展开再合并,代码很简洁,但是只能处理一层嵌套。flat()方法更强大,能指定扁平化的层数,用Infinity可以无限扁平化,不过有些老浏览器不支持。还有就是用递归,通过循环判断数组里的元素是不是数组,如果是就继续展开,这种方法适用性广,能处理各种嵌套情况,不过如果数组特别大,可能会有栈溢出的风险。实际开发中,可以根据项目需求和浏览器兼容性来选择合适的方法。”
在这宁静又美好的清晨和上午时光里,我们一起完成了一次知识的小冒险。对于这两道面试题,你还有哪些想法或疑问?或者希望下期探讨哪些 JavaScript 的知识点?欢迎在评论区留言分享!觉得文章对你有帮助,别忘了点赞关注,明天同一时间,我们继续相约,探索更多有趣的前端知识!
猜你喜欢
- 2025-05-30 晨曦相伴时!2 道 JS 与 TS 面试题解析,开启轻松学习之旅
- 2025-05-30 晨光静好时!2 道 JS 与 TS 面试题解析,开启惬意学习日
- 2025-05-30 悠然晨读!一道 CSS 面试题,伴你沉淀技术小确幸
- 2025-05-30 闲适!晨间拆解 HTML 超链接面试题,知识悄然入脑
- 2025-05-30 静谧清晨!一道 CSS 面试题,开启轻松学习新旅程
- 2025-05-30 悠然!午间一道 React 面试题,轻松化解技术困惑
- 2025-05-30 晨间治愈!一道 CSS 面试题,伴你从容积累技术干货
- 2025-05-30 晨雾轻散时!2 道 JS 面试题细解,静享知识慢时光
- 2025-05-30 悠然晨光!一道 CSS 面试题,解锁页面美化新技能
- 2024-09-27 干货|Web前端工程师中级面试题!(内附答案)
你 发表评论:
欢迎- 500℃几个Oracle空值处理函数 oracle处理null值的函数
- 494℃Oracle分析函数之Lag和Lead()使用
- 493℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 481℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 472℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 468℃【数据统计分析】详解Oracle分组函数之CUBE
- 453℃Oracle有哪些常见的函数? oracle中常用的函数
- 448℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 最近发表
-
- Spring Boot跨域难题终结者:3种方案,从此告别CORS噩梦!
- 京东大佬问我,SpringBoot为什么会出现跨域问题?如何解决?
- 在 Spring Boot3 中轻松解决接口跨域访问问题
- 最常见五种跨域解决方案(常见跨域及其解决方案)
- Java Web开发中优雅应对跨域问题(java跨域问题解决办法)
- Spring Boot解决跨域最全指南:从入门到放弃?不,到根治!
- Spring Boot跨域问题终极解决方案:3种方案彻底告别CORS错误
- Spring Cloud 轻松解决跨域,别再乱用了
- Github 太狠了,居然把 "master" 干掉了
- IntelliJ IDEA 调试 Java 8,实在太香了
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)