快捷導(dǎo)航

JavaScript對(duì)象的特性與實(shí)踐應(yīng)用深入詳解

更新時(shí)間：2018年12月30日 10:38:17 作者：deniro_li

這篇文章主要介紹了JavaScript對(duì)象的特性與實(shí)踐應(yīng)用,結(jié)合實(shí)例形式較為深入的分析了javascript對(duì)象的相關(guān)概念、操作方法及注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript對(duì)象的特性與實(shí)踐應(yīng)用。分享給大家供大家參考，具體如下：

JavaScript 的簡(jiǎn)單數(shù)據(jù)類(lèi)型是數(shù)字、字符串、布爾值（true/false）、null 以及 undefined，其它所有的值都是對(duì)象。這些對(duì)象是可變的鍵值對(duì)集合。

對(duì)象是屬性的容器，每個(gè)屬性都有名字和值。屬性的名字可以是包含空字符串在內(nèi)的任何字符串，而屬性值是除 undefined 值之外的任意值。

對(duì)象是無(wú)類(lèi)型的，它對(duì)屬性的名字和值沒(méi)有類(lèi)型限制。所以對(duì)象很適合匯集和管理數(shù)據(jù)。對(duì)象可以包含其他對(duì)象，所以可以很容易地表示成樹(shù)狀或圖形數(shù)據(jù)結(jié)構(gòu)。

使用原型鏈，可以讓一個(gè)對(duì)象繼承另一個(gè)對(duì)象的屬性。合理地使用這一特性，可以減少初始化對(duì)象所消耗的內(nèi)存和時(shí)間。

1 對(duì)象字面量

對(duì)象字面量是包圍在一對(duì)花括號(hào)中的零或多個(gè)名值對(duì)，它可以出現(xiàn)在任何允許表達(dá)式出現(xiàn)的地方：

var empty_object = {};
var stooge = {
  "first-name": "deniro",
  "last-name": "Li"
};

屬性的名字可以是包含空字符串在內(nèi)的任何字符串。如果屬性名是合法的 JavaScript 標(biāo)識(shí)符，則可以不加引號(hào)。逗號(hào)用來(lái)分隔多個(gè)名值對(duì)。

屬性值可以是任意的表達(dá)式（包括另一個(gè)對(duì)象字面量），即對(duì)象是可潛逃的：

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 檢索

可以使用 [ ] 語(yǔ)法來(lái)獲取對(duì)象的值。如果字符串表達(dá)式是一個(gè)字符串字面量，而且它又是一個(gè)合法的 JavaScript 標(biāo)識(shí)符，那么也可以使用 . 語(yǔ)法。優(yōu)先使用 . 語(yǔ)法，因?yàn)樗o湊，而且可讀性更好：

console.log(stooge["first-name"]);//"deniro"
console.log(flight.departure.IATA);//"SYD"（優(yōu)先考慮 . 表示法）

如果要檢索的屬性的值不存在，會(huì)返回 undefined：

console.log(stooge["middle-name"]);
console.log(flight.status);
console.log(stooge["FIRST-NAME"]);

|| 運(yùn)算符可用來(lái)填充默認(rèn)值：

console.log(stooge["middle-name"] || "(none)");//(none)
console.log(flight.status || "unknown");//unknown

從 undefined 的屬性中取值會(huì)拋出 TypeError 異常，我們可以使用 && 來(lái)避免這個(gè)問(wèn)題：

console.log(flight.equipment);//undefined
//console.log(flight.equipment.model);//拋出 TypeError
console.log(flight.equipment && flight.equipment.model);//undefined

3 更新

可以通過(guò)賦值語(yǔ)句來(lái)更新對(duì)象的值。如果屬性名已存在于對(duì)象中，那么屬性的值就會(huì)被替換：

stooge["first-name"] = "lily";
console.log(stooge["first-name"]);//"lily"

如果對(duì)象之前沒(méi)有這個(gè)屬性，那么這個(gè)新屬性就會(huì)被擴(kuò)充到對(duì)象中：

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 引用

對(duì)象是通過(guò)引用來(lái)傳遞的，所以它們永遠(yuǎn)不會(huì)被復(fù)制：

