JavaScript之物件篇

物件

是無序屬性的集合，其屬性可以包含基本值，物件，或者函式。可以將物件想象成雜湊表:鍵值對，其中值可以是資料或者函式。ECMAScript中的物件其實就是一組資料(屬性)和功能(方法)的集合。

題外話：睡了，明天再搞，中秋節快樂鴨！！！！！

物件是一個包含相關資料和方法的集合（通常由一些變數和函式組成，我們稱之為物件裡面的屬性和方法）

比如在現實生活中，每一個人都是一個物件。物件有它的屬性，如身高和體重，方法有走路或跑步等；所有人都有這些屬性，但是每個人的屬性都不盡相同，每個人都擁有這些方法，但是方法被執行的時間都不盡相同。

• 而在 JavaScript中，幾乎所有的事物都是物件。

以下程式碼為變數 person 設定值為 "張三" :

var person = "張三";

• 物件也是一個變數，但物件可以包含多個值（多個變數），每個值以 key:value鍵值對的方式 呈現。

var person = {
   //注意屬性和屬性之間用逗號隔開
    name:"張三", 
    height:1.71, 
    gender: 'male'
};

物件的建立

物件的初始化有兩種方式，建構函式模式和字面量模式

• 字面量模式

物件使用"{}"作為物件的邊界，物件是由多個屬性組成，屬性與屬性之間通過","隔開，屬性名與屬性值通過":"隔開;屬性名一般不新增引號（當屬性名中出現特殊字元的時候需要新增引號），屬性值如果是字串的一定新增引號

例如：

var obj = {
  name:"terry",
  age:12,
  sayName:function(){
    console.log("my name is ",this.name);
  }
}

• 建構函式模式

使用Object或者使用自定義建構函式來初始化物件

var obj = new Object();
  obj.name = "terry";
  obj.age = 12;
  //sayName是obj物件的一個方法，可以看作是obj的一個屬性
  obj.sayName = function(){
  console.log("my name is",this.name);
}
//等價於 <==>
var obj={};
  obj.name="terry";
  obj.age=12;

物件的訪問

• 屬性訪問

屬性訪問方式也有兩種，點訪問、中括號訪問

點後面直接跟的是物件的屬性，如果屬性存在可以訪問到，如果屬性不存在，得到undefined。 中括號中放的是變數，中括號可以將該變數進行解析。

例如

obj.name      //'terry'
obj['name']     //'terry'

name = "age"
obj['name']      //12

• 方法的訪問

方法的訪問主要是為了執行該物件中的方法，需要按照函式呼叫的方式去使用

例如

 var obj = {
     name: 'zhang',
     age: 13,
     sayName: function () {
          console.log(this.name);   //zhang
     }
}
obj.sayName();//zhang    //obj方法的使用

obj.sayName; //訪問的是obj物件的方法
console.log(obj.sayName); //[Function: sayName]

• 遍歷物件中的屬性

普通版的for迴圈可以遍歷陣列，但無法遍歷物件

增強版的for迴圈： for..in用於遍歷陣列或者物件的屬性

(題外話：之前同學區面試京東的前端實習，面試官有問到這個。。。。。)

for(自定義變數名 in 陣列/物件){
    執行程式碼
}
for(var key in obj){
    var value=obj[key];
}

用法示例：

// 增強版的for迴圈：
//迴圈物件屬性：
var obj = {
     name:"autumn",
     age:22,
     salary:10000
   };
// for..in用於遍歷陣列或者物件的屬性
for (var key in obj) {
     console.log(key + '-------' + obj[key]);
     //name-------autumn
     // age-------22
     // salary-------10000
}

新增刪除物件中的屬性

只能刪除物件的自有屬性

var obj = {
     name: 'zhang',
     age: 13,
     sayName: function () {
          console.log(this.name);   //zhang
     }
}
// 刪除物件中的屬性   只能刪除物件的自有屬性
delete obj.name;
console.log(obj);     //{ age: 13, sayName: [Function: sayName] }

delete obj.sayName     //從obj物件中刪除sayName屬性
console.log(obj);  //{ age: 13 }

