對象
正如我們在 數據類型 一章學到的，JavaScript 中有七種數據類型。有六種原始類型，因為他們的值只包含一種東西（字符串，數字或者其他）。
相反，對象則用來存儲鍵值對和更復雜的實體。在 JavaScript 中，對象幾乎滲透到了這門編程語言的方方面面。所以，在我們深入理解這門語言之前，必須先理解對象。
我們可以通過使用帶有可選 屬性列表 的花括號 {…} 來創建對象。一個屬性就是一個鍵值對（”key: value”），其中鍵（key）是一個字符串（也叫做屬性名），值（value）可以是任何值。
我們可以把對象想象成一個帶有簽名文件的文件櫃。每一條數據都基於鍵（key）存儲在文件中。這樣我們就可以很容易根據文件名（也就是“鍵”）查找文件或添加/刪除文件了。
我們可以用下面兩種語法中的任一種來創建一個空的對象（“空櫃子”）：
let user = new Object(); // “構造函數” 的語法
let user = {}; // “字面量” 的語法
通常，我們用花括號。這種方式我們叫做字面量。
文本和屬性
我們可以在創建對象的時候，立即將一些屬性以鍵值對的形式放到 {...} 中。
let user = { // 一個對象
name: "John", // 鍵 "name"，值 "John"
age: 30 // 鍵 "age"，值 30
};
屬性有鍵（或者也可以叫做“名字”或“標識符”），位於冒號 ":" 的前面，值在冒號的右邊。
在 user 對象中，有兩個屬性：
- 第一個的鍵是
"name"，值是"John"。 - 第二個的鍵是
"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. 你好，對象
重要程度：⭐️⭐️⭐️⭐️⭐️
按下面的要求寫代碼，一條對應一行代碼：
- 創建一個空的對象
user。 - 為這個對象增加一個屬性，鍵是
name，值是John。 - 再增加一個屬性，鍵是
surname，值是Smith。 - 把鍵為
name的屬性的值改成Pete。 - 刪除這個對象中鍵為
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
掃描下方二維碼，關注微信公眾號「技術漫談」，訂閱更多精彩內容。
