掌握 JavaScript 物件指南

物件是 JavaScript 的基本組成部分，是儲存和管理資料的支柱。物件是屬性的集合，每個屬性都是鍵（或名稱）和值之間的關聯。了解如何建立、操作和利用物件對於任何 JavaScript 開發人員都至關重要。在本文中，我們將探索 JavaScript 中的各種物件函數，並提供詳細的解釋、範例和註釋來幫助您掌握它們。

JavaScript 中的物件簡介

在 JavaScript 中，物件用於儲存資料集合和更複雜的實體。它們是使用物件文字或物件建構函數建立的。

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

物件屬性

• Object.prototype：每個 JavaScript 物件都從其原型繼承屬性和方法。

let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

物件方法

1. 物件分配()

將所有可列舉自身屬性的值從一個或多個來源物件複製到目標物件。它傳回目標物件。

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. 物件.create()

使用指定的原型物件和屬性建立一個新物件。

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3.Object.defineProperties()

直接在物件上定義新屬性或修改現有屬性，並傳回該物件。

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4.Object.defineProperty()

直接在物件上定義新屬性或修改現有屬性並傳回物件。

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5.Object.entries()

傳回給定物件自己的可枚舉字串鍵控屬性 [key, value] 對的陣列。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. 物件.freeze()

凍結一個物件。凍結的物件無法再更改；凍結物件可以防止向其添加新屬性、刪除現有屬性，並防止更改現有屬性的值。

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7.Object.fromEntries()

將鍵值對列表轉換為物件。

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8.Object.getOwnPropertyDescriptor()

傳回給定物件的自有屬性（即直接存在於物件上而不是在物件原型鏈中的屬性描述符）。

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9.Object.getOwnPropertyDescriptors()

傳回一個包含物件所有自己的屬性描述符的物件。

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10.Object.getOwnPropertyNames()

傳回直接在給定物件上找到的所有屬性（包括不可枚舉屬性，使用 Symbol 的屬性除外）的陣列。

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11.Object.getOwnPropertySymbols()

傳回直接在給定物件上找到的所有符號屬性的陣列。

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12.Object.getPrototypeOf()

傳回指定物件的原型（即內部 [[Prototype]] 屬性的值）。

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. 對象.is()

判斷兩個數值是否相同。

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14.Object.isExtensible()

決定是否允許擴充物件。

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. 對象.isFrozen()

確定物件是否被凍結。

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. 對象.isSealed()

確定物件是否被密封。

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. 對象.keys()

傳回給定物件自己的可枚舉屬性名稱的數組，以與正常循環相同的順序進行迭代。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. 對象.preventExtensions()

防止物件的任何擴充。

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. 對象.seal()

密封一個對象，防止向其中添加新屬性並將所有現有屬性標記為不可配置。只要當前屬性可寫，它們的值仍然可以變更。

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. 物件.setPrototypeOf()

將指定物件的原型（即內部 [[Prototype]] 屬性）設為另一個物件或 null。

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. 對象.values()

傳回給定物件自己的可枚舉屬性值的數組，其順序與 for...in 迴圈提供的順序相同。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

實際例子

範例 1：克隆對象

使用 Object.assign() 複製物件。

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

範例 2：合併對象

使用 Object.assign() 合併物件。

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

以上是掌握 JavaScript 物件指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！