圖解JavaScript對象—現代JavaScript教程

NO IMAGE

圖解JavaScript對象—現代JavaScript教程

對象

正如我們在 數據類型 一章學到的,JavaScript 中有七種數據類型。有六種原始類型,因為他們的值只包含一種東西(字符串,數字或者其他)。

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

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

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

圖解JavaScript對象—現代JavaScript教程

我們可以用下面兩種語法中的任一種來創建一個空的對象(“空櫃子”):

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

圖解JavaScript對象—現代JavaScript教程

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

文本和屬性

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

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

屬性有鍵(或者也可以叫做“名字”或“標識符”),位於冒號 ":" 的前面,值在冒號的右邊。

user 對象中,有兩個屬性:

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

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

圖解JavaScript對象—現代JavaScript教程

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

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

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

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

user.isAdmin = true;

圖解JavaScript對象—現代JavaScript教程

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

delete user.age;

圖解JavaScript對象—現代JavaScript教程

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

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

圖解JavaScript對象—現代JavaScript教程

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

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!"

圖解JavaScript對象—現代JavaScript教程

對象跟這個不一樣。

變量存儲的不是對象本身,而是“內存中的地址”,換句話說就是對象的“引用”。

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

let user = {
name: "John"
};

圖解JavaScript對象—現代JavaScript教程

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

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

如果我們將對象想象成是一個抽屜,那麼變量就是一把鑰匙。拷貝對象是複製了鑰匙,但是並沒有複製抽屜本身。

例如:

let user = { name: "John" };
let admin = user; // 複製引用

現在我們有了兩個變量,但是都指向同一個對象:

圖解JavaScript對象—現代JavaScript教程

我們可以通過其中任意一個變量訪問抽屜並改變其中的內容:

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...])
  • 參數 destsrc1, ..., 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 是一個對象,這個操作只能複製這個對象的引用。所以 cloneuser 共享了一個對象。

像這樣:

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


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

圖解JavaScript對象—現代JavaScript教程

相關文章

Mybatis源碼系列5二級緩存

如何衡量一個人的JavaScript水平?

《程序人生》2020無畏年少青春,迎風瀟灑前行|年度徵文

將前端技術棧移植到掌上遊戲機