跳到主要内容

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应用程序打下坚实基础。