JavaScript對象特性與實踐應用的方法

本文小編為大家詳細介紹“JavaScript對象特性與實踐應用的方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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 標識符，那么也可以使用 . 語法。優先使用 . 語法，因為它更緊湊，而且可讀性更好：

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

如果要檢索的屬性的值不存在，會返回 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 原型

每個對象都連接到一個原型對象，然后繼承原型對象的屬性。所有通過對象字面量創建的對象都連接到 Object.prototype，它是標配對象。

創建一個新對象時，可以指定某個對象作為它的原型。我們為 Object 新增一個 create 方法，它會創建并返回一個使用原對象作為原型對象的新對象：

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。

原型關系是動態的關系。如果我們新增一個屬性到原型鏈中，那么這個屬性就會立即對所有基于該原型所創建的對象可見：

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] + "; ");
  }
}

屬性名出現的順序是不確定的。如果要讓屬性以特定的順序出現，就要創建一個包含特定屬性名的數組：

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 減少全局變量的污染

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

只創建一個唯一的全局變量：

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

讀到這里，這篇“JavaScript對象特性與實踐應用的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。