基础打牢才能轻松应对,试试这个值和引用的终极面试题!

大家好我是渡一子辰老师,今天来看一道终极笔面试题。

大厂考面试题有一个特点,他在考一个知识点的时候,一定会考的非常深入,从来不会适可而止。

下面这个是字节的笔试原题,一起来看看吧

js 复制代码
// 下面的代码输出什么(字节)?
var foo = { bar: 1 };
var arr1 = [1, 2, foo];
var arr2 = arr1.slice(1);
arr2[0]++;
arr2[1].bar++;
foo.bar++;
arr1[2].bar++;
console.log(arr1[1] === arr2[0]);
console.log(arr1[2] === arr2[1]);
console.log(foo.bar);

如果说你对这个知识点理解的非常准确的话,没有任何难度,非常简单就做出来了。

理解里有一点点偏差你做出来可能就有问题。

做这种值和引用的题你一定要非常的清楚,你内存里保存的到底是什么。

我们逐行分析一下:

第一行代码做了什么事情呢?得分两步看,第一步 A: { bar: 1 } 创建了一个新对象在堆上,第二步将对象的地址赋值给变量 foo: A

第一行就完了,现在变量 foo 里保存了一个地址,这个地址指向堆上的一个对象。

第二行是一个数组,数组也是一个对象,所以第二行和第一行类似,创建了一个数组对象 B: [1, 2, foo],数组的第三项 foo 其实就是地址 A,然后将数组赋值给变量 arr1: B

然后看第三行,arr1 也就是地址 B ,调用数组的 slice 方法,产生了一个新的数组 C,新的数组是截取原来数组的后两项,然后将地址 C 赋值给变量 arr2

第四行 arr2[0]++; 也就是地址 C 的第一项加 1:

第五行 arr2[1].bar++; 也就是地址 C 的第二项,第二项指向地址 A,所以地址 A 的属性 bar 加 1:

第六行 foo.bar++; 也就是地址 A 的 bar 属性加 1:

第七行 arr1[2].bar++; 也就是地址 B 的第三项,第三项指向地址 A,所以地址 A 的属性 bar 加 1:

现在代码走完了,接下来就是输出了。

console.log(arr1[1] === arr2[0]);arr1[1] 是 2,arr2[0] 是 3,这两项肯定不一样,所以输出 false。

console.log(arr1[2] === arr2[1]);arr1[2]foo,也就是地址 A,arr2[1]foo,也是地址 A,都是地址 A 所以输出 true。

console.log(foo.bar); 这里直接输出 4。

运行一下代码来验证一下:

总结

本文主要讲述了字节面试题中的一道题,涉及到 JS 中的值和引用。

通过逐行分析代码,验证了代码的输出结果,并总结了代码执行过程中的关键步骤和逻辑。

这道题主要考察了对象和数组的操作,以及对于 JS 中值和引用的理解程度。

通过深入探讨这道题,你可以更好地理解和掌握 JS 中的值和引用概念。

本文来源

本文来源自渡一官方公众号:Duing ,欢迎关注,获取最新最全最深入的技术讲解

感谢你阅读本文,如果你有任何疑问或建议,请在评论区留言,如果你觉得这篇文章有用,请点赞收藏或分享给你的朋友!

相关推荐
莫叫石榴姐9 分钟前
SQL百题斩:从入门到精通,一站式解锁数据世界
大数据·数据仓库·sql·面试·职场和发展
sorryhc16 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy23 分钟前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq41 分钟前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开1 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
你总是一副不开心的样子(´ . .̫ .1 小时前
一、十天速通Java面试(第三天)
java·面试·职场和发展·java面试
我是华为OD~HR~栗栗呀1 小时前
23届考研-Java面经(华为OD)
java·c++·python·华为od·华为·面试
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室2 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js