《你不知道的JavaScript》整理（三）——對象

一、語法

兩種形式定義：文字形式和構造形式。

//文字形式
var myObj = {
  key: value
};
//構造形式
var myObj = new Object();
myObj.key = value;

 

二、類型

對象是JavaScript的基礎。

1）基本類型

在JavaScript中一共有六種主要類型（術語是“語言類型”）：

string、number、boolean、null、undefined、object

 

2）內置對象

JavaScript中還有一些對象子類型，通常被稱為內置對象。

String、Number、Boolean、Object、Function、Array、Date、RegExp、Error

引擎可以將一些基礎類型自動轉換成相應的內置對象，然后就能調用對象的屬性或方法。

//將字符串轉換為String對象
var strPrimitive = "I am a string";
console.log( strPrimitive.length ); // 13
console.log( strPrimitive.charAt( 3 ) ); // "m"

//將數字轉換為Number對象
var num = 42.359.toFixed(2);
console.log(num);//42.36

 

三、內容

1）屬性

var myObject = {
 a: 2
}; 
myObject.a; // 2 屬性訪問
myObject["a"]; // 2 鍵訪問

.a語法通常被稱為“屬性訪問”，["a"]語法通常被稱為“鍵訪問”。

 

2）復制對象

對於JSON安全（也就是說可以被序列化為一個JSON字符串並且可以根據這個字符串解析出一個結構和值完全一樣的對象）的對象來說，有一種巧妙的復制方法：

var newObj = JSON.parse( JSON.stringify( someObj ) );

相比深復制，淺復制非常易懂並且問題要少得多，所以ES6定義了Object.assign(..)方法來實現淺復制。

3）屬性描述符

從ES5開始，所有的屬性都具備了屬性描述符。可通過方法Object.defineProperty()實現。

var myObject = {};

Object.defineProperty(myObject, "a", {
  value: 2,
  writable: true,
  configurable: true,
  enumerable: true

});

console.log(myObject.a); // 2

Vue.js就是通過這個方法來實現追蹤變化。

 

4）Getter和Setter

在ES5中可以使用getter和setter部分改寫默認操作，但是只能應用在單個屬性上，無法應用在整個對象上。

var myObject = {
  // 給 a 定義一個 getter 
  get a() {
    return 2;
  }
};

Object.defineProperty(
  myObject, // 目標對象
  "b", // 屬性名 
  { // 描述符
    // 給 b 設置一個 getter
    get: function() {
      return this.a * 2
    },
    // 確保 b 會出現在對象的屬性列表中
    enumerable: true
  }
);

console.log(myObject.a); // 2
console.log(myObject.b); // 4

 

5）存在性

in操作符會檢查屬性是否在對象及其[[Prototype]]原型鏈中。

hasOwnProperty(..)只會檢查屬性是否在myObject對象中，不會檢查[[Prototype]]鏈。

前面有一篇《JavaScript中typeof、toString、instanceof、constructor與in》做了些比較。

var myObject = {
  a: 2
};

("a" in myObject); // true
("b" in myObject); // false 

myObject.hasOwnProperty("a"); // true
myObject.hasOwnProperty("b"); // false

 

四、遍歷

和數組不同，普通的對象沒有內置的@@iterator，所以無法自動完成for..of遍歷。

但你可以給任何想遍歷的對象定義@@iterator。

var myObject = {
  a: 2,
  b: 3
};

Object.defineProperty(myObject, Symbol.iterator, {
  enumerable: false,
  writable: false,
  configurable: true,
  value: function() {
    var o = this;
    var idx = 0;
    var ks = Object.keys(o);
    return {
      next: function() {
        return {
          value: o[ks[idx++]],
          done: (idx > ks.length)
        };
      }
    };
  }
});

// 手動遍歷 myObject
var it = myObject[Symbol.iterator]();
it.next(); //{ value:2, done:false }
it.next(); //{ value:3, done:false }
it.next(); //{ value:undefined, done:true }

// 用 for..of 遍歷 myObject 
for (var v of myObject) {
  console.log(v);
}
// 2 
// 3