新增屬性

obj.newpropname=”value”

var obj = {
     name: 'zhang',
     age: 13,
     sayName: function () {
          console.log(this.name);   //zhang
     }
}
// 新增物件中的屬性  
obj.gender = 'male'
console.log(obj);  
// {
//      name: 'zhang',
//      age: 13,
//      sayName: [Function: sayName],
//      gender: 'male'
//    }

Object顯式型別轉換(強制型別轉換)

• ECMAScript中可用的3種強制型別轉換如下：

Boolean(value)：把給定的值轉換成Boolean型

String(value)：把給定的值轉換成字串

Number(value)：把給定的值轉換成數字（可以是整數或浮點數）

* Object型別到Boolean型別

// 除了空引用(null)會轉換為false，其他都被轉換為true
var obj = {
  name: "briup",
  age: 13
};
// 使用Boolean包裝器進行轉換
console.log(Boolean(obj));   //true
console.log(Boolean(!obj));  //false
console.log(Boolean(null));  //false
console.log(Boolean(undefined));   //false
console.log(Boolean(111));  //true 
console.log(Boolean('')); //false
console.log(Boolean(0));  //false
console.log(Boolean(NaN));  //false
console.log(Boolean()); //false

• Object型別轉String型別

轉換規則：

​ 顯示轉換與隱式轉換規則類似，當要將物件轉換為String時，類似隱式轉換中的PreferredType為String

​ 1.先呼叫物件的toString方法

​ 2.判斷該方法的返回值是否為基礎資料型別（Number，String，Boolean，Undefined，Null）

​ 3.若返回值為基礎資料型別，則轉換規則按照相應資料型別的轉換規則對其進行轉換

​ 4.若返回值不為基礎資料型別，則在該返回值的基礎上繼續呼叫valueOf方法

​ 5.判斷valueOf的返回值是否為基礎資料型別

​ 6.判斷是否為基礎資料型別，若是基礎資料型別則進行操作3

​ 7.若仍舊不為基礎資料型別則報錯

//直接用toString()方法
var obj = {
     name: 'zhangsan',
     age: 12,
     // 可以重寫toString方法，進行我們想要的轉換
     toString:function(){
         return this.name+"<-->"+this.age;   //zhangsan<-->12
        
     }
   };
   //兩種輸出方式
   console.log(obj.toString(), typeof obj.toString());  //zhangsan<-->12 string
   console.log(String(obj), typeof String(obj));  // zhangsan<-->12 string

• Object型別轉Number型別

轉換規則：

​ 顯示轉換與隱式轉換規則類似，當要將物件轉換為Number時，類似隱式轉換中的PreferredType為Number

​ 1.先呼叫物件的valueOf方法

​ 2.判斷該方法的返回值是否為基礎資料型別（Number，String，Boolean，Undefined，Null）

​ 3.若返回值為基礎資料型別，則轉換規則按照相應資料型別的轉換規則對其進行轉換

​ 4.若返回值不為基礎資料型別，則在該返回值的基礎上繼續呼叫toString方法

​ 5.判斷toString的返回值是否為基礎資料型別

​ 6.判斷是否為基礎資料型別，若是基礎資料型別則進行操作3

​ 7.若仍舊不為基礎資料型別則報錯

// Object型別轉Number型別

var obj = {
     name: "briup",
     age: 12,

     //重寫toString方法和valueOf方法

     //兩個方法都重寫了 則呼叫valueOf()
     valueOf: function () {
          return 20;
     },
     toString: function () {
          return 100;
     },
};
/*
      1.如果只重寫了valueOf()或者toString()方法，則呼叫該方法，並將返回值用Number()轉換。
      2.如果兩個方法都重寫了，則呼叫valueOf()，並將返回值用Number()轉換。
      3.如果兩個方法都沒有重寫，則返回NaN
 */
//    先使用Number 進行轉換
//如果兩個方法都重寫了，則呼叫valueOf()，並將返回值用Number()轉換。
console.log(Number(obj));   //20

大家吃月餅沒得啊！！！！