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

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

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

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

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

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

相关推荐
To_OC7 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC7 小时前
LC 17 电话号码的字母组合:我的回溯算法,就是从这道题开窍的
javascript·算法·leetcode
vipbic7 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy7 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志8 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble9 小时前
c端系统,其实更像一个信息展示平台
前端
你怎么知道我是队长9 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
李姆斯10 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜10 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司11 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能