JavaScript对象创建与访问技巧

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《JavaScript对象创建与属性访问方法》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

JavaScript创建对象推荐字面量（如{ name: "Alice" }），因其简洁、可读性强且引擎优化好；new Object()冗长易错，仅在动态构造或原型操作时使用。

用字面量或构造函数创建对象

JavaScript 创建对象最常用的是对象字面量，简洁且可读性强；new Object() 构造函数方式极少用，仅在需要动态构造或与原型链操作强相关时才考虑。

常见错误是误以为 new Object() 更“正规”或性能更好——实际它更冗长、易出错，且现代引擎对字面量有更多优化。

• const obj = { name: "Alice", age: 30 }; —— 推荐，支持计算属性名、方法简写、展开运算符
• const obj = new Object(); obj.name = "Alice"; —— 不推荐，无法在声明时定义不可枚举属性或访问器
• 避免 Object.create(null) 除非你明确需要无原型的对象（比如实现 Map-like 结构），否则会丢失 toString 等基础方法

点号和方括号访问属性的区别

点号 . 要求属性名是合法标识符且已知；方括号 [] 支持动态属性名、含空格/特殊字符的键，也支持变量或表达式。

容易踩的坑：用点号访问含连字符的属性（如 user.first-name）会报语法错误，因为 - 被解析为减法运算符。

• obj.name ✅ 合法标识符，运行时快，代码清晰
• obj["first-name"] ✅ 正确访问带连字符的键
• obj[variableKey] ✅ 动态访问，variableKey 可以是字符串、Symbol 或数字（会被转为字符串）
• obj.123 ❌ 报错；必须写成 obj[123] 或 obj["123"]

访问不存在属性时的返回值和陷阱

所有对象属性访问（无论 . 还是 []）在属性不存在时都返回 undefined，不会报错。但链式访问中某一级为 null 或 undefined 时，再取其属性会抛 TypeError。

例如 user.profile.address.city 在 user.profile 为 undefined 时，访问 .address 就会失败。

• 安全访问推荐用可选链操作符：user?.profile?.address?.city
• 旧环境可用逻辑运算符兜底：((user || {}).profile || {}).address，但嵌套深时难维护
• in 操作符判断属性是否存在（含原型链）："name" in obj
• hasOwnProperty 判断自有属性：obj.hasOwnProperty("name")，注意它不识别 Symbol 键，需用 Object.hasOwn(obj, "name")（ES2022+）

属性名类型不只是字符串

对象属性名实际只有两种类型：字符串和 Symbol。数字键（如 obj[123]）会被自动转为字符串 "123"；而 Symbol 键能保证唯一性，常用于私有属性或避免命名冲突。

容易被忽略的是：用 for...in 遍历不到 Symbol 键，Object.keys() 和 JSON.stringify() 也忽略它们。

• const sym = Symbol("id"); obj[sym] = 42; —— 此属性不会被常规遍历暴露
• 获取所有键（含 Symbol）：Reflect.ownKeys(obj)
• 只取字符串键：Object.getOwnPropertyNames(obj)
• 只取 Symbol 键：Object.getOwnPropertySymbols(obj)

终于介绍完啦！小伙伴们，这篇关于《JavaScript对象创建与访问技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！