6.1 建立物件
物件 是JavaScript中主要的資料類型之一，被廣泛用於儲存和管理資料。 物件就是屬性的集合，每個屬性由鍵（名稱）和值組成。在這節課，我們將討論 如何建立物件以及如何訪問其屬性和方法。
1. 物件字面量
在JavaScript中，創建物件最常見的方法就是使用物件字面量。
在這個例子中，我們創建了一個包含四個屬性的物件 person：name、age、isStudent 和 greet。
let person = {
name: 'John',
age: 30,
isStudent: false,
greet: function() {
return 'Hello!';
}
};
2. Object構造函式
物件也可以使用 Object() 構造函式來創建。
這種方法與使用物件字面量創建物件是等效的，但語法上更冗長：
let person = new Object();
person.name = 'John';
person.age = 30;
person.isStudent = false;
person.greet = function() {
return 'Hello!';
};
3. 構造函式
構造函式允許創建具有相同屬性和方法的多個物件實例。
在這個例子中，構造函式 Person() 用於創建物件 john 和 jane，它們具有相同的屬性和方法：
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
this.greet = function() {
return 'Hello!';
};
}
let john = new Person('John', 30, false);
let jane = new Person('Jane', 25, true);
4. Object.create() 方法
Object.create() 方法創建一個具有指定原型和屬性的物件。
在這個例子中，物件 john 基於 personPrototype 原型創建：
let personPrototype = {
greet: function() {
return 'Hello!';
}
};
let john = Object.create(personPrototype);
john.name = 'John';
john.age = 30;
john.isStudent = false;
6.2 訪問屬性和方法
1. 通過點訪問
訪問物件屬性和方法最常見的方法是使用點：
let person = {
name: 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person.name); // 輸出: John
console.log(person.age); // 輸出: 30
console.log(person.greet()); // 輸出: Hello!
2. 通過方括號訪問
物件屬性也可以通過方括號來訪問。當屬性名稱存儲在變數中或者包含空格或特殊字符時，這種方法很有用：
let person = {
'first name': 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person['first name']); // 輸出: John
console.log(person['age']); // 輸出: 30
let propertyName = 'greet';
console.log(person[propertyName]()); // 輸出: Hello!
3. 修改和添加屬性
物件屬性可以隨時修改或添加：
let person = {
name: 'John',
age: 30
};
// 修改現有屬性
person.age = 31;
console.log(person.age); // 輸出: 31
// 添加新屬性
person.isStudent = false;
console.log(person.isStudent); // 輸出: false
4. 刪除屬性
物件屬性可以使用 delete 操作符刪除：
let person = {
name: 'John',
age: 30,
isStudent: false
};
delete person.isStudent;
console.log(person.isStudent); // 輸出: undefined
6.3 遍歷物件屬性
1. for...in 迴圈
for...in 迴圈允許遍歷物件的所有可枚舉屬性：
let person = {
name: 'John',
age: 30,
isStudent: false
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// 輸出:
// name: John
// age: 30
// isStudent: false
2. Object.keys() 方法
Object.keys() 方法返回物件的所有可枚舉屬性的鍵組成的陣列：
let person = {
name: 'John',
age: 30,
isStudent: false
};
let keys = Object.keys(person);
console.log(keys); // 輸出: ['name', 'age', 'isStudent']
3. Object.values() 方法
Object.values() 方法返回物件的所有可枚舉屬性的值組成的陣列：
let person = {
name: 'John',
age: 30,
isStudent: false
};
let values = Object.values(person);
console.log(values); // 輸出: ['John', 30, false]
4. Object.entries() 方法
Object.entries() 方法返回物件的所有可枚舉屬性的[鍵, 值]組成的陣列：
let person = {
name: 'John',
age: 30,
isStudent: false
};
let entries = Object.entries(person);
console.log(entries); // 輸出: [['name', 'John'], ['age', 30], ['isStudent', false]]
6.4 檢查屬性存在
1. in 操作符
in 操作符用於檢查物件中是否存在某屬性：
let person = {
name: 'John',
age: 30
};
console.log('name' in person); // 輸出: true
console.log('isStudent' in person); // 輸出: false
2. hasOwnProperty() 方法
hasOwnProperty() 方法檢查物件是否擁有指定的屬性（不是繼承而來的）：
let person = {
name: 'John',
age: 30
};
console.log(person.hasOwnProperty('name')); // 輸出: true
console.log(person.hasOwnProperty('isStudent')); // 輸出: false
GO TO FULL VERSION