跳到主要内容

JavaScript 对象属性

在JavaScript中，对象是由属性组成的集合。理解对象属性是掌握JavaScript的基础之一。本文将全面介绍JavaScript对象属性的概念、使用方法及其高级特性。

什么是对象属性？​

对象属性是键值对，由名称（键）和值组成。属性名通常是字符串（或Symbol），值可以是任何JavaScript数据类型，包括函数（这种属性也称为方法）。

javascript
// 创建一个对象
const person = {
  name: "张三",  // 属性 name，值为 "张三"
  age: 25,      // 属性 age，值为 25
  greet: function() {  // 属性 greet，值为一个函数
    console.log(`你好，我是${this.name}，今年${this.age}岁。`);
  }
};

// 输出对象
console.log(person);
// 输出: {name: "张三", age: 25, greet: ƒ}

访问对象属性​

JavaScript提供了两种访问对象属性的方式：

1. 点表示法​

javascript
const person = {
  name: "张三",
  age: 25
};

console.log(person.name); // 输出: "张三"
console.log(person.age);  // 输出: 25

2. 方括号表示法​

javascript
const person = {
  name: "张三",
  age: 25
};

console.log(person["name"]); // 输出: "张三"
console.log(person["age"]);  // 输出: 25
提示

方括号表示法的一大优势是可以使用变量作为属性名，或者访问包含特殊字符的属性名。

javascript
const propertyName = "name";
console.log(person[propertyName]); // 输出: "张三"

const user = {
  "first-name": "张",  // 含有连字符的属性名
  "last-name": "三"
};

// 必须使用方括号表示法访问
console.log(user["first-name"]); // 输出: "张"

添加和修改属性​

您可以随时向现有对象添加新属性或修改现有属性：

javascript
const car = {
  brand: "丰田"
};

// 添加新属性
car.model = "卡罗拉";
car["year"] = 2023;

// 修改现有属性
car.brand = "本田";

console.log(car);
// 输出: {brand: "本田", model: "卡罗拉", year: 2023}

删除属性​

使用delete运算符可以删除对象的属性：

javascript
const laptop = {
  brand: "联想",
  model: "ThinkPad",
  year: 2022
};

delete laptop.year;

console.log(laptop);
// 输出: {brand: "联想", model: "ThinkPad"}

属性存在性检查​

有时我们需要检查一个对象是否包含特定属性：

1. 使用in运算符​

javascript
const book = {
  title: JavaScript 入门,
  author: "佚名"
};

console.log("title" in book);   // 输出: true
console.log("price" in book);   // 输出: false

2. 使用hasOwnProperty方法​

javascript
console.log(book.hasOwnProperty("title"));   // 输出: true
console.log(book.hasOwnProperty("toString")); // 输出: false
备注

hasOwnProperty只检查对象自身的属性，不包括继承的属性，而in运算符会检查对象的整个原型链。

属性特性（Property Attributes）​

在JavaScript中，每个属性不仅有值，还有三个特性（attribute）：

  1. writable：决定属性是否可修改
  2. enumerable：决定属性是否会在循环中出现
  3. configurable：决定属性是否可以被删除或修改特性

默认情况下，通常创建的属性这三个特性都为true。

使用Object.defineProperty定义属性​

javascript
const product = {};

Object.defineProperty(product, "name", {
  value: "手机",
  writable: false,      // 不可修改
  enumerable: true,     // 可枚举
  configurable: false   // 不可配置（不能删除或重新定义）
});

// 尝试修改属性
product.name = "电脑";  // 在严格模式下会报错，非严格模式下静默失败
console.log(product.name);  // 输出: "手机"

// 尝试删除属性
delete product.name;    // 失败
console.log(product.name);  // 输出: "手机"

获取属性特性​

使用Object.getOwnPropertyDescriptor方法可以获取属性的特性：

javascript
const descriptor = Object.getOwnPropertyDescriptor(product, "name");
console.log(descriptor);
// 输出: {value: "手机", writable: false, enumerable: true, configurable: false}

属性的遍历​

1. for...in循环​

