var a={}, b={key:'b'}, c={key:'c'}; a[b]=123; a[c]=456; console.log(a[b]);//为什么是456？

岁月如歌_ 岁月如歌_ 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.1w累计阅读 1.1w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄8年
关注
原创 最新推荐文章于 2026-08-16 22:13:22 发布 1.1w 阅读 AI 写同款· GEO 优化 ›
JavaScript闭包原理与实战：从作用域到内存泄漏 闭包是JavaScript中基于词法作用域形成的核心机制，本质是内部函数对外部变量的引用保持，而非值拷贝。它支撑着数据封装、状态持久化、回调上下文维护等关键能力，广泛应用于防抖节流、React Hooks、模块私有化等高频场景。理解闭包需把握三大条件：函数嵌套、外部变量引用、函数逃逸（如返回或传入回调）。其内存影响尤为关键——闭包持有强引用，若未及时清理大对象或DOM节点，极易引发内存泄漏。掌握Chrome DevTools中的Scope面板、Heap Snapshot对比与Performance录制，可精 阅读详情

var a={},
b={key:'b'},
c={key:'c'};

a[b]=123;
a[c]=456;

console.log(a[b]);//为什么是456？

 

 

 

因为键名称只能是字符串，b/c单做键会调用toString得到的都是[object Object]，a[b],a[c]都等价于a["[object Object]"]，那不就是更新[object Object]这个键的值了

 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
React Keys 原理与实战：虚拟 DOM 节点身份标识详解 React Keys 是虚拟 DOM 中节点身份识别的核心机制，其本质是为 Diff 算法提供稳定、唯一、可预测的节点标识符。它直接决定组件实例复用、状态保留与 DOM 操作效率——无 Key 或使用 index 会导致状态错乱、频繁卸载重建；而基于业务 ID 的正确 Key 则支撑高效更新、动画连贯性及 SSR 水合一致性。在列表渲染、动态增删、嵌套组件、过渡动画及服务端渲染等典型场景中，Key 不仅关乎性能，更是 React 状态契约的具象体现。本文深入解析 Keys 如何驱动协调过程，并给出生产环境可 阅读详情

相关推荐

ArcGIS小白必看：5分钟搞定面要素转点要素+自动计算经纬度坐标（附常见报错解决方案）

本文为ArcGIS新手详细解析了面要素转点要素并自动计算经纬度坐标的完整流程。核心在于正确理解和使用坐标系，并掌握ArcToolbox中的“要素转点”等工具。文章深入剖析了常见报错（如坐标系未定义、字段计算失败）的根源，提供了从基础操作到Python脚本自动化的实战解决方案，确保数据转换的准确与高效。

weixin_29284885的博客 575

var a={}, b={key:‘b‘}, c={key:‘c‘}； a[b]=123； a[c]=456； console.log(a[b])；结果为什么是456？

今天在一个技术交流群里面看到这样一个问题： var a={}, b={key:‘b’}, c={key:‘c’}; a[b]=123; a[c]=456; console.log(a[b]);//为什么是456？ 我也不懂什么原理，打印确实是456，那么一起来搞搞，看他为什么是456吧。 开始猜测是属性值的覆盖，因为我也打印a[c]了，结果也是456，在查阅文档之后发现我是瞎猫碰上死耗子，a[b]的值为456是因为b跟c都作为对象，而普通对象的属性名如果是对象的话要先转为字符串，那这样下来的话，就是属性

发育中的前端 2211

GEE影像重采样实战：从10米到500米，如何用.reduceResolution和.reproject统一尺度？

本文详细介绍了在Google Earth Engine (GEE)平台中，如何利用`.reduceResolution()`和`.reproject()`方法解决多源遥感影像的尺度统一难题。通过实战案例，从哨兵2号10米分辨率影像聚合至MODIS 500米尺度，阐述了聚合规则选择、参数配置及效果验证的全流程，为环境监测、农业分析等领域的跨尺度数据融合提供了关键方法。

weixin_29223603的博客 85

前端每日一练＜属性名的类型＞

题目: 上面代码会输出什么？答案是:456为什么?这里牵扯到这几个知识点:对象的属性名类型对象的属性名类型只能有两种,分别是String和Symbol,如果新增的属性的类型不是两种中的任意一种,那么就会调用toString()方法将其转换成string类型[对象].toString()的结果设有一个对象obj,obj.toString()的结果是a.key和a[key]的区别假设有一个对象a 执行a.key实际上会获取a中属性名为的属性,这里的是一个字符串,实际上就是获取a[‘key’]而执行a[key],

zzming的博客 286

【PADS-开发指南】

馒头破戒大师

sinat_23896491的博客 3224

VN1630A硬件配置指南：手把手教你用CanApe搭建XCP标定工程（附ELF文件配置技巧）

本文详细介绍了如何使用VN1630A硬件和CanApe软件搭建XCP标定工程，包括硬件配置、CanApe工程创建、ELF文件处理及XCP协议层配置等关键步骤。特别针对实际项目中常见的错误和细节问题提供解决方案，帮助工程师高效完成ECU参数标定工作。

git9versioner的博客 1157

