Panduan untuk Menguasai Objek JavaScript

Objek ialah bahagian asas JavaScript, berfungsi sebagai tulang belakang untuk menyimpan dan mengurus data. Objek ialah koleksi sifat, dan setiap sifat ialah perkaitan antara kunci (atau nama) dan nilai. Memahami cara membuat, memanipulasi dan menggunakan objek adalah penting untuk mana-mana pembangun JavaScript. Dalam artikel ini, kami akan meneroka pelbagai fungsi objek dalam JavaScript, memberikan penjelasan terperinci, contoh dan ulasan untuk membantu anda menguasainya.

Pengenalan kepada Objek dalam JavaScript

Dalam JavaScript, objek digunakan untuk menyimpan koleksi data dan entiti yang lebih kompleks. Ia dicipta menggunakan literal objek atau pembina Objek.

// 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";

Sifat Objek

• Object.prototype: Setiap objek JavaScript mewarisi sifat dan kaedah daripada prototaipnya.

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

Kaedah Objek

1. Object.assign()

Menyalin nilai semua sifat sendiri yang boleh dikira daripada satu atau lebih objek sumber kepada objek sasaran. Ia mengembalikan objek sasaran.

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. Object.create()

Mencipta objek baharu dengan objek dan sifat prototaip yang ditentukan.

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()

Mentakrifkan baharu atau mengubah suai sifat sedia ada secara langsung pada objek, mengembalikan objek.

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()

Mentakrifkan sifat baharu secara langsung pada objek atau mengubah suai sifat sedia ada dan mengembalikan objek itu.

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.entry()

Mengembalikan tatasusunan bagi pasangan sifat berkunci rentetan yang boleh dikira sendiri oleh objek yang diberikan [kunci, nilai].

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

6. Object.freeze()

Membekukan objek. Objek beku tidak boleh diubah lagi; membekukan objek menghalang sifat baharu daripada ditambahkan padanya, sifat sedia ada daripada dialih keluar dan menghalang nilai sifat sedia ada daripada ditukar.

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()

Menukar senarai pasangan nilai kunci kepada objek.

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

8. Object.getOwnPropertyDescriptor()

Mengembalikan deskriptor sifat untuk harta sendiri (iaitu, satu yang hadir secara langsung pada objek dan bukan dalam rantai prototaip objek) objek tertentu.

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()

Mengembalikan objek yang mengandungi semua deskriptor sifat sendiri bagi objek.

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()

Mengembalikan tatasusunan semua sifat (termasuk sifat tidak terhitung kecuali yang menggunakan Simbol) yang ditemui terus pada objek tertentu.

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

11. Object.getOwnPropertySymbols()

Mengembalikan tatasusunan semua sifat simbol yang ditemui terus pada objek tertentu.

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

12. Object.getPrototypeOf()

Mengembalikan prototaip (iaitu, nilai sifat [[Prototaip]] dalaman) objek yang ditentukan.

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

13. Object.is()

Menentukan sama ada dua nilai adalah nilai yang sama.

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

14. Object.isExtensible()

Menentukan sama ada memanjangkan objek dibenarkan.

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

15. Object.isFrozen()

Menentukan sama ada objek dibekukan.

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

16. Object.isSealed()

Menentukan sama ada objek dimeterai.

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

17. Object.keys()

Mengembalikan tatasusunan nama sifat terhitung objek tertentu, diulang dalam susunan yang sama seperti yang dilakukan oleh gelung biasa.

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

18. Object.preventExtensions()

Menghalang sebarang sambungan objek.

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

19. Object.seal()

Memeterai objek, menghalang sifat baharu daripada ditambahkan padanya dan menandakan semua sifat sedia ada sebagai tidak boleh dikonfigurasikan. Nilai sifat sekarang masih boleh diubah selagi ia boleh ditulis.

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. Object.setPrototypeOf()

Menetapkan prototaip (iaitu, sifat [[Prototaip]] dalaman) objek tertentu kepada objek lain atau nol.

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

21. Object.values()

Mengembalikan tatasusunan nilai sifat terhitung objek tertentu, dalam susunan yang sama seperti yang disediakan oleh gelung for...in.

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

Contoh Praktikal

Contoh 1: Mengklonkan Objek

Menggunakan Object.assign() untuk mengklon objek.

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

Contoh 2: Menggabungkan Objek

Menggunakan Object.assign() untuk menggabungkan objek.

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.

Atas ialah kandungan terperinci Panduan untuk Menguasai Objek JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!