圖解 JavaScript 對象 — 現代 JavaScript 教程

對象

正如咱們在 數據類型 一章學到的，JavaScript 中有七種數據類型。有六種原始類型，由於他們的值只包含一種東西（字符串，數字或者其餘）。

相反，對象則用來存儲鍵值對和更復雜的實體。在 JavaScript 中，對象幾乎滲透到了這門編程語言的方方面面。因此，在咱們深刻理解這門語言以前，必須先理解對象。

咱們能夠經過使用帶有可選 屬性列表 的花括號 {…} 來建立對象。一個屬性就是一個鍵值對（"key: value"），其中鍵（key）是一個字符串（也叫作屬性名），值（value）能夠是任何值。

咱們能夠把對象想象成一個帶有簽名文件的文件櫃。每一條數據都基於鍵（key）存儲在文件中。這樣咱們就能夠很容易根據文件名（也就是「鍵」）查找文件或添加/刪除文件了。

咱們能夠用下面兩種語法中的任一種來建立一個空的對象（「空櫃子」）：

let user = new Object(); // 「構造函數」 的語法
let user = {};  // 「字面量」 的語法
複製代碼

一般，咱們用花括號。這種方式咱們叫作字面量。

文本和屬性

咱們能夠在建立對象的時候，當即將一些屬性以鍵值對的形式放到 {...} 中。

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

屬性有鍵（或者也能夠叫作「名字」或「標識符」），位於冒號 ":" 的前面，值在冒號的右邊。

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

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

生成的 user 對象能夠被想象爲一個放置着兩個標記有 "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  // 多詞屬性名必須加引號
};
複製代碼

列表中的最後一個屬性應以逗號結尾：

let user = {
  name: "John",
  age: 30,
}
複製代碼

這叫作尾隨（trailing）或懸掛（hanging）逗號。這樣便於咱們添加、刪除和移動屬性，由於全部的行都是類似的。

方括號

對於多詞屬性，點操做就不能用了：

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

這是由於點操做須要的鍵是一個有效的標識符，不能有空格和其餘的一些限制。

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

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;
複製代碼

在這裏，變量 key 能夠是程序運行時計算獲得的，也能夠是根據用戶的輸入獲得的。而後咱們能夠用它來訪問屬性。這給了咱們很大的靈活性。

例如：

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
複製代碼

計算屬性

咱們能夠在對象字面量中使用方括號。這叫作 計算屬性。

例如：

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 = prompt("Which fruit to buy?", "apple");
let bag = {};

// 從 fruit 變量中獲取值
bag[fruit] = 5;
複製代碼

……可是看起來更好。

咱們能夠在方括號中使用更復雜的表達式：

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
複製代碼

通常來講，任何名字均可以，只有一個特殊的："__proto__" 由於歷史緣由要特別對待。好比，咱們不能把它設置爲非對象的值：

let obj = {};
obj.__proto__ = 5;
alert(obj.__proto__); // [object Object]，這樣沒法得到預期效果
複製代碼

咱們從代碼中能夠看出來，把它賦值爲 5 的操做被忽略了。

若是咱們打算在一個對象中存儲任意的鍵值對，並容許訪問者指定鍵，那麼這可能會成爲 bug 甚至漏洞的來源。

好比，訪問者可能選擇 __proto__ 做爲鍵，這個賦值的邏輯就失敗了（像上面那樣）。

有一種讓對象把 __proto__ 做爲常規屬性進行對待的方法，在後面章節會講到，但如今咱們須要先來學習更多對象的相關知識。

還有另一種數據結構 Map，咱們會在後面的 Map and Set（映射和集合） 這章節學習它，它支持任意的鍵。

---

屬性值簡寫

在實際開發中，咱們一般用已存在的變量當作屬性名。

例如：

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 相同
    // ...
  };
}
複製代碼

咱們能夠把屬性名簡寫方式和正常方式混用：

let user = {
  name,  // 與 name:name 相同
  age: 30
};
複製代碼

存在性檢查

