JavaScript 入門：物件 (Object )是什麼、要怎麼建立?

還記得我們在【JavaScript 入門：資料型別一次搞懂! Primitive 與 Object 的差異】這邊介紹過了，JavaScript 中除了七種原始型別外，剩下的都是物件嗎? 但是當時並沒有詳細解釋物件，今天就要來認識這個非常重要的資料型態「物件」!!

物件 (Object)

物件是一種複合資料型態的集合，物件裡儲存了多個屬性 (Property) 與方法 (Method)。屬性用來表示物件的特徵，而方法則是物件的行為，比如說人(物件)的身高、體重是屬性，而吃飯、睡覺就是方法。

在 JavaScript 中的寫法：

屬性是 key:value 的配對：
1. 屬性的 key 可以是任何字串，如果字串不是有效的 JS 識別字，可以用引號''標記起來。
2. 屬性的 value 可以是任何資料，包括原始型別、另一個物件、函式等。
方法可以是 key:value 的配對，在 ES6 之後也可以用縮寫表示：
1. 方法的 key 同樣是字串，與屬性的 key 相同規則。
2. 方法的 value 必須是函式，用來定義物件可以執行的行為。
3. 縮寫指的是不寫 key、冒號: 與 function 關鍵字，JS 引擎在解析時自動將函式名稱視為 key，這也是在現代的專案中較常看見的寫法。(傳統寫法與縮寫還是稍微有一點點不同的地方，在之後的 prototype 章節再說明!)

物件的建立方式

物件字面值 (Object Literal)

常用的建立方式有物件字面值，這個方法就是直接用大括號 {} 建立物件。

// 定義
const person ={
	name: "Elaine",
	age: 18,
	height: 173,
	weight: 50,
	// 方法的傳統寫法
	eat: function(){
    console.log("Eat");
  },
	// 方法的縮寫
	sayHi(){
		console.log("Hi");
	}
}

// 使用
console.log(person.name);   // Elaine
console.log(person["age"]); // 18
person.sayHi(); // Hi
person.eat();   // Eat

建構函式與 new 運算子

如果想要大量製造結構類似的物件，可以用建構函式 (constructor function) 與 new 關鍵字。

// 定義建構函式
function Person(name, age, height, weight){
  // 這邊的 this 指的是即將被 new 出來的物件
  this.name = name;
  this.age = age;
  this.height = height;
  this.weight = weight;
  this.sayHi = function(){
    console.log("Hi");
  }
}
// 使用 new 運算子建立 instance
const person1 = new Person("Elaine", 18, 173, 50);

用這種方法建立物件，需要注意兩件事情：new 運算子與 this.method。

當使用 new 運算子時，會發生幾件事：

建立空物件
將新物件的 [[Prototype]] 隱藏屬性指向建構函式的 prototype 屬性
(這段內容一樣會在 prototype 章節說明~)
將 this 綁定到這個物件
執行函式的內容
回傳物件

this.method 這種寫法會讓每一個 new 出來的 instance 都有一個新的 function，那能不能讓這些 instance 都共用方法? 當然是可以，就是將方法寫在 prototype 上(一樣細節在之後的 prototype 章節再說明!)

存取方式

從上面的範例應該可以了解，這邊就簡單總結一下物件屬性與方法的存取方式：

屬性
1. object.property：只能存取合法識別字的 key
2. object["property"]：可存取任意字串的 key，最厲害的地方在於可以動態存取

const key = "name";
console.log(person[key]);

方法
1. object.method()

物件字面值與建構函式+`new` 比較

適用場合
1. 物件字面值：建立單一、獨特物件
2. 建構函式 + new：量產結構相同的物件
this
1. 物件字面值：this 通常指向物件本身 (例如 person.sayHi() 中，this 就代表 person)
2. 建構函式 + new：指向即將用 new 關鍵字建立的 instance

物件的基本操作

以剛才的 person 物件為例：

const person ={
	name: "Elaine",
	age: 18,
	height: 173,
	weight: 50,
	sayHi(){
		console.log("Hi");
	},
	eat: function(){
    console.log("Eat");
  },
}

新增/ 修改屬性

使用 object.property = value 賦值，如果 key 不存在會直接新增，存在則是會直接覆蓋

// 新增
person.lang = "中文";

// 修改
person.age = 20;

刪除屬性

使用 delete 關鍵字，這個做法會移除整個屬性，不是只清空而已喔!!

delete person.weight;

檢查屬性是否存在

// 方法一： "property" in object
console.log("profession" in person); // false

// 方法二： object.hasOwnProperty("property")
console.log(person.hasOwnProperty("name")); //true

遍歷物件

遍歷物件有很多方式，可以只返回 key、value，或是兩者一起

// Object.keys 返回 key(array)
console.log(Object.keys(person));

// Object.values 返回 value(array)
console.log(Object.values(person));

// Object.entries 返回 [key, value] (成對 array)
console.log(Object.entries(person));

完整程式碼

const person ={
	name: "Elaine",
	age: 18,
	height: 173,
	weight: 50,
	sayHi(){
		console.log("Hi");
	},
	eat: function(){
    console.log("Eat");
  },
}

person.lang = "中文";
person.age = 20;
delete person.weight;
console.log("profession" in person); 
console.log(person.hasOwnProperty("name"));
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));

參考