正如我們在 數據類型 壹章學到的,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
JavaScript 理解不了。它認爲我們在處理 user.likes
,然後在遇到意外的 birds
時給出了語法錯誤。
點符號要求 key
是有效的變量標識符。這意味著:不包含空格,不以數字開頭,也不包含特殊字符(允許使用 $
和 _
)。
有另壹種方法,就是使用方括號,可用于任何字符串:
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 };
方括號比點符號更強大。它允許任何屬性名和變量,但寫起來也更加麻煩。
所以,大部分時間裏,當屬性名是已知且簡單的時候,就使用點符號。如果我們需要壹些更複雜的內容,那麽就用方括號。
在實際開發中,我們通常用已存在的變量當做屬性名。
例如:
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 };
我們已經知道,變量名不能是編程語言的某個保留字,如 “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] —— 值爲對象,與預期結果不同
我們從代碼中可以看出來,把它賦值爲 5
的操作被忽略了。
我們將在 後續章節 中學習 __proto__
的特殊性質,並給出了 解決此問題的方法。
相比于其他語言,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
的左邊必須是 屬性名。通常是壹個帶引號的字符串。
如果我們省略引號,就意味著左邊是壹個變量,它應該包含要判斷的實際屬性名。例如:
let user = { age: 30 }; let key = "age"; alert( key in user ); // true,屬性 "age" 存在
爲何會有 in
運算符呢?與 undefined
進行比較來判斷還不夠嗎?
確實,大部分情況下與 undefined
進行比較來判斷就可以了。但有壹個例外情況,這種比對方式會有問題,但 in
運算符的判斷結果仍是對的。
那就是屬性存在,但存儲的值是 undefined
的時候:
let obj = { test: undefined }; alert( obj.test ); // 顯示 undefined,所以屬性不存在? alert( "test" in obj ); // true,屬性存在!
在上面的代碼中,屬性 obj.test
事實上是存在的,所以 in
操作符檢查通過。
這種情況很少發生,因爲通常情況下不應該給對象賦值 undefined
。我們通常會用 null
來表示未知的或者空的值。因此,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” 就不行了:
// 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 }
所以,爲了解決電話號碼的問題,我們可以使用非整數屬性名來 欺騙 程序。只需要給每個鍵名加壹個加號 "+"
前綴就行了。
像這樣:
let codes = { "+49": "Germany", "+41": "Switzerland", "+44": "Great Britain", // .., "+1": "USA" }; for (let code in codes) { alert( +code ); // 49, 41, 44, 1 }
現在跟預想的壹樣了。
對象是具有壹些特殊特性的關聯數組。
它們存儲屬性(鍵值對),其中:
屬性的鍵必須是字符串或者 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” 做了壹些擴展。
JavaScript 中的對象非常強大。這裏我們只接觸了其冰山壹角。在後面的章節中,我們將頻繁使用對象進行編程,並學習更多關于對象的知識。
重要程度: 5
按下面的要求寫代碼,壹條對應壹行代碼:
創建壹個空的對象 user
。
爲這個對象增加壹個屬性,鍵是 name
,值是 John
。
再增加壹個屬性,鍵是 surname
,值是 Smith
。
把鍵爲 name
的屬性的值改成 Pete
。
刪除這個對象中鍵爲 name
的屬性。
let user = {}; user.name = "John"; user.surname = "Smith"; user.name = "Pete"; delete user.name;
重要程度: 5
寫壹個 isEmpty(obj)
函數,當對象沒有屬性的時候返回 true
,否則返回 false
。
應該像這樣:
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) { // 如果進到循環裏面,說明有屬性。 return false; } return true; }
使用沙箱的測試功能打開解決方案。
重要程度: 5
我們有壹個保存著團隊成員工資的對象:
let salaries = { John: 100, Ann: 160, Pete: 130 }
寫壹段代碼求出我們的工資總和,將計算結果保存到變量 sum
。從所給的信息來看,結果應該是 390
。
如果 salaries
是壹個空對象,那結果就爲 0
。
let salaries = { John: 100, Ann: 160, Pete: 130 }; let sum = 0; for (let key in salaries) { sum += salaries[key]; } alert(sum); // 390
重要程度: 3
創建壹個 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
檢查值類型。
打開帶有測試的沙箱。
function multiplyNumeric(obj) { for (let key in obj) { if (typeof obj[key] == 'number') { obj[key] *= 2; } } }
使用沙箱的測試功能打開解決方案。