JS--Object题

题目： var a = {}; var b = { key: 'b' }; var c = { key: 'c' }; var d = [3, 5, 6]; a[b] = 123; a[c] = 345; a[d] = 333; console.log('a[b]=', a[b]); console.log('a[c]=', a[c]); console...

weixin_44040583的博客 383

通过PXE的方式实现Ubuntu 24.04 自动安装

之前都是通过PXE来自动化安装Redhat系列的，例如：Rocky9、Rocky10、CentOS7、银河麒麟 Kylin-V10、Kylin-V11、OpenEuler 24.03等。现在安装Ubuntu系列的跟红帽的不太一样，所以在这里介绍下。

邢宇宇的博客 1493

var a={}, b={key:‘a‘}, c={key:‘c‘}； a[b]=123； a[c]=456； console.log(a[b])；结果为什么是456？

今天在技术交流群看到了一个很有意思的一道题 var a={}, b={key:‘a’}, c={key:‘c’}; a[b]=123; a[c]=456; console.log(a[b]);//为什么是456？ 我也不懂什么原理，这道题我做错了 于是乎我进行了一些资料的查阅，因为b跟c都是对象，而普通对象的属性名如果是对象的话，就首先要把它转为字符串，所以这样下来的话，这里用b或者c作为属性名的话，每次都是的结果都是 object object了，只是给了他两次赋值而已，接下来我们对这段代码进行深度分

weixin_42125732的博客 2189

VSCode玩转STM32：手把手教你配置EIDE插件与OpenOCD调试（附野火DAP配置文件详解）

本文详细介绍了如何在VSCode中配置EIDE插件与OpenOCD进行STM32开发，特别针对野火DAP调试器提供了配置文件详解。从基础环境搭建到深度调试技巧，帮助开发者高效完成STM32项目开发，实现现代化嵌入式开发工作流。

weixin_26905487的博客 553

Vlan的封装模式和端口讲解（Access、Trunk、Hypbrid端口）

Vlan（Virtual Local Area Network）虚拟局域网，将一个物理的LAN在逻辑上划分为多个广播域，在交换机上实现广播域隔离（增强局域网的安全性、限制广播风暴、简化网络管理）Vlan通过将二层数据帧打上Vlan标签（打上Vlan标签也就是封装Vlan），正常情况下，不同Vlan Tag的数据包是无法二层直接互访的，以此来实现广播域的隔离可以理解为一个Vlan对应一个广播域，同一Vlan内的主机可以二层直接通信，不同Vlan间的主机无法二层直接通信。

m0_49864110的博客 5643

Object题

问题？？？ var a = {}; var b = {key: 'b'}; var c = {key: 'c'}; var d = [3,5,6]; a[b] = 123; a[c] = 345; a[d] = 333; console.log('a[b]=',a[b]); console.log('a[c]=',a[c]); console.log('a[d]=',a[d]); 答案...

canglingyue的专栏 709

Jetson Orin 上拉取 GMSL 相机流并保存在 DMA 内存中

本文介绍了在NVIDIA Jetson Orin平台上实现GMSL相机DMA内存共享的低延迟采集方案。通过V4L2+NvBufSurface技术，将相机数据直接存入DMA缓冲区，避免传统流程中的CPU拷贝开销。文章详细说明了设备初始化、DMA缓冲区分配、V4L2绑定等关键步骤，并展示了调用示例。该方案支持零拷贝访问，适用于AI推理、硬件编码等场景，能显著提升车载视觉系统的实时性能，为多路GMSL相机接入和低延迟处理提供了高效解决方案。

J。 695

面试题：var a={}, b={key:‘b‘}, c={key:‘c‘}；a[b]=123；a[c]=456；console.log(a[b])；打印什么？

给一个对象取了名字，在控制台转成字符串打印，没有正确解析对象为字符串，就会转换为[object Object]什么时候会出现[object,object]?但是我还是不太理解，啥呀这是？

qq_67095994的博客 145

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

React数组渲染核心原理：key机制与性能优化全解析

React数组渲染是理解数据驱动视图范式的基础入口，其本质是将数据集合映射为React元素集合的过程。核心原理在于JSX编译为React.createElement调用、虚拟DOM生成及Fiber协调算法依赖key进行增量比对。key并非简单ID，而是同级唯一且稳定的‘身份指纹’，直接决定DOM复用效率与水合一致性。技术价值体现在避免无谓重渲染、保障表单状态不丢失、支撑拖拽排序等复杂交互。典型应用场景包括动态列表、搜索高亮、分页加载及SSR水合。本文深入拆解key设计哲学、map()不可替代性、React.

weixin_30564785的博客 418

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过，这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后，重新检测通过。

JavaScript：对象作为对象的属性名

var a = {}; b = {key:'b'}; c = {key:'c'}; a[b] = 123; a[c] = 456; console.log(a[b]);//456原因：key名称只能是string类型的，因此，b先变成string，默认变string类型使用的是toString()方法，而不是valueO

liuliuliu_666的博客 902

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

代码输出问题

