Javascript 對象

正如我們在 數(shù)據(jù)類型 一章學(xué)到的，JavaScript 中有八種數(shù)據(jù)類型。有七種原始類型，因為它們的值只包含一種東西（字符串，數(shù)字或者其他）。

相反，對象則用來存儲鍵值對和更復(fù)雜的實體。在 JavaScript 中，對象幾乎滲透到了這門編程語言的方方面面。所以，在我們深入理解這門語言之前，必須先理解對象。

我們可以通過使用帶有可選 屬性列表 的花括號 {…} 來創(chuàng)建對象。一個屬性就是一個鍵值對（“key: value”），其中鍵（key）是一個字符串（也叫做屬性名），值（value）可以是任何值。

我們可以把對象想象成一個帶有簽名文件的文件柜。每一條數(shù)據(jù)都基于鍵（key）存儲在文件中。這樣我們就可以很容易根據(jù)文件名（也就是“鍵”）查找文件或添加/刪除文件了。

我們可以用下面兩種語法中的任一種來創(chuàng)建一個空的對象（“空柜子”）：

let user = new Object(); // “構(gòu)造函數(shù)” 的語法
let user = {};  // “字面量” 的語法

通常，我們用花括號。這種方式我們叫做 字面量。

文本和屬性

我們可以在創(chuàng)建對象的時候，立即將一些屬性以鍵值對的形式放到 {...} 中。

let user = {     // 一個對象
  name: "John",  // 鍵 "name"，值 "John"
  age: 30        // 鍵 "age"，值 30
};

屬性有鍵（或者也可以叫做“名字”或“標(biāo)識符”），位于冒號 ":" 的前面，值在冒號的右邊。

在 user 對象中，有兩個屬性：

1. 第一個的鍵是 ?"name"?，值是 ?"John"?。
2. 第二個的鍵是 ?"age"?，值是 ?30?。

生成的 user 對象可以被想象為一個放置著兩個標(biāo)記有 “name” 和 “age” 的文件的柜子。

我們可以隨時添加、刪除和讀取文件。

可以使用點符號訪問屬性值：

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

屬性的值可以是任意類型，讓我們加個布爾類型：

user.isAdmin = true;

我們可以用 delete 操作符移除屬性：

delete user.age;

我們也可以用多字詞語來作為屬性名，但必須給它們加上引號：

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 多詞屬性名必須加引號
};

列表中的最后一個屬性應(yīng)以逗號結(jié)尾：

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

這叫做尾隨（trailing）或懸掛（hanging）逗號。這樣便于我們添加、刪除和移動屬性，因為所有的行都是相似的。

方括號

對于多詞屬性，點操作就不能用了：

// 這將提示有語法錯誤
user.likes birds = true

JavaScript 理解不了。它認(rèn)為我們在處理 user.likes，然后在遇到意外的 birds 時給出了語法錯誤。

點符號要求 key 是有效的變量標(biāo)識符。這意味著：不包含空格，不以數(shù)字開頭，也不包含特殊字符（允許使用 $ 和 _）。

有另一種方法，就是使用方括號，可用于任何字符串：

let user = {};

// 設(shè)置
user["likes birds"] = true;

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

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

現(xiàn)在一切都可行了。請注意方括號中的字符串要放在引號中，單引號或雙引號都可以。

方括號同樣提供了一種可以通過任意表達(dá)式來獲取屬性名的方式 —— 與文本字符串不同 —— 例如下面的變量：

let key = "likes birds";

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

在這里，變量 ?key ?可以是程序運行時計算得到的，也可以是根據(jù)用戶的輸入得到的。然后我們可以用它來訪問屬性。這給了我們很大的靈活性。

例如：

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

let key = prompt("What do you want to know about the user?", "name");

// 訪問變量
alert( user[key] ); // John（如果輸入 "name"）

點符號不能以類似的方式使用：

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

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

計算屬性

當(dāng)創(chuàng)建一個對象時，我們可以在對象字面量中使用方括號。這叫做 計算屬性。

例如：

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

let bag = {
  [fruit]: 5, // 屬性名是從 fruit 變量中得到的
};

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

計算屬性的含義很簡單：?[fruit]? 含義是屬性名應(yīng)該從 ?fruit ?變量中獲取。

所以，如果一個用戶輸入 ?"apple"?，?bag ?將變?yōu)?nbsp;?{apple: 5}?。

本質(zhì)上，這跟下面的語法效果相同：

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

// 從 fruit 變量中獲取值
bag[fruit] = 5;

……但是看起來更好。

我們可以在方括號中使用更復(fù)雜的表達(dá)式：

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

方括號比點符號更強大。它允許任何屬性名和變量，但寫起來也更加麻煩。

所以，大部分時間里，當(dāng)屬性名是已知且簡單的時候，就使用點符號。如果我們需要一些更復(fù)雜的內(nèi)容，那么就用方括號。