javascript
const student = {
  name: "李四",
  age: 20,
  grade: "A"
};

for (let key in student) {
  console.log(key + ": " + student[key]);
}
// 输出:
// name: 李四
// age: 20
// grade: A

2. Object.keys()​

javascript
const keys = Object.keys(student);
console.log(keys);  // 输出: ["name", "age", "grade"]

3. Object.values()​

javascript
const values = Object.values(student);
console.log(values);  // 输出: ["李四", 20, "A"]

4. Object.entries()​

javascript
const entries = Object.entries(student);
console.log(entries);
// 输出: [["name", "李四"], ["age", 20], ["grade", "A"]]

计算属性名（Computed Property Names）​

ES6引入了计算属性名，允许我们在对象字面量中使用表达式作为属性名：

javascript
const prefix = "app";
const counter = 0;

const app = {
  [prefix + "_" + ++counter]: "值1",
  [prefix + "_" + ++counter]: "值2",
  [prefix + "_" + ++counter]: "值3"
};

console.log(app);
// 输出: {app_1: "值1", app_2: "值2", app_3: "值3"}

简写属性名（Shorthand Property Names）​

ES6还引入了属性名简写，当变量名和属性名相同时可以简化写法：

javascript
const name = "王五";
const age = 30;

// 旧写法
const person1 = {
  name: name,
  age: age
};

// ES6简写
const person2 = {
  name,
  age
};

console.log(person2);  // 输出: {name: "王五", age: 30}

实际应用案例​

1. 用户配置对象​

javascript
const userPreferences = {
  theme: "dark",
  fontSize: 16,
  notifications: true,
  
  // 修改配置的方法
  updatePreference(key, value) {
    if (key in this) {
      this[key] = value;
      console.log(`已更新${key}为${value}`);
      return true;
    }
    return false;
  },
  
  // 重置为默认值
  resetToDefault() {
    this.theme = "light";
    this.fontSize = 14;
    this.notifications = true;
    console.log("已重置为默认配置");
  }
};

// 使用配置对象
userPreferences.updatePreference("theme", "light");  // 输出: 已更新theme为light
userPreferences.resetToDefault();  // 输出: 已重置为默认配置

2. 数据建模​

javascript
const product = {
  id: "p123",
  name: "智能手表",
  price: 1299,
  discount: 0.15,
  stock: 50,
  
  // 计算折扣后价格
  getDiscountedPrice() {
    return this.price * (1 - this.discount);
  },
  
  // 减少库存
  decreaseStock(amount = 1) {
    if (this.stock >= amount) {
      this.stock -= amount;
      return true;
    }
    return false;
  }
};

console.log(`折扣后价格: ¥${product.getDiscountedPrice()}`);  // 输出: 折扣后价格: ¥1104.15
console.log(`减少库存结果: ${product.decreaseStock(5)}`);      // 输出: 减少库存结果: true
console.log(`当前库存: ${product.stock}`);                    // 输出: 当前库存: 45

总结​

JavaScript对象属性是构建复杂应用程序的基础。通过本文，我们学习了：

  • 对象属性的基本概念和访问方法
  • 如何添加、修改和删除属性
  • 属性特性及其控制方法
  • 属性的遍历方式
  • 计算属性名和简写属性名
  • 对象属性在实际应用中的使用

掌握这些概念将帮助你更有效地在JavaScript中使用对象，构建更清晰、更可维护的代码。

练习题​

  1. 创建一个书籍对象，包含标题、作者和出版年份三个属性，并添加一个方法来输出书籍信息。

  2. 使用Object.defineProperty创建一个对象，使其某个属性只能读取不能修改。

  3. 编写代码检查一个对象是否包含特定属性，分别使用in运算符和hasOwnProperty方法。

  4. 创建一个对象，并使用所有学过的方法（for...in, Object.keys(), Object.values(), Object.entries()）来遍历其属性。

进一步学习资源​

通过本文的学习和实践，你将能够更好地理解和使用JavaScript对象属性，为构建复杂的JavaScript应用程序打下坚实基础。