// example 1 var a={}, b=‘123’, c=123; a[b]=‘b’; // c 的键名会被转换成字符串’123’，这里会把 b 覆盖掉。 a[c]=‘c’; // 输出 c console.log(a[b]); // example 2 var a={}, b=Symbol(‘123’), c=Symbol(‘123’); // b 是 Symbol 类型，不需要转换。...

前端踩坑之路 542

求解: 想了好久 确实想不出原理,求助各位大佬（已解决）

var a = {} b = {key:'b'} c = {key:'c'} a[b] = 123; console.log(a[b]) //123 a[c] = 456 console.log(a[b]) //456 想知道为什么... 这是下面...

曹先森的博客 536

数据类型与堆栈内存练习&数据类型检测

目录数据类型相关练习堆栈内存相关练习 数据类型相关练习 1、 let a = {}, b = '0', c = 0; a[b] = '你好'； a[c] = '再见'； console.log(a[b]); // '再见' b,c为变量，在作为属性名时默认将变量的值作为属性名，即字符串’0’和数字0，这两者作为属性名时是相同的（可以理解为均为字符串’0’）。因此后面的赋值会覆盖前面。 2...

最可爱的草莓酱兔兔 360

练习题

什么是变量提升？ 在js代码执行之前，会进行预解析，形成全局执行上下文，var声明的变量会被提升为全局对象的属性，赋值undefined JavaScript 中有哪几种数据类型？ 基本数据类型和引用数据类型 基本：number，string，Boolean，NaN，undefined，symbol 引用：Array，Object，Set，function NaN 是什么数据类型？它的...

Joey_Tribiani的博客 311

TEST

以下代码输出什么？ var a = {}, b = {key:'b'}, c = {key:'c'}; a[b]=123; a[c]=456; console.log(a[b]); 此代码输出456（不是123） 理解如下： 设置对象属性时，js会隐式的将参数值串联起来。在这种情况下，由于b和c都是对象，他们都将被转换为“[object Object]”. 因此，...

mandy' blog 286

JavaScript对象数组去重：从引用比较到Map实战方案

在JavaScript数据处理中，数组去重是常见需求，但面对对象数组时，传统的Set或indexOf方法会因引用比较机制而失效。这源于JavaScript中基本类型与引用类型在值比较与引用比较上的根本差异。理解这一原理对于处理复杂数据结构至关重要，它直接影响到前端性能优化和数据展示的准确性。在实际工程实践中，如处理API返回的用户列表、合并表格数据或实现前端缓存时，高效的对象数组去重能显著提升应用性能与用户体验。本文聚焦于基于Map/对象的映射法这一高效方案，通过自定义关键属性比对规则，提供了从单属性到多属

weixin_33739523的博客 476

前端JS面试题

前端JS面试题 call 和 apply 的区别 是什么，哪一个性能更好一些？ 传参的区别 call 是一个个传递 apply是传递一个数组 bind 是预先处理，但是不会立即执行 但是 call 在基于ES6的展开运算符也可以将数组中的每一项传递给函数 call apply 都是 Function 原型上面的方法，而每个函数作为 Function 的实例，可以调取其方法 在...

weixin_43550660的博客 401

深入理解JavaScript Proxy：核心机制与高级应用

Proxy作为ES6引入的元编程特性，通过创建对象代理实现对基本操作的拦截和自定义，为JavaScript开发带来了革命性的灵活性。其核心原理基于陷阱方法(trap)机制，能够拦截包括属性访问、函数调用在内的几乎所有对象操作。在工程实践中，Proxy常用于实现属性访问控制、数据验证、函数调用跟踪等高级功能，特别适合处理横切关注点。结合Reflect API使用可以确保正确的this绑定和操作转发。典型应用场景包括实现可观察对象(Observable)、自动保存模式以及负数组索引等高级功能。需要注意的是Pro

weixin_30920853的博客 684

前端面试宝典

/ 创建自定义事件detail: { name: '旺财', volume: 100 },});// 监听自定义事件${// 创建自定义事件 const myEvent = new CustomEvent('dogBark' , {detail : {name : '旺财' , volume : 100 } , bubbles : true , cancelable : true });

weixin_42687723的博客 241

JavaScript解构、Rest参数与展开语法的原理与避坑指南

解构赋值、剩余参数（Rest）和展开语法（Spread）是现代JavaScript处理数据结构的核心机制，其底层统一基于可迭代协议（Iterable Protocol），本质是对数据容器的模式匹配与结构化操作。它们并非简单语法糖，而是支撑函数式编程、不可变更新、参数灵活传递等工程实践的关键能力。理解其运行时行为（如解构在null/undefined时抛出TypeError、Rest参数创建新数组的内存开销、展开仅做浅拷贝等），对避免线上崩溃、内存溢出和状态污染至关重要。本文聚焦真实业务场景——API响应安全

weixin_34159110的博客 520
上一篇： mongodb数据库在nodejs的使用方法
下一篇： js对象属性 通过点(.) 和 方括号([]) 的不同之处
点赞 4
评论 2
书签 书签 12
岁月如歌_
岁月如歌_
博客等级 码龄8年 342粉丝 315原创
+ 关注
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值