JavaScript - 对象属性

你好，未来的JavaScript法师们！今天，我们将深入探索JavaScript对象属性的神奇世界。作为你友善的计算机科学老师，我将在这次激动人心的旅程中引导你。所以，拿起你的虚拟魔杖（键盘），让我们施展一些代码魔法！

JavaScript - Object Properties

JavaScript 对象属性

JavaScript中的对象就像宝箱一样 - 它们以属性的形式保存着宝贵的信息。每个属性都是一个键值对，其中键就像标签，值就是宝藏本身。让我们创建第一个对象：

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

在这里，我们创建了一个名为wizard的对象，它有三个属性：name、age和house。每个属性都有一个键（如"name"）和一个值（如"Harry"）。

访问对象属性

现在我们有了wizard对象，我们如何访问它的属性呢？有两种方法可以做到这一点：

点标记法（Dot Notation）
括号标记法（Bracket Notation）

让我们试试两种方法：

// 点标记法
console.log(wizard.name);  // 输出: Harry

// 括号标记法
console.log(wizard["house"]);  // 输出: Gryffindor

点标记法更简单，也更常用。但是，当属性名中有空格或特殊字符，或者当你使用变量来访问属性时，括号标记法就非常方便了。

let property = "age";
console.log(wizard[property]);  // 输出: 17

访问嵌套对象属性

有时，对象可以包含其他对象。这就像一个神奇的嵌套木偶！让我们扩展我们的wizard对象：

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor",
wand: {
wood: "Holly",
core: "Phoenix feather",
length: 11
}
};

要访问嵌套属性，我们只需将点或括号标记法链起来：

console.log(wizard.wand.wood);  // 输出: Holly
console.log(wizard["wand"]["core"]);  // 输出: Phoenix feather

添加或更新对象属性

JavaScript中的对象是可变的，这意味着我们可以在创建后改变它们。让我们给我们的法师一些新技能：

// 添加一个新属性
wizard.skill = "Quidditch";

// 更新一个现有属性
wizard.age = 18;

console.log(wizard.skill);  // 输出: Quidditch
console.log(wizard.age);  // 输出: 18

删除对象属性

有时，我们需要让属性消失。为此，我们使用delete操作符：

delete wizard.house;
console.log(wizard.house);  // 输出: undefined

噗！house属性不见了。记住，使用delete只从对象中移除属性，它不会影响可能持有该属性值的任何变量。

枚举对象属性

如果我们想查看对象的所有属性呢？我们可以使用for...in循环：

for (let key in wizard) {
console.log(key + ": " + wizard[key]);
}

这将列出wizard对象的所有可枚举属性。但是，还有更多！我们还可以使用Object.keys()、Object.values()或Object.entries()来获取对象键、值或两者的数组：

console.log(Object.keys(wizard));    // 输出: ["name", "age", "wand", "skill"]
console.log(Object.values(wizard));  // 输出: ["Harry", 18, {wood: "Holly", core: "Phoenix feather", length: 11}, "Quidditch"]
console.log(Object.entries(wizard)); // 输出: [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]

属性特性

JavaScript中的每个属性都有一些定义其行为的特性。这些特性就像属性的个性特征。让我们来认识它们：

value：属性的值（显然！）
writable：我们可以改变属性的值吗？
enumerable：当枚举对象的属性时，这个属性应该出现吗？
configurable：我们可以删除这个属性或修改它的特性吗？

默认情况下，我们正常创建的属性，这些值都设置为true。但是我们可以使用Object.defineProperty()来改变它们：

Object.defineProperty(wizard, "name", {
writable: false,
enumerable: false
});

wizard.name = "Ron";  // 这不会工作
console.log(wizard.name);  // 输出: Harry

for (let key in wizard) {
console.log(key);  // "name"这里不会出现
}

下面是我们学到的属性方法的总结表：

方法	描述
`object.property`	使用点标记法访问属性
`object["property"]`	使用括号标记法访问属性
`object.property = value`	添加或更新属性
`delete object.property`	删除属性
`for...in`	枚举对象属性
`Object.keys(object)`	获取对象键的数组
`Object.values(object)`	获取对象值的数组
`Object.entries(object)`	获取对象[key, value]对的数组
`Object.defineProperty()`	定义一个新属性或修改现有属性

就这样，年轻的程序员们！你刚刚完成了JavaScript对象属性的速成课程。记住，熟能生巧，所以继续尝试这些概念。在你意识到之前，你将能够像一个真正的JavaScript法师一样召唤复杂的对象！

Credits: Image by storyset