一、對象屬性的遍歷方法

1. for...in 循環(huán)

for...in 循環(huán)用于遍歷對象的可枚舉屬性，包括對象自身的屬性和繼承自原型鏈上的屬性。

收起

const obj = {
    id: 1,
    name: 'zhangsan',
    age: 18
};

for (let key in obj) {
    console.log(key + '---' + obj[key]);
}

如果該屬性是可枚舉性的，那么這個屬性就能被 for...in 查找遍歷到。需要注意的是，它會包含原型上的屬性。

2. Object.keys() 和 Object.values()

• Object.keys(obj)：返回一個表示給定對象的所有可枚舉 自身屬性的鍵名組成的字符串?dāng)?shù)組。

• Object.values(obj)：返回一個表示給定對象的所有可枚舉 自身屬性的值組成的數(shù)組。

const obj = {
    id: 1,
    name: 'zhangsan',
    age: 18
};

console.log(Object.keys(obj));
console.log(Object.values(obj));

參數(shù) obj 是要返回其枚舉自身屬性的對象。

3. Object.getOwnPropertyNames(obj)

該方法返回一個數(shù)組，包含對象自身的所有屬性（包含不可枚舉屬性），但不會獲取繼承自原型鏈上的屬性。通過遍歷該數(shù)組可以獲取屬性的 key 和 value。

function Person() {
    this.name = '張三';
}
Person.prototype = {
    constructor: Person,
    job: "student"
};

var student1 = new Person();

Object.defineProperty(student1, 'age', {
    value: "33",
    enumerable: false  // 設(shè)置為**不可枚舉**屬性
});

Object.getOwnPropertyNames(student1).forEach(function (key) {
    console.log(key + '---' + student1[key]);  // 結(jié)果：name---張三   age---33
});

4. Object.entries()

Object.entries() 方法返回一個給定對象自身 可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致（區(qū)別在于 for-in 循環(huán)也枚舉繼承自原型鏈中的屬性）。

let per = {
    name: 'zdx',
    age: 18
};

for (let [key, value] of Object.entries(per)) {
    console.log(key, value);
}
// 輸出：
// name zdx
// age 18

5. Reflect.ownKeys()

Reflect.ownKeys(target) 方法返回所有的屬性 key，包括不可枚舉類型，但不包括繼承的屬性。

let obj = {
    name: 'zhangsan',
    age: '18'
};
console.log(Reflect.ownKeys(obj));

參數(shù) target 是獲取目標(biāo)對象的屬性，如果 target 不是對象則會報錯，返回值是由 target 自身屬性組成的數(shù)組。

二、對象屬性的描述

對象的每一個屬性都有一個描述對象，用來描述和控制該屬性的行為?？梢允褂?nbsp;Object.getOwnPropertyDescriptor 方法來獲取該描述對象，使用 Object.defineProperty 方法來設(shè)置。

let obj = { start: '123' };
console.log(Object.getOwnPropertyDescriptor(obj, 'start'));
// 輸出內(nèi)容：
// {
//     configurable: true,
//     enumerable: true,
//     value: "123",
//     writable: true
// }

Object.defineProperty(obj, "sex", {
    value: "female",
    enumerable: false
});

描述對象的四個屬性

• configurable：表示能否通過 delete 刪除此屬性，能否修改屬性的特性，或能否修改把屬性修改為訪問器屬性。如果直接使用字面量定義對象，默認(rèn)值為 true。
• enumerable：表示該屬性是否可枚舉，即是否能通過 for-in 循環(huán)或 Object.keys() 返回屬性。如果直接使用字面量定義對象，默認(rèn)值為 true。
• writable：表示能否修改屬性的值。如果直接使用字面量定義對象，默認(rèn)值為 true。
• value：該屬性對應(yīng)的值，默認(rèn)為 undefined。

與 enumerable 相關(guān)的操作

目前，有四個操作不包含 enumerable 為 false 的屬性：

• for…in 循環(huán)：只遍歷對象自身的和繼承的可枚舉的屬性。
• Object.keys()：返回對象自身的所有可枚舉的屬性的鍵名。
• JSON.stringify()：只串行化對象自身的可枚舉的屬性。
• Object.assign()：拷貝對象自身的可枚舉的屬性。

三、區(qū)分自身屬性和原型屬性

對象的屬性有自身屬性和繼承自原型的屬性之分，自身屬性是對象自己的屬性，繼承自原型的屬性是存在于原型鏈上的屬性?？梢允褂?nbsp;Object.prototype.hasOwnProperty() 判斷是自身屬性還是繼承自原型的屬性，而 in 操作符只可以判斷對象是否有某個屬性，不能判斷是自身的還是繼承自原型的。

綜上所述，掌握這些對象屬性的遍歷方法和屬性描述的知識，能夠幫助我們更好地操作和管理 JavaScript 對象。

以上就是JavaScript對象屬性遍歷與描述詳解的詳細內(nèi)容，更多關(guān)于JavaScript對象屬性的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論