JavaScript 物件定義
定義 JavaScript 物件的幾種方法
- 使用物件字面量
- 使用
new關鍵字 - 使用物件建構函式
- 使用
Object.assign() - 使用
Object.create() - 使用
Object.fromEntries()
JavaScript 物件字面量
物件字面量是花括號 {} 中包含的 屬性名:值 列表。
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
注意
物件字面量 也稱為 物件初始化器。
建立 JavaScript 物件
示例
使用 {} 建立一個空的 JavaScript 物件，並新增 4 個屬性
// 建立一個物件
const person = {};
// 新增屬性
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
自己動手試一試 »
使用 new Object() 建立一個空的 JavaScript 物件，並新增 4 個屬性
// 建立一個物件
const person = new Object();
// 新增屬性
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
自己動手試一試 »
注意
上面的示例執行的操作完全相同。
但是，沒有必要使用 new Object()。
為了可讀性、簡潔性和執行速度，請使用 物件字面量 方法。
物件建構函式
有時我們需要建立許多相同型別的物件。
要建立物件型別，我們使用 物件建構函式。
通常建議建構函式名以大寫字母開頭。
物件型別 Person
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
自己動手 »現在我們可以使用 new Person() 來建立許多新的 Person 物件
示例
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
const mySister = new Person("Anna", "Rally", 18, "green");
const mySelf = new Person("Johnny", "Rally", 22, "green");
自己動手 »
屬性預設值
賦給屬性的值將成為建構函式建立的所有物件的預設值
示例
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
自己動手試一試 »
JavaScript 物件方法
JavaScript 物件方法可分為
- 通用方法
- 屬性管理方法
- 物件保護方法
通用方法
// 從源物件複製屬性到目標物件
Object.assign(target, source)
// 從現有物件建立物件
Object.create(object)
// 返回物件的鍵/值對陣列
Object.entries(object)
// 從鍵/值列表中建立物件
Object.fromEntries()
// 返回物件鍵的陣列
Object.keys(object)
// 返回物件屬性值的陣列
Object.values(object)
// 根據函式對物件元素進行分組
Object.groupBy(object, callback)
屬性管理方法
// 新增或更改物件屬性
Object.defineProperty(object, property, descriptor)
// 新增或更改物件屬性
Object.defineProperties(object, descriptors)
// 訪問屬性
Object.getOwnPropertyDescriptor(object, property)
// 訪問屬性
Object.getOwnPropertyDescriptors(object)
// 將所有屬性作為陣列返回
Object.getOwnPropertyNames(object)
// 訪問原型
Object.getPrototypeOf(object)
物件保護方法
// 防止重新賦值
const car = {type:"Fiat", model:"500", color:"white"};
// 防止新增物件屬性
Object.preventExtensions(object)
// 如果可以向物件新增屬性，則返回 true
Object.isExtensible(object)
// 防止新增和刪除物件屬性
Object.seal(object)
// 如果物件已密封，則返回 true
Object.isSealed(object)
// 阻止對物件進行任何更改
Object.freeze(object)
// 如果物件已凍結，則返回 true
Object.isFrozen(object)
使用 const
保護物件不被更改的最常用方法是使用 const 關鍵字。
使用 const 你不能重新分配物件，但你仍然可以更改屬性的值、刪除屬性或建立新屬性。
