Menguasai Objek JavaScript: Tulang Belakang Pengaturcaraan Dinamik

Objek JavaScript: Panduan Komprehensif

Objek JavaScript ialah blok binaan asas dalam bahasa, menyediakan cara untuk mengumpulkan data dan fungsi berkaitan bersama-sama. Ia penting untuk bekerja dengan data berstruktur dan merupakan asas pengaturcaraan berorientasikan objek dalam JavaScript.

---

1. Apakah Objek dalam JavaScript?

Objek dalam JavaScript ialah koleksi sifat, di mana setiap sifat mempunyai kunci (atau nama) dan nilai. Nilai boleh terdiri daripada sebarang jenis data, termasuk objek atau fungsi lain.

Contoh:

const person = {
  name: "Alice",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  }
};

---

2. Mencipta Objek

a. Literal Objek

Cara paling biasa dan mudah untuk mencipta objek.

const car = {
  brand: "Tesla",
  model: "Model S",
  year: 2023
};

b. Menggunakan Object() baharu

Mencipta objek menggunakan pembina Objek.

const book = new Object();
book.title = "JavaScript: The Good Parts";
book.author = "Douglas Crockford";

c. Menggunakan Fungsi Pembina

Pembina tersuai untuk mencipta objek yang serupa.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const user = new Person("Bob", 25);

d. Menggunakan Kelas

Sintaks moden untuk penciptaan objek menggunakan kelas ES6.

class Animal {
  constructor(type, sound) {
    this.type = type;
    this.sound = sound;
  }
}
const dog = new Animal("Dog", "Bark");

---

3. Mengakses Sifat Objek

Anda boleh mengakses sifat menggunakan:

• Notasi Titik:

  console.log(person.name);

• Notasi Kurungan: Berguna untuk kekunci dinamik atau kekunci dengan aksara khas.

  console.log(person["name"]);

---

4. Menambah, Mengemas kini dan Memadamkan Sifat

• Tambah atau Kemas Kini:

  person.hobby = "Reading"; // Adding a new property
  person.age = 31; // Updating an existing property

• Padam:

  delete person.hobby;

---

5. Kaedah dalam Objek

Kaedah ialah fungsi yang dikaitkan dengan objek.

const person = {
  name: "Alice",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  }
};

---

6. Menyemak Hartanah

• dalam Operator:

const car = {
  brand: "Tesla",
  model: "Model S",
  year: 2023
};

• mempunyai Kaedah Harta Sendiri:

const book = new Object();
book.title = "JavaScript: The Good Parts";
book.author = "Douglas Crockford";

---

7. Mengulang Melalui Sifat Objek

• untuk...dalam Gelung: Berulang ke atas semua sifat terbilang.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const user = new Person("Bob", 25);

• Object.keys: Mengembalikan tatasusunan nama sifat.

class Animal {
  constructor(type, sound) {
    this.type = type;
    this.sound = sound;
  }
}
const dog = new Animal("Dog", "Bark");

• Object.values: Mengembalikan tatasusunan nilai sifat.

  console.log(person.name);

• Object.entry: Mengembalikan tatasusunan pasangan nilai kunci.

  console.log(person["name"]);

---

8. Objek Bersarang

Objek boleh mengandungi objek lain sebagai sifat.

  person.hobby = "Reading"; // Adding a new property
  person.age = 31; // Updating an existing property

---

9. Pemusnahan Objek

Ekstrak nilai daripada objek kepada pembolehubah.

  delete person.hobby;

---

10. Operator Hamparan dan Rehatkan dengan Objek

• Operator Spread:

const calculator = {
  add: function (a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b; // Shorthand syntax
  }
};
console.log(calculator.add(5, 3));

• Operator Rehat:

  console.log("name" in person); // true

---

11. Kaedah Objek (Statik)

JavaScript menyediakan banyak kaedah statik untuk objek.

a. Object.assign

Menyalin sifat daripada satu objek ke objek lain.

  console.log(person.hasOwnProperty("age")); // true

b. Object.freeze

Menghalang pengubahsuaian pada objek.

  for (let key in person) {
    console.log(key, person[key]);
  }

c. Object.seal

Membenarkan kemas kini tetapi menghalang penambahan atau pemadaman sifat.

  console.log(Object.keys(person));

d. Object.create

Mencipta objek baharu dengan prototaip yang ditentukan.

  console.log(Object.values(person));

---

12. Rujukan Objek dan Pengklonan

Objek disimpan dan dimanipulasi melalui rujukan, bukan nilai.

Klon Cetek:

  console.log(Object.entries(person));

Klon Dalam (menggunakan JSON.parse dan JSON.stringify):

const company = {
  name: "Tech Corp",
  address: {
    city: "San Francisco",
    zip: "94105"
  }
};
console.log(company.address.city); // Access nested object

---

13. Prototaip dan Warisan

Objek dalam JavaScript mempunyai prototaip, membenarkan pewarisan sifat dan kaedah.

const { name, age } = person;
console.log(name, age);

---

14. Kes Penggunaan Biasa untuk Objek

1. Menyimpan Pasangan Nilai Kunci: Objek sesuai untuk penyimpanan harta dinamik.

  const newPerson = { ...person, gender: "Female" };

1. Mewakili Entiti Dunia Nyata:
   
   Objek sering memodelkan struktur data, seperti pengguna atau produk.

2. Fungsi Pengumpulan:
   
   Objek boleh berfungsi sebagai modul atau ruang nama.
   

const person = {
  name: "Alice",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  }
};

---

15. Pertimbangan Prestasi

• Meminimumkan sarang dalam untuk prestasi yang lebih baik.
• Elakkan pembuatan objek yang kerap dalam kod kritikal prestasi.
• Gunakan Peta atau Set untuk data pasangan nilai kunci yang besar apabila prestasi adalah penting.

---

Kesimpulan

Objek JavaScript berkuasa dan fleksibel, membentuk tulang belakang kebanyakan aplikasi. Memahami ciri dan keupayaan mereka membolehkan pembangun menulis kod yang cekap, boleh diselenggara dan berskala. Penguasaan objek ialah langkah asas untuk menjadi mahir dalam JavaScript.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai Objek JavaScript: Tulang Belakang Pengaturcaraan Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!