屬性值簡寫

在實際開發(fā)中，我們通常用已存在的變量當(dāng)做屬性名。

例如：

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

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

在上面的例子中，屬性名跟變量名一樣。這種通過變量生成屬性的應(yīng)用場景很常見，在這有一種特殊的 屬性值縮寫 方法，使屬性名變得更短。

可以用 name 來代替 name:name 像下面那樣：

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

我們可以把屬性名簡寫方式和正常方式混用：

let user = {
  name,  // 與 name:name 相同
  age: 30
};

屬性名稱限制

我們已經(jīng)知道，變量名不能是編程語言的某個保留字，如 “for”、“l(fā)et”、“return” 等……

但對象的屬性名并不受此限制：

// 這些屬性都沒問題
let obj = {
  for: 1,
  let: 2,
  return: 3
};

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

簡而言之，屬性命名沒有限制。屬性名可以是任何字符串或者 symbol（一種特殊的標(biāo)志符類型，將在后面介紹）。

其他類型會被自動地轉(zhuǎn)換為字符串。

例如，當(dāng)數(shù)字 ?0 ?被用作對象的屬性的鍵時，會被轉(zhuǎn)換為字符串 ?"0"?：

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

// 都會輸出相同的屬性（數(shù)字 0 被轉(zhuǎn)為字符串 "0"）
alert( obj["0"] ); // test
alert( obj[0] ); // test (相同的屬性)

這里有個小陷阱：一個名為 __proto__ 的屬性。我們不能將它設(shè)置為一個非對象的值：

let obj = {};
obj.__proto__ = 5; // 分配一個數(shù)字
alert(obj.__proto__); // [object Object] —— 值為對象，與預(yù)期結(jié)果不同

我們從代碼中可以看出來，把它賦值為 ?5? 的操作被忽略了。

我們將在 后續(xù)章節(jié) 中學(xué)習(xí) ?__proto__? 的特殊性質(zhì)，并給出了 解決此問題的方法。

屬性存在性測試，“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 的左邊必須是 屬性名。通常是一個帶引號的字符串。

如果我們省略引號，就意味著左邊是一個變量，它應(yīng)該包含要判斷的實際屬性名。例如：

let user = { age: 30 };

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

為何會有 in 運算符呢？與 undefined 進行比較來判斷還不夠嗎？

確實，大部分情況下與 undefined 進行比較來判斷就可以了。但有一個例外情況，這種比對方式會有問題，但 in 運算符的判斷結(jié)果仍是對的。

那就是屬性存在，但存儲的值是 undefined 的時候：

let obj = {
  test: undefined
};

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

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

在上面的代碼中，屬性 obj.test 事實上是存在的，所以 in 操作符檢查通過。

這種情況很少發(fā)生，因為通常情況下不應(yīng)該給對象賦值 undefined。我們通常會用 null 來表示未知的或者空的值。因此，in 運算符是代碼中的特殊來賓。

"for..in" 循環(huán)

為了遍歷一個對象的所有鍵（key），可以使用一個特殊形式的循環(huán)：for..in。這跟我們在前面學(xué)到的 for(;;) 循環(huán)是完全不一樣的東西。

語法：

for (key in object) {
  // 對此對象屬性中的每個鍵執(zhí)行的代碼
}

例如，讓我們列出 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” 結(jié)構(gòu)體都允許我們在循環(huán)中定義變量，像這里的 let key。

同樣，我們可以用其他屬性名來替代 key。例如 "for(let prop in obj)" 也很常用。

像對象一樣排序

對象有順序嗎？換句話說，如果我們遍歷一個對象，我們獲取屬性的順序是和屬性添加時的順序相同嗎？這靠譜嗎？

簡短的回答是：“有特別的順序”：整數(shù)屬性會被進行排序，其他屬性則按照創(chuàng)建的順序顯示。詳情如下：

例如，讓我們考慮一個帶有電話號碼的對象：

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

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

對象可用于面向用戶的建議選項列表。如果我們的網(wǎng)站主要面向德國觀眾，那么我們可能希望 49 排在第一。

但如果我們執(zhí)行代碼，會看到完全不同的現(xiàn)象：

• USA (1) 排在了最前面
• 然后是 Switzerland (41) 及其它。

因為這些電話號碼是整數(shù)，所以它們以升序排列。所以我們看到的是 1, 41, 44, 49。

整數(shù)屬性？那是什么？

這里的“整數(shù)屬性”指的是一個可以在不做任何更改的情況下與一個整數(shù)進行相互轉(zhuǎn)換的字符串。

所以，"49" 是一個整數(shù)屬性名，因為我們把它轉(zhuǎn)換成整數(shù)，再轉(zhuǎn)換回來，它還是一樣的。但是 “+49” 和 “1.2” 就不行了：

