菜单

对象基础

相关源文件

目的与范围

本文档涵盖了 JavaScript 对象的概念基础,解释了对象如何作为数据和行为的容器。我们探讨了对象字面量、属性定义模式、属性访问技巧和对象检查方法。本页侧重于对象作为 JavaScript 核心数据类型之一的基本机制,为更高级的对象相关概念奠定基础。有关原型和对象行为委托的详细信息,请参阅 对象的工作原理

来源: objects-classes/ch1.md1-31 objects-classes/toc.md11-20

对象作为容器

JavaScript 对象是键/值对的集合,通常用于组合相关的数据和行为。对象是 JavaScript 中最灵活、最有力的值类型之一,是 JavaScript 原型系统的基础。

图示:JavaScript 值类型层级

来源: objects-classes/ch1.md8-14 objects-classes/ch1.md32-38

对象通常使用字面量语法创建

JavaScript 中的花括号 { } 根据上下文有多种用途

  • 对象字面量
  • 对象解构模式
  • 模板字面量表达式,如 `${...}`
  • 代码块(在循环、条件语句、函数中)

当花括号出现在需要值的位置时,它们代表对象字面量。

来源: objects-classes/ch1.md39-59

定义属性

基本属性定义

属性在对象字面量中以 propertyName: propertyValue 对的形式定义

属性值可以是字面量,也可以由表达式计算得出

来源: objects-classes/ch1.md60-83

属性名称和 Symbol

属性名称通常被视为字符串,但有特殊处理

  • 整数类型的属性名称被视为数字索引
  • 用作属性名称的非字符串值会被转换为字符串
  • 属性名称可以使用 [expression] 语法进行计算

图示:JavaScript 对象中的属性名称类型

来源: objects-classes/ch1.md128-157 objects-classes/ch1.md158-185

Symbols 提供唯一的属性名称,避免意外冲突

来源: objects-classes/ch1.md158-185

简洁属性和方法

当属性名与现有变量名匹配时,可以使用简洁属性语法

同样,对于方法,您可以使用简洁方法语法

来源: objects-classes/ch1.md186-215 objects-classes/ch1.md216-255

对象展开

在创建对象时,... 对象展开语法将属性从一个对象复制到另一个对象

这会执行属性的浅拷贝,意味着嵌套对象通过引用复制。

图示:对象展开的浅拷贝行为

来源: objects-classes/ch1.md256-288

访问属性

基本属性访问

属性通常使用点表示法访问

当属性名称包含特殊字符或为计算属性时,使用方括号表示法

在方括号表示法内可以使用任何表达式

来源: objects-classes/ch1.md312-354

对象解构

对象解构提供了一种声明式的方法来从对象中提取多个属性

此模式允许

  • 如果属性不存在,则设置默认值(= 12
  • 重命名变量(isDeveloper: isDev
  • 当源和目标名称相同时进行简洁提取(firstName

图示:对象解构模式

来源: objects-classes/ch1.md355-451

条件属性访问

可选链运算符(?.)在值可能为 null 或 undefined 时提供安全的属性访问

这等同于

该运算符可以防止在访问可能为 null/undefined 的值的属性时出现错误。

来源: objects-classes/ch1.md452-504

访问非对象上的属性

JavaScript 通过自动装箱允许在原始值上进行属性访问

当您在原始值上访问属性时,JavaScript 会临时将该值转换为(装箱)对象,从而允许属性访问。

来源: objects-classes/ch1.md505-531

使用对象

赋值属性

可以使用赋值运算符添加或修改属性

可以使用 Object.assign() 一次分配多个属性

来源: objects-classes/ch1.md532-565

删除属性

delete 运算符用于从对象中删除属性

这与为属性赋值 undefinednull 不同,因为删除操作会从对象中完全移除该属性。

来源: objects-classes/ch1.md566-587

确定容器内容

要检查对象是否具有特定属性

要检索对象的全部属性

来源: objects-classes/ch1.md588-653

临时容器

对象有时被用作临时容器来传输多个值

图示:对象作为临时传输容器

此模式常用于

  • 将多个值作为单个函数参数传递
  • 从函数返回多个值
  • 参数解构以获得更具可读性的函数签名

来源: objects-classes/ch1.md654-697

总结

JavaScript 对象充当属性的集合,其中

  1. 属性(命名的位置)在对象创建时或之后定义
  2. 值在创建时或之后被分配给这些属性
  3. 使用属性名称访问值
  4. 属性可以通过 delete 删除
  5. 可以使用各种实用程序确定对象内容
    • in 运算符
    • Object.hasOwn() / hasOwnProperty()
    • Object.entries() / Object.keys() / Object.values()

理解对象的基础对于高效的 JavaScript 编程至关重要,因为对象是原型、继承和类等更高级概念的构建块。

来源: objects-classes/ch1.md697-708