var x = stooge;
x.nickname = "Lucy";
console.log(stooge.nickname);//"Lucy"；x 與 stooge 指向同一個(gè)引用
var a = {}, b = {}, c = {};//a、b、c 引用一個(gè)不同的空對(duì)象
a = b = c = {};//a、b、c 引用同一個(gè)空對(duì)象

5 原型

每個(gè)對(duì)象都連接到一個(gè)原型對(duì)象，然后繼承原型對(duì)象的屬性。所有通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象都連接到 Object.prototype，它是標(biāo)配對(duì)象。

創(chuàng)建一個(gè)新對(duì)象時(shí)，可以指定某個(gè)對(duì)象作為它的原型。我們?yōu)?Object 新增一個(gè) create 方法，它會(huì)創(chuàng)建并返回一個(gè)使用原對(duì)象作為原型對(duì)象的新對(duì)象：

if (typeof Object.beget !== "function") {
  Object.create = function (o) {
    var F = function () {
    };
    F.prototype = o;
    return new F();
  }
}
var another_stooge = Object.create(stooge);

更新某個(gè)對(duì)象時(shí)，是不會(huì)更新原型對(duì)象的：

another_stooge["first-name"] = "Jack";
console.log(another_stooge["first-name"]);//"Jack"
console.log(stooge["first-name"]);//"lily"

只有在檢索的時(shí)候，才會(huì)用到原型對(duì)象。如果沒(méi)有在對(duì)象中檢索到某個(gè)屬性，那么 JavaScript 就會(huì)試著從原型對(duì)象中獲取屬性值，如果還是沒(méi)有找到，JavaScript 就會(huì)沿著原型鏈向上回溯，直到 Object。如果都不存在，就會(huì)返回 undefined。

原型關(guān)系是動(dòng)態(tài)的關(guān)系。如果我們新增一個(gè)屬性到原型鏈中，那么這個(gè)屬性就會(huì)立即對(duì)所有基于該原型所創(chuàng)建的對(duì)象可見(jiàn)：

stooge.profession = "actor";
console.log(another_stooge.profession);//"actor"

6 反射

typeof 操作符有助于確定屬性的類(lèi)型：

console.log(typeof flight.number);//number
console.log(typeof flight.status);//string
console.log(typeof flight.arrival);//object
console.log(typeof flight.manifest);//undefined

注意原型鏈中的任何屬性都會(huì)產(chǎn)生值：

console.log(typeof flight.toString);//function
console.log(typeof flight.constructor);//function

有兩種方法可以去除這些屬性：
①. 檢查并丟棄值為函數(shù)的屬性。
②. 使用 hasOwnProperty 方法，如果對(duì)象擁有獨(dú)有的屬性，它就會(huì)返回 true：

console.log(flight.hasOwnProperty("number"));//true
console.log(flight.hasOwnProperty("constructor"));//false

7 枚舉

for in 語(yǔ)句會(huì)遍歷一個(gè)對(duì)象中的所有屬性名，所以要過(guò)濾掉那些你不想要的屬性：

var name;
for (name in another_stooge) {
  if (typeof another_stooge[name] !== 'function') {//過(guò)濾掉函數(shù)
    document.writeln(name + ': ' + another_stooge[name] + "; ");
  }
}

屬性名出現(xiàn)的順序是不確定的。如果要讓屬性以特定的順序出現(xiàn)，就要?jiǎng)?chuàng)建一個(gè)包含特定屬性名的數(shù)組：

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 運(yùn)算符會(huì)刪除對(duì)象的屬性，但它不會(huì)涉及原型鏈中的任何對(duì)象。

刪除對(duì)象的屬性可能會(huì)讓來(lái)自原型鏈的屬性呈現(xiàn)出來(lái)：

another_stooge.nickname = "Jack";
console.log(another_stooge.nickname);//Jack
delete another_stooge.nickname;
console.log(another_stooge.nickname);//Lucy

9 減少全局變量的污染

全局變量削弱了程序的靈活性，所以要避免使用。

只創(chuàng)建一個(gè)唯一的全局變量：

var MYAPP = {};

這個(gè)變量就變成我們應(yīng)用的容器：

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"
  }
};

要把全局性的資源都納入一個(gè)命名空間下，這樣我們的程序與其他類(lèi)庫(kù)發(fā)生沖突的可能性會(huì)顯著降低，而且程序也變得更易閱讀。

感興趣的朋友還可以使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: