JavaScript 对象基本介绍

定义/作用

对象是用来存储键值对和更复杂的实体。

我们可以通过使用带有可选 属性列表 的花括号 {…} 来创建对象。一个属性就是一个键值对（“key: value”），其中键（key）是一个字符串（也叫做属性名），值（value）可以是任何值。

创建空对象

两种方式创建一个空对象

let user = new Object(); // “构造函数” 的语法
let user = {};  // “字面量” 的语法

常用的方式是用花括号。这种方式我们叫做 字面量。

创建带有两个属性的对象

let user = {     // 一个对象
  name: "John",  // 键 "name"，值 "John"
  age: 30        // 键 "age"，值 30
};

属性有键（或者也可以叫做“名字”或“标识符”），位于冒号 ":" 的前面，值在冒号的右边。

在 user 对象中，有两个属性：

1. 第一个的键是 "name"，值是 "John"。
2. 第二个的键是 "age"，值是 30。

属性的值可以是任意类型。

属性的访问/读取

可以使用点符号访问属性值：

// 读取文件的属性：
alert( user.name ); // John
alert( user.age ); // 30

属性的添加

不存在的键则为添加

user.isAdmin = true;

属性的删除

delete user.age;

属性名可以是多个单词的组合, 但必须加引号

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 多词属性名必须加引号
};

最后一个属性的结尾建议加逗号

let user = {
  name: "John",
  age: 30,
}

这叫做尾随（trailing）或悬挂（hanging）逗号。这样便于我们添加、删除和移动属性，因为所有的行都是相似的。

属性读取/访问的另一种形式：方括号

对于多词属性，点操作就不能用了：

// 这将提示有语法错误
user.likes birds = true

点符号要求 key 是有效的变量标识符。这意味着：不包含空格，不以数字开头，也不包含特殊字符（允许使用 $ 和 _）。

使用方括号，可用于任何字符串：

let user = {};

// 设置
user["likes birds"] = true;

// 读取
alert(user["likes birds"]); // true

// 删除
delete user["likes birds"];

方括号中的字符串要放在引号中，单引号或双引号都可以。

方括号使属性访问更加灵活

方括号提供了一种可以通过任意表达式来获取属性名的方式 —— 与文本字符串不同 —— 例如下面的变量：

let key = "likes birds";

// 跟 user["likes birds"] = true; 一样
user[key] = true;

点符号不能以类似的方式使用：

let user = {
  name: "John",
  age: 30
};

let key = "name";
alert( user.key ) // undefined

计算属性

当创建一个对象时，我们可以在对象字面量中使用方括号。这叫做 计算属性。

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};

alert( bag.apple ); // 5 如果 fruit="apple"

计算属性的含义很简单：[fruit] 含义是属性名应该从 fruit 变量中获取。

所以，如果一个用户输入 "apple"，bag 将变为 {apple: 5}。

在方括号中使用更复杂的表达式：

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

总结

当属性名是已知且简单的时候，就使用点符号。如果我们需要一些更复杂的内容，那么就用方括号。

---

属性值简写

我们通常用已存在的变量当做属性名。例如：

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ……其他的属性
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

在上面的例子中，属性名跟变量名一样。这种通过变量生成属性的应用场景很常见，在这有一种特殊的 属性值缩写 方法，使属性名变得更短。

可以用 name 来代替 name:name 像下面那样：

function makeUser(name, age) {
  return {
    name, // 与 name: name 相同
    age,  // 与 age: age 相同
    // ...
  };
}

属性名称限制

我们已经知道，变量名不能是编程语言的某个保留字，如 “for”、“let”、“return” 等……

但对象的属性名并不受此限制：

// 这些属性都没问题
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

简而言之，属性命名没有限制。属性名可以是任何字符串或者 symbol 。

其他类型会被自动地转换为字符串。

例如：当数字 0 被用作对象的属性的键时，会被转换为字符串 "0"：

let obj = {
  0: "test" // 等同于 "0": "test"
};

// 都会输出相同的属性（数字 0 被转为字符串 "0"）
alert( obj["0"] ); // test
alert( obj[0] ); // test (相同的属性)

注意：

一个名为 __proto__ 的属性。我们不能将它设置为一个非对象的值：

let obj = {};
obj.__proto__ = 5; // 分配一个数字
alert(obj.__proto__); // [object Object] —— 值为对象，与预期结果不同

我们从代码中可以看出来，把它赋值为 5 的操作被忽略了。

后面讲解决办法。

属性存在性检测，“in” 操作符

JavaScript 的对象有一个需要注意的特性：即使属性不存在也不会报错！

读取不存在的属性只会得到 undefined。

// 暴力检测
let user = {};

alert( user.noSuchProperty === undefined ); // true 意思是没有这个属性

检查属性是否存在的操作符 "in"。

语法为：

"key" in object

例如：

let user = { name: "John", age: 30 };

alert( "age" in user ); // true，user.age 存在
alert( "blabla" in user ); // false，user.blabla 不存在。

in 的左边必须是 属性名。通常是一个带引号的字符串。

如果我们省略引号，就意味着左边是一个变量，它应该包含要判断的实际属性名。例如：

let user = { age: 30 };

let key = "age";
alert( key in user ); // true，属性 "age" 存在

大部分情况下与 undefined 进行比较来判断就可以了。但有一个例外情况，这种比对方式会有问题，但 in 运算符的判断结果仍是对的。

那就是属性存在，但存储的值是 undefined 的时候：

let obj = {
  test: undefined
};

alert( obj.test ); // 显示 undefined，所以属性不存在？

alert( "test" in obj ); // true，属性存在！

这种情况很少发生，因为通常情况下不应该给对象赋值 undefined。我们通常会用 null 来表示未知的或者空的值。因此，in 运算符是代码中的特殊来宾。

for…in 循环诞生

为了遍历一个对象的所有键（key），可以使用一个特殊形式的循环：for..in。

语法：

for (key in object) {
  // 对此对象属性中的每个键执行的代码
}

例如，让我们列出 user 所有的属性：

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // John, 30, true
}

注意，所有的 “for” 结构体都允许我们在循环中定义变量，像这里的 let key。

总结

对象是具有一些特殊特性的关联数组。

它们存储属性（键值对），其中：

• 属性的键必须是字符串或者 symbol（通常是字符串）。
• 值可以是任何类型。

我们可以用下面的方法访问属性：

• 点符号: obj.property。
• 方括号 obj["property"]，方括号允许从变量中获取键，例如 obj[varWithKey]。

其他操作：

• 删除属性：delete obj.prop。
• 检查是否存在给定键的属性："key" in obj。
• 遍历对象：for(let key in obj) 循环。

写在最后

JavaScript 中的对象非常强大。这里我们只接触了其冰山一角。