记录JavaScript从基础到进阶-对象Object

JavaScript 中有八种数据类型。有七种原始类型，因为它们的值只包含一种东西（字符串，数字或者其他）。对象则用来存储键值对和更复杂的实体

创建对象

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

我们可以用下面两种语法中的任一种来创建一个空的对象：

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

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

我们可以在创建对象的时候，立即将一些属性以键值对的形式放到 {...} 中。

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

对象属性

我们可以随时添加、删除和读取文件。

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

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

属性的值可以是任意类型，让我们加个布尔类型：

user.isAdmin = true;

我们可以用 delete 操作符移除属性：

delete user.age;

我们也可以用多字词语来作为属性名，但必须给它们加上引号：

let user = {};

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

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

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

列表中的最后一个属性应以逗号结尾：

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

这叫做尾随（trailing）或悬挂（hanging）逗号。这样便于我们添加、删除和移动属性.

计算属性

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

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

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

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

我们可以在方括号中使用更复杂的表达式：

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

方括号比点符号更强大，它允许任何属性名和变量，但写起来也更加麻烦。

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

我们已经知道，变量名不能是编程语言的某个保留字，如 “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] —— 值为对象，与预期结果不同

“in”操作符-判断属性是否存在

相比于其他语言，JavaScript 的对象有一个需要注意的特性：能够被访问任何属性。即使属性不存在也不会报错！读取不存在的属性只会得到 undefined。所以我们可以很容易地判断一个属性是否存在：

let user = {};

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

这里还有一个特别的，检查属性是否存在的操作符 "in"。

语法是：

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

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

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

为何会有 in 运算符呢？与 undefined 进行比较来判断还不够吗？

大部分情况下与 undefined 进行比较来判断就可以了。但有一个例外情况，这种比对方式会有问题，那就是属性存在，但存储的值是 undefined 的时候：

let obj = {
  test: undefined
};

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

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

在上面的代码中，属性 obj.test 事实上是存在的，所以 in 操作符检查通过。

 “for in”操作符-遍历对象

为了遍历一个对象的所有键（key），可以使用一个特殊形式的循环：for..in。这跟我们在前面的 for(;;) 循环是完全不一样的东西。

语法：

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
}

对象属性的顺序

对象有顺序吗？如果我们遍历一个对象，我们获取属性的顺序是和属性添加时的顺序相同吗？

回答是：“有特别的顺序”：整数属性会被进行排序，其他属性则按照创建的顺序显示。详情如下：

例如，让我们考虑一个带有电话号码的对象：

let codes = {
  "49": "Germany",
  "41": "Switzerland",
  "44": "Great Britain",
  // ..,
  "1": "USA"
};

for(let code in codes) {
  alert(code); // 1, 41, 44, 49
}

我们可以看到输出结果为：// 1, 41, 44, 49，因为这些电话号码是具有整数属性，所以它们以升序排列。

这里的“整数属性”指的是一个可以在不做任何更改的情况下与一个整数进行相互转换的字符串。

所以，"49" 是一个整数属性名，因为我们把它转换成整数，再转换回来，它还是一样的。但是 “+49” 和 “1.2” 就不行了：

// Number(...) 显式转换为数字
// Math.trunc 是内建的去除小数部分的方法。
alert( String(Math.trunc(Number("49"))) ); // "49"，相同，整数属性
alert( String(Math.trunc(Number("+49"))) ); // "49"，不同于 "+49" ⇒ 不是整数属性
alert( String(Math.trunc(Number("1.2"))) ); // "1"，不同于 "1.2" ⇒ 不是整数属性

此外，如果属性名不是整数，那它们就按照创建时的顺序来排序，例如：

let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // 增加一个

// 非整数属性是按照创建的顺序来排列的
for (let prop in user) {
  alert( prop ); // name, surname, age
}

总结

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

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

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

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

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

其他操作：

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

我们在这一章的叫做“普通对象（plain object）”，或者叫对象。

JavaScript 中还有很多其他类型的对象：

• Array 用于存储有序数据集合，
• Date 用于存储时间日期，
• Error 用于存储错误信息。
• ……等等。

它们有着各自特别的特性，有时候会说“Array 类型”或“Date 类型”，但其实它们并不是自身所属的类型，而都是属于一个对象类型即 “object”，它们以不同的方式对 “object” 做了一些扩展。