JavaScript 对象 101:代码的基础构建块

JavaScript 对象是现代 Web 开发的基础。无论你是在管理用户数据、配置应用程序设置,还是使用 API,对象无处不在。随着 ES2024 引入了像 Object.groupBy 这样的新方法,以及 Object.hasOwn 的广泛采用,现在是时候从现代视角理解对象了。

什么是 JavaScript 对象?

从本质上讲,JavaScript 对象是将相关数据和功能存储在一起的键值对集合。可以将它们视为以结构化方式组织信息的容器:

const user = {
  name: "Sarah Chen",
  role: "developer",
  yearStarted: 2021,
  isActive: true
}

与原始值(字符串、数字、布尔值)不同,对象是引用类型。当你将对象赋值给变量时,你存储的是对其在内存中位置的引用,而不是对象本身。这个基本概念影响了对象在复制或比较时的行为方式。

创建对象:现代方法

对象字面量

创建对象最常见的方式仍然是对象字面量语法:

const product = {
  id: "prod-123",
  name: "Wireless Mouse",
  price: 29.99
}

类 (ES6+)

类为创建具有共享行为的对象提供了更清晰的语法:

class Product {
  constructor(id, name, price) {
    this.id = id
    this.name = name
    this.price = price
  }
  
  getDiscountPrice(percent) {
    return this.price * (1 - percent / 100)
  }
}

const mouse = new Product("prod-123", "Wireless Mouse", 29.99)

Object.create()

为了精确控制原型,Object.create() 允许你准确指定对象继承的内容:

const baseConfig = {
  apiUrl: "https://api.example.com",
  timeout: 5000
}

const appConfig = Object.create(baseConfig)
appConfig.theme = "dark"

现代 JavaScript 的核心对象方法

Object.hasOwn() - 安全的属性检查

忘掉 hasOwnProperty() 吧。Object.hasOwn() 是检查对象是否具有特定属性的现代化、更安全的方式:

const config = { debug: false }

// 旧方式(有问题)
config.hasOwnProperty("debug") // true

// 现代方式 (ES2022+)
Object.hasOwn(config, "debug") // true

// 为什么 Object.hasOwn 更好:
const obj = Object.create(null)
// obj.hasOwnProperty("prop") // TypeError!
Object.hasOwn(obj, "prop") // false (安全)

Object.groupBy() - 高效组织数据

Object.groupBy() (ES2024) 根据条件将数组转换为分组对象:

const transactions = [
  { type: "income", amount: 1000 },
  { type: "expense", amount: 200 },
  { type: "income", amount: 500 },
  { type: "expense", amount: 150 }
]

const grouped = Object.groupBy(transactions, tx => tx.type)
// 结果:
// {
//   income: [{ type: "income", amount: 1000 }, { type: "income", amount: 500 }],
//   expense: [{ type: "expense", amount: 200 }, { type: "expense", amount: 150 }]
// }

使用对象条目

现代 JavaScript 提供了强大的对象转换方法:

const scores = { alice: 95, bob: 87, charlie: 92 }

// 转换为条目
const entries = Object.entries(scores)
// [["alice", 95], ["bob", 87], ["charlie", 92]]

// 转换并重建
const curved = Object.fromEntries(
  entries.map(([name, score]) => [name, score + 5])
)
// { alice: 100, bob: 92, charlie: 97 }

理解 JS 原型

JS 原型是 JavaScript 继承模型背后的机制。每个对象都有一个指向另一个对象的内部原型引用:

const animal = {
  speak() {
    return `${this.name} makes a sound`
  }
}

const dog = Object.create(animal)
dog.name = "Rex"
dog.bark = function() {
  return `${this.name} barks!`
}

console.log(dog.speak()) // "Rex makes a sound" (继承的)
console.log(dog.bark())  // "Rex barks!" (自有方法)

原型链实现了方法共享而无需重复,使 JavaScript 对象具有内存效率和灵活性。

对象操作的性能技巧

1. 检查自有属性时使用 Object.hasOwn() 而不是 in 操作符
2. 对于简单对象优先使用对象字面量(比 new Object() 更快)
3. 频繁添加/删除键时考虑使用 Map
4. 对不可变的配置对象使用 Object.freeze()

const API_CONFIG = Object.freeze({
  baseUrl: "https://api.example.com",
  version: "v2",
  timeout: 10000
})
// API_CONFIG.version = "v3" // 静默失败(或在严格模式下抛出错误)

常见陷阱和解决方案

”this” 上下文问题

箭头函数没有自己的 this:

const timer = {
  seconds: 0,
  start() {
    // 箭头函数保留来自 start() 的 'this'
    setInterval(() => {
      this.seconds++ // 正确工作
    }, 1000)
  }
}

深度克隆

Object.assign() 和展开语法只创建浅拷贝:

const original = { user: { name: "Alice" } }
const shallow = { ...original }
shallow.user.name = "Bob" // 也会改变 original!

// 使用 structuredClone 进行深拷贝 (ES2022+)
const deep = structuredClone(original)
deep.user.name = "Charlie" // original 不变

结论

JavaScript 对象已经有了显著的发展,ES2024 提供了像 Object.groupBy() 这样的强大方法,而像 Object.hasOwn() 这样的既有特性已成为最佳实践。理解对象——从基于原型的继承到现代操作方法——对于编写高效、可维护的 JavaScript 代码至关重要。掌握这些基础知识,你将拥有任何 JavaScript 应用程序所需的构建块。

常见问题

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.