對象的一個顯著的特色就是其全部的屬性都是可訪問的。若是某個屬性不存在也不會報錯！訪問一個不存在的屬性只是會返回 undefined。這提供了一種廣泛的用於檢查屬性是否存在的方法 —— 獲取值來與 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，從 key 獲取屬性名並檢查這個屬性
複製代碼

---

對存儲值爲 undefined 的屬性使用 "in"

一般，檢查屬性是否存在時，使用嚴格比較 "=== undefined" 就夠了。但在一種特殊狀況下，這種方式會失敗，而 "in" 卻能夠正常工做。

那就是屬性存在，可是存儲值爲 undefined：

let obj = {
  test: undefined
};

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

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

在上面的代碼中，屬性 obj.test 事實上是存在的，因此 in 操做符檢查經過。

這種狀況不多發生，由於一般狀況下是不會給對象賦值 undefined 的，咱們常常會用 null 來表示未知的或者空的值。

---

"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
}
複製代碼

注意，全部的 "for" 結構體都容許咱們在循環中定義變量，像這裏的 let key。

一樣，咱們能夠用其餘屬性名來替代 key。例如 "for(let prop in obj)" 也很經常使用。

像對象同樣排序

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

簡短的回答是：「有特別的順序」：整數屬性會被進行排序，其餘屬性則按照建立的順序顯示。詳情以下：

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

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

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

對象可用於面向用戶的建議選項列表。若是咱們的網站主要面向德國觀衆，那麼咱們可能但願 49 排在第一。

但若是咱們執行代碼，會看到徹底不一樣的景象：

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

由於這些電話號碼是整數，因此它們以升序排列。因此咱們看到的是 1, 41, 44, 49。

---

整數屬性？那是什麼？

這裏的「整數屬性」指的是一個能夠在不做任何更改的狀況下轉換爲整數的字符串（包括整數到整數）。

因此，"49" 是一個整數屬性名，由於咱們把它轉換成整數，再轉換回來，它仍是同樣。可是 "+49" 和 "1.2" 就不行了：

// 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
}
複製代碼

因此，爲了解決電話號碼的問題，咱們可使用非整數屬性名來 欺騙 程序。只須要給每一個鍵名加一個加號 "+" 前綴就好了。

像這樣：

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

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

如今跟預想的同樣了。

引用複製

對象和其餘原始類型的一個根本的區別是，對象都是「經過引用」存儲和複製的。

原始類型：字符串，數字，布爾類型 — 做爲總體值被賦值或複製。

例如：

let message = "Hello!";
let phrase = message;
複製代碼

結果是咱們獲得了兩個獨立變量，每一個變量存的都是 "Hello!"。

對象跟這個不同。

變量存儲的不是對象自己，而是「內存中的地址」，換句話說就是對象的「引用」。

下面是這個對象的存儲結構圖：

let user = {
  name: "John"
};
複製代碼

在這裏，對象被存儲在內存中的某個位置。變量 user 有一個對它的引用。

當對象被複制的時候 — 引用被複制了一份, 對象並無被複制。

若是咱們將對象想象成是一個抽屜，那麼變量就是一把鑰匙。拷貝對象是複製了鑰匙，可是並無複製抽屜自己。

例如：

let user = { name: "John" };

let admin = user; // 複製引用
複製代碼

如今咱們有了兩個變量，可是都指向同一個對象：

咱們能夠經過其中任意一個變量訪問抽屜並改變其中的內容：

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 被經過名爲 "admin" 的引用修改了

alert(user.name); // 'Pete'，經過名爲 "user" 的引用查看修改
複製代碼

上面的例子證明了只存在一個對象。就像咱們的一個抽屜帶有兩把鑰匙，若是使用其中一把鑰匙（admin）打開抽屜並改變抽屜裏放的東西，稍後使用另一把鑰匙（user）打開抽屜的時候，就會看到變化。

比較引用

等號 == 和嚴格相等 === 操做符對於對象來講沒差異。

兩個對象只有在它們實際上是一個對象時纔會相等。

例如，若是兩個變量引用指向同一個對象，那麼它們相等：

let a = {};
let b = a; // 複製引用