// Number(...) 顯式轉(zhuǎn)換為數(shù)字
// Math.trunc 是內(nèi)建的去除小數(shù)部分的方法。
alert( String(Math.trunc(Number("49"))) ); // "49"，相同，整數(shù)屬性
alert( String(Math.trunc(Number("+49"))) ); // "49"，不同于 "+49" ? 不是整數(shù)屬性
alert( String(Math.trunc(Number("1.2"))) ); // "1"，不同于 "1.2" ? 不是整數(shù)屬性

……此外，如果屬性名不是整數(shù)，那它們就按照創(chuàng)建時的順序來排序，例如：

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

// 非整數(shù)屬性是按照創(chuàng)建的順序來排列的
for (let prop in user) {
  alert( prop ); // name, surname, age
}

所以，為了解決電話號碼的問題，我們可以使用非整數(shù)屬性名來 欺騙 程序。只需要給每個鍵名加一個加號 "+" 前綴就行了。

像這樣：

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

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

現(xiàn)在跟預(yù)想的一樣了。

總結(jié)

對象是具有一些特殊特性的關(guān)聯(lián)數(shù)組。

它們存儲屬性（鍵值對），其中：

• 屬性的鍵必須是字符串或者 symbol（通常是字符串）。
• 值可以是任何類型。

我們可以用下面的方法訪問屬性：

• 點符號: ?obj.property?。
• 方括號 ?obj["property"]?，方括號允許從變量中獲取鍵，例如 ?obj[varWithKey]?。

其他操作：

• 刪除屬性：?delete obj.prop?。
• 檢查是否存在給定鍵的屬性：?"key" in obj?。
• 遍歷對象：?for(let key in obj)? 循環(huán)。

我們在這一章學(xué)習(xí)的叫做“普通對象（plain object）”，或者就叫對象。

JavaScript 中還有很多其他類型的對象：

• ?Array ?用于存儲有序數(shù)據(jù)集合，
• ?Date ?用于存儲時間日期，
• ?Error ?用于存儲錯誤信息。
• ……等等。

它們有著各自特別的特性，我們將在后面學(xué)習(xí)到。有時候大家會說“Array 類型”或“Date 類型”，但其實它們并不是自身所屬的類型，而是屬于一個對象類型即 “object”。它們以不同的方式對 “object” 做了一些擴展。

JavaScript 中的對象非常強大。這里我們只接觸了其冰山一角。在后面的章節(jié)中，我們將頻繁使用對象進行編程，并學(xué)習(xí)更多關(guān)于對象的知識。

任務(wù)

---

你好，對象

重要程度: 5

按下面的要求寫代碼，一條對應(yīng)一行代碼：

1. 創(chuàng)建一個空的對象 ?user?。
2. 為這個對象增加一個屬性，鍵是 ?name?，值是 ?John?。
3. 再增加一個屬性，鍵是 ?surname?，值是 ?Smith?。
4. 把鍵為 ?name ?的屬性的值改成 ?Pete?。
5. 刪除這個對象中鍵為 ?name ?的屬性。

---

解決方案

let user = {};
user.name = "John";
user.surname = "Smith";
user.name = "Pete";
delete user.name;

---

檢查空對象

重要程度: 5

寫一個 isEmpty(obj) 函數(shù)，當(dāng)對象沒有屬性的時候返回 true，否則返回 false。

應(yīng)該像這樣：

let schedule = {};

alert( isEmpty(schedule) ); // true

schedule["8:30"] = "get up";

alert( isEmpty(schedule) ); // false

---

解決方案

只需要遍歷這個對象，如果對象存在任何屬性則 return false。

function isEmpty(obj) {
  for (let key in obj) {
    // 如果進到循環(huán)里面，說明有屬性。
    return false;
  }
  return true;
}

---

對象屬性求和

重要程度: 5

我們有一個保存著團隊成員工資的對象：

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}

寫一段代碼求出我們的工資總和，將計算結(jié)果保存到變量 sum。從所給的信息來看，結(jié)果應(yīng)該是 390。

如果 salaries 是一個空對象，那結(jié)果就為 0。

---

解決方案

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
};

let sum = 0;
for (let key in salaries) {
  sum += salaries[key];
}

alert(sum); // 390

---

將數(shù)值屬性值都乘以 2

重要程度: 3

創(chuàng)建一個 multiplyNumeric(obj) 函數(shù)，把 obj 所有的數(shù)值屬性值都乘以 2。

例如：

// 在調(diào)用之前
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// 調(diào)用函數(shù)之后
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

注意 multiplyNumeric 函數(shù)不需要返回任何值，它應(yīng)該就地修改對象。

P.S. 用 typeof 檢查值類型。

---

解決方案

function multiplyNumeric(obj) {
  for (let key in obj) {
    if (typeof obj[key] == 'number') {
      obj[key] *= 2;
    }
  }
}