您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript對象特性與實踐應用的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
JavaScript 的簡單數據類型是數字、字符串、布爾值(true/false)、null 以及 undefined,其它所有的值都是對象。這些對象是可變的鍵值對集合。
對象是屬性的容器,每個屬性都有名字和值。屬性的名字可以是包含空字符串在內的任何字符串,而屬性值是除 undefined 值之外的任意值。
對象是無類型的,它對屬性的名字和值沒有類型限制。所以對象很適合匯集和管理數據。對象可以包含其他對象,所以可以很容易地表示成樹狀或圖形數據結構。
使用原型鏈,可以讓一個對象繼承另一個對象的屬性。合理地使用這一特性,可以減少初始化對象所消耗的內存和時間。
1 對象字面量
對象字面量是包圍在一對花括號中的零或多個名值對,它可以出現在任何允許表達式出現的地方:
var empty_object = {}; var stooge = { "first-name": "deniro", "last-name": "Li" };
屬性的名字可以是包含空字符串在內的任何字符串。如果屬性名是合法的 JavaScript 標識符,則可以不加引號。逗號用來分隔多個名值對。
屬性值可以是任意的表達式(包括另一個對象字面量),即對象是可潛逃的:
var flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: "2017-08-02 19:00", city: "Sydney" }, arrival: { IATA: "LAX", time: "2017-08-03 21:37", city: "Los Angeles" } };
2 檢索
可以使用 [ ]
語法來獲取對象的值。如果字符串表達式是一個字符串字面量,而且它又是一個合法的 JavaScript 標識符,那么也可以使用 . 語法。優(yōu)先使用 . 語法,因為它更緊湊,而且可讀性更好:
console.log(stooge["first-name"]);//"deniro" console.log(flight.departure.IATA);//"SYD"(優(yōu)先考慮 . 表示法)
如果要檢索的屬性的值不存在,會返回 undefined:
console.log(stooge["middle-name"]); console.log(flight.status); console.log(stooge["FIRST-NAME"]);
|| 運算符可用來填充默認值:
console.log(stooge["middle-name"] || "(none)");//(none) console.log(flight.status || "unknown");//unknown
從 undefined 的屬性中取值會拋出 TypeError 異常,我們可以使用 && 來避免這個問題:
console.log(flight.equipment);//undefined //console.log(flight.equipment.model);//拋出 TypeError console.log(flight.equipment && flight.equipment.model);//undefined
3 更新
可以通過賦值語句來更新對象的值。如果屬性名已存在于對象中,那么屬性的值就會被替換:
stooge["first-name"] = "lily"; console.log(stooge["first-name"]);//"lily"
如果對象之前沒有這個屬性,那么這個新屬性就會被擴充到對象中:
stooge["middle-name"] = "Song"; console.log(stooge["middle-name"]);//"Song" stooge.nickname = "Deniro"; console.log(stooge.nickname);//"Deniro" flight.equipment = { model: "Boeiing 787" }; console.log(flight.equipment.model);//"Boeiing 787" flight.status = "overdue"; console.log(flight.status);//"overdue"
4 引用
對象是通過引用來傳遞的,所以它們永遠不會被復制:
var x = stooge; x.nickname = "Lucy"; console.log(stooge.nickname);//"Lucy";x 與 stooge 指向同一個引用 var a = {}, b = {}, c = {};//a、b、c 引用一個不同的空對象 a = b = c = {};//a、b、c 引用同一個空對象
5 原型
每個對象都連接到一個原型對象,然后繼承原型對象的屬性。所有通過對象字面量創(chuàng)建的對象都連接到 Object.prototype
,它是標配對象。
創(chuàng)建一個新對象時,可以指定某個對象作為它的原型。我們?yōu)?Object 新增一個 create 方法,它會創(chuàng)建并返回一個使用原對象作為原型對象的新對象:
if (typeof Object.beget !== "function") { Object.create = function (o) { var F = function () { }; F.prototype = o; return new F(); } } var another_stooge = Object.create(stooge);
更新某個對象時,是不會更新原型對象的:
another_stooge["first-name"] = "Jack"; console.log(another_stooge["first-name"]);//"Jack" console.log(stooge["first-name"]);//"lily"
只有在檢索的時候,才會用到原型對象。如果沒有在對象中檢索到某個屬性,那么 JavaScript 就會試著從原型對象中獲取屬性值,如果還是沒有找到,JavaScript 就會沿著原型鏈向上回溯,直到 Object。如果都不存在,就會返回 undefined。
原型關系是動態(tài)的關系。如果我們新增一個屬性到原型鏈中,那么這個屬性就會立即對所有基于該原型所創(chuàng)建的對象可見:
stooge.profession = "actor"; console.log(another_stooge.profession);//"actor"
6 反射
typeof
操作符有助于確定屬性的類型:
console.log(typeof flight.number);//number console.log(typeof flight.status);//string console.log(typeof flight.arrival);//object console.log(typeof flight.manifest);//undefined
注意原型鏈中的任何屬性都會產生值:
console.log(typeof flight.toString);//function console.log(typeof flight.constructor);//function
有兩種方法可以去除這些屬性:
①. 檢查并丟棄值為函數的屬性。
②. 使用 hasOwnProperty 方法,如果對象擁有獨有的屬性,它就會返回 true:
console.log(flight.hasOwnProperty("number"));//true console.log(flight.hasOwnProperty("constructor"));//false
7 枚舉
for in
語句會遍歷一個對象中的所有屬性名,所以要過濾掉那些你不想要的屬性:
var name; for (name in another_stooge) { if (typeof another_stooge[name] !== 'function') {//過濾掉函數 document.writeln(name + ': ' + another_stooge[name] + "; "); } }
屬性名出現的順序是不確定的。如果要讓屬性以特定的順序出現,就要創(chuàng)建一個包含特定屬性名的數組:
var i; var properties = [ "first-name", "middle-name", "last-name", 'profession' ];//定義想要的屬性以及屬性順序 for (i = 0; i < properties.length; i += 1) { document.writeln(properties[i] + ": " + another_stooge[properties[i]] + "; "); }
8 刪除
delete
運算符會刪除對象的屬性,但它不會涉及原型鏈中的任何對象。
刪除對象的屬性可能會讓來自原型鏈的屬性呈現出來:
another_stooge.nickname = "Jack"; console.log(another_stooge.nickname);//Jack delete another_stooge.nickname; console.log(another_stooge.nickname);//Lucy
9 減少全局變量的污染
全局變量削弱了程序的靈活性,所以要避免使用。
只創(chuàng)建一個唯一的全局變量:
var MYAPP = {};
這個變量就變成我們應用的容器:
MYAPP.stooge = { "first-name": "deniro", "last-name": "Li" }; MYAPP.flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: "2017-08-02 19:00", city: "Sydney" }, arrival: { IATA: "LAX", time: "2017-08-03 21:37", city: "Los Angeles" } };
要把全局性的資源都納入一個命名空間下,這樣我們的程序與其他類庫發(fā)生沖突的可能性會顯著降低,而且程序也變得更易閱讀。
看完了這篇文章,相信你對“JavaScript對象特性與實踐應用的示例分析”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。