3.10 物件(Object)

在 javascript/practice 資料夾下，建立 object.html 來練習。

物件觀念

一台車子，有「價錢」、「車門數」、「品牌」、「顏色」； 有功能性的包含「開車」、「剎車」、「停車」。

車子可視為物件，然後包含一些基本資訊及功能。用程式碼來表達的話，如下範例，大括號就是物件的意思，物件裡的資訊，有屬性(property)及屬性值(value)，一般我們會稱做 key/value 鍵值對，例：

var car = {
  price: 1000000,
  doors: 5,
  brand: "benz",
  color: "white",
  drive: function(){
    console.log("這是 drive");
  },
  brake: function(){
    console.log("這是 brake");
  },
  stop: function(){
    console.log("這是 stop");
  }
};

console.log(car);

物件內函式的另一個語法，以上述的 stop() 函式為例：

var car = {
  stop(){
    console.log("這是 stop");
  }
};

一個空的物件

以上述車子為例，當然我們也可以先設定一個變數是空的物件：

var car = {}; // car 變數是一個空的物件

其它屬性的部份，就是後面的程式碼來加上去。參考以下的物件相關操作。

物件相關操作(dot syntax)

建立屬性及值

var car = {};

car.price = 1000000;
car.doors = 5;
car.brand = "benz";
car.color = "white";

car.drive = function(){
  console.log("這是 drive");
};

console.log(car);

或 使用中括號的寫法：

var car = {};

car["price"] = 1000000;
car["doors"] = 5;
car["brand"] = "benz";
car["color"] = "white";

car["drive"] = function(){
  console.log("這是 drive");
};

console.log(car);

取值、執行函式

var car = {
  price: 1000000,
  doors: 5,
  brand: "benz",
  color: "white",
  drive: function(){
    console.log("這是 drive");
  },
  brake: function(){
    console.log("這是 brake");
  },
  stop: function(){
    console.log("這是 stop");
  }
};

console.log(car.price);    // 1000000
console.log(car["price"]); // 1000000

console.log(car.doors);    // 5
console.log(car["doors"]); // 5

console.log(car.drive()); // 這是 drive
console.log(car.stop());  // 這是 stop

更新值

var car = {
  price: 1000000
};

car.price = 2000000; // 更新
// car["price"] = 2000000; // 或這個寫法

console.log(car.price);

移除屬性

var car = {
  price: 1000000,
  doors: 5
};

delete car.price; // 移除屬性
// delete car["price"]; // 或這個寫法

console.log(car);

練習

欲表達書本資料，而資料有「書名」、「價格」、「作者」，寫一個物件，包含這三個資料，然後在 console 中印出來。