alert( a == b ); // true，兩個變量指向同一個對象
alert( a === b ); // true
複製代碼

若是是兩個獨立的對象，則它們不相等，即便它們都是空的：

let a = {};
let b = {}; // 兩個獨立的對象

alert( a == b ); // false
複製代碼

對於像 obj1 > obj2 這樣兩個對象的比較，或對象與原始值的比較 obj == 5，對象會被轉換成原始值。咱們很快就會學習到對象的轉化是如何實現的，可是事實上，這種比較真的極少用到，這種比較的出現常常是代碼的 BUG 致使的。

常量對象

一個被 const 修飾的對象是 能夠 被修改。

例如：

const user = {
  name: "John"
};

user.age = 25; // (*)

alert(user.age); // 25
複製代碼

看起來好像 (*) 這行代碼會致使錯誤，但並無，這裏徹底沒問題。這是由於 const 修飾的只是 user 自己存儲的值。在這裏 user 始終存儲的都是對同一個對象的引用。(*) 這行代碼修改的是對象內部的內容，並無改變 user 存儲的對象的引用。

若是你想把其餘內容賦值給 user，那就會報錯了，例如：

const user = {
  name: "John"
};

// 錯誤（不能再給 user 賦值）
user = {
  name: "Pete"
};
複製代碼

……那麼若是咱們想要建立不可變的對象屬性，應該怎麼作呢？想讓 user.age = 25 這樣的賦值報錯，這也是能夠的。咱們會在 屬性的標誌和描述符 這章學習這部份內容。

複製和合並，Object.assign

複製一個對象變量會建立指向此對象的另外一個引用。

那若是咱們須要複製一個對象呢？建立一份獨立的拷貝，一份克隆？

這也是可行的，可是有一點麻煩，由於 JavaScript 中沒有支持這種操做的內置函數。實際上，咱們不多這麼作。在大多數時候，複製引用都很好用。

但若是咱們真想這麼作，就須要建立一個新的對象，而後遍歷現有對象的屬性，在原始級別的狀態下複製給新的對象。

像這樣：

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

let clone = {}; // 新的空對象

// 複製全部的屬性值
for (let key in user) {
  clone[key] = user[key];
}

// 如今的複製是獨立的了
clone.name = "Pete"; // 改變它的值

alert( user.name ); // 原對象屬性值不變
複製代碼

咱們也能夠用 Object.assign 來實現。

語法是：

Object.assign(dest,[ src1, src2, src3...])
複製代碼

• 參數 dest 和 src1, ..., srcN（你須要多少就能夠設置多少，沒有限制）是對象。
• 這個方法將 src1, ..., srcN 這些全部的對象複製到 dest。換句話說，從第二個參數開始，全部對象的屬性都複製給了第一個參數對象，而後返回 dest。

例如，咱們能夠用這個方法來把幾個對象合併成一個：

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// 把 permissions1 和 permissions2 的全部屬性都拷貝給 user
Object.assign(user, permissions1, permissions2);

// 如今 user = { name: "John", canView: true, canEdit: true }
複製代碼

若是用於接收的對象（user）已經有了一樣屬性名的屬性，已有的則會被覆蓋：

let user = { name: "John" };

// 覆蓋 name，增長 isAdmin
Object.assign(user, { name: "Pete", isAdmin: true });

// 如今 user = { name: "Pete", isAdmin: true }
複製代碼

咱們能夠用 Object.assign 來替代循環賦值進行簡單的克隆操做：

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

let clone = Object.assign({}, user);
複製代碼

它將對象 user 的全部的屬性複製給了一個空對象並返回。實際上和循環賦值沒什麼區別，只是更短了。

直到如今，咱們都是假設 user 的全部屬性都是原始值。可是屬性也能夠是其餘對象的引用。這種咱們應該怎麼操做呢？

例如：

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182
複製代碼

如今，僅僅進行 clone.sizes = user.sizes 複製是不夠的，由於 user.sizes 是一個對象，這個操做只能複製這個對象的引用。因此 clone 和 user 共享了一個對象。

像這樣：

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true，同一個對象

// user 和 clone 共享 sizes 對象
user.sizes.width++;       // 在這裏改變一個屬性的值
alert(clone.sizes.width); // 51，在這裏查看屬性的值
複製代碼

爲了解決這個問題，咱們在複製的時候應該檢查 user[key] 的每個值，若是它是一個對象，那麼把它也複製一遍，這叫作深拷貝（deep cloning）。

有一個標準的深拷貝算法，用於解決上面這種和一些更復雜的狀況，叫作 結構化克隆算法（Structured cloning algorithm）。爲了避免重複造輪子，咱們可使用它的一個 JavaScript 實現的庫 lodash，方法名叫作 _.cloneDeep(obj)。

總結

對象是具備一些特殊特性的關聯數組。

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

• 屬性的鍵必須是字符串或者 symbol（一般是字符串）。
• 值能夠是任何類型。

咱們能夠用下面的方法訪問屬性：

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

其餘操做：

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

對象是經過引用被賦值或複製的。換句話說，變量存儲的不是「對象的值」，而是值的「引用」（內存地址）。因此複製這樣的變量或者將其做爲函數參數進行傳遞時，複製的是引用，而不是對象。基於複製的引用（例如添加/刪除屬性）執行的全部的操做，都是在同一個對象上執行的。

咱們可使用 Object.assign 或者 _.cloneDeep(obj) 進行「真正的複製」（一個克隆）。

咱們在這一章學習的叫作「基本對象」，或者就叫對象。

JavaScript 中還有不少其餘類型的對象：

• Array 用於存儲有序數據集合，
• Date 用於存儲時間日期，
• Error 用於存儲錯誤信息。
• ……等等。

它們有着各自特別的特性，咱們將在後面學習到。有時候你們會說「數組類型」或「日期類型」，但其實它們並非自身所屬的類型，而是屬於一個對象類型即 "object"。它們以不一樣的方式對 "object" 作了一些擴展。

JavaScript 中的對象很是強大。這裏咱們只接觸了冰山一角。在後面的章節中，咱們將頻繁使用對象進行編程，並學習更多關於對象的知識。

做業題

先本身作題目再看答案。

1. 你好，對象

重要程度：⭐️⭐️⭐️⭐️⭐️

按下面的要求寫代碼，一條對應一行代碼：

1. 建立一個空的對象 user。
2. 爲這個對象增長一個屬性，鍵是 name，值是 John。
3. 再增長一個屬性，鍵是 surname，值是 Smith。
4. 把鍵爲 name 的屬性的值改爲 Pete。
5. 刪除這個對象中鍵爲 name 的屬性。

2. 檢查空對象

重要程度：⭐️⭐️⭐️⭐️⭐️

寫一個 isEmpty(obj) 函數，當對象沒有屬性的時候返回 true，不然返回 false。

應該像這樣：

let schedule = {};

alert( isEmpty(schedule) ); // true

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

alert( isEmpty(schedule) ); // false
複製代碼

3. 不可變對象

重要程度：⭐️⭐️⭐️⭐️⭐️

有可能改變用 const 聲明的對象嗎？你怎麼看？

const user = {
  name: "John"
};

// 這樣有效嗎？
user.name = "Pete";
複製代碼

4. 對象屬性求和

重要程度：⭐️⭐️⭐️⭐️⭐️

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

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}
複製代碼

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

若是 salaries 是一個空對象，那結果就爲 0。

5. 數值屬性都乘以 2

重要程度：⭐️⭐️⭐

建立一個 multiplyNumeric(obj) 函數，把 obj 全部的數值屬性都乘以 2。

例如：

// 在調用以前
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// 調用函數以後
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};
複製代碼

注意 multiplyNumeric 函數不須要返回任何值，它應該就地修改對象。

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

答案：

在微信公衆號「技術漫談」後臺回覆 1-4-1 獲取做業答案。

---

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 並列的 JavaScript 學習教程。

在線免費閱讀：zh.javascript.info

---

掃描下方二維碼，關注微信公衆號「技術漫談」，訂閱更多精彩內容。