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

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

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

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

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 ,欢迎关注,获取最新最全最深入的技术讲解

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

相关推荐
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅9 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊10 小时前
jwt介绍
前端
爱敲代码的小鱼10 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax
Cobyte10 小时前
AI全栈实战:使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc