Rumah > hujung hadapan web > tutorial js > Menguasai Objek dalam JavaScript

Menguasai Objek dalam JavaScript

Susan Sarandon
Lepaskan: 2024-12-25 09:11:56
asal
621 orang telah melayarinya

Mastering Objects in JavaScript

Objek dalam JavaScript

Dalam JavaScript, objek ialah koleksi pasangan nilai kunci yang mana nilai boleh menjadi data (sifat) atau fungsi (kaedah). Objek adalah asas kepada JavaScript, kerana hampir semua perkara dalam JavaScript ialah objek, termasuk tatasusunan, fungsi dan juga objek lain.


1. Mencipta Objek

A. Objek Literal

Cara paling mudah untuk mencipta objek ialah menggunakan pendakap kerinting {}.

Contoh:

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

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!
Salin selepas log masuk
Salin selepas log masuk

B. Pembina Objek

Menggunakan pembina Objek mencipta objek kosong.

Contoh:

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!
Salin selepas log masuk
Salin selepas log masuk

C. Menggunakan Object.create()

Kaedah ini mencipta objek baharu dengan prototaip yang ditentukan.

Contoh:

const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!
Salin selepas log masuk
Salin selepas log masuk

2. Mengakses Sifat Objek

A. Notasi Titik

Akses sifat menggunakan titik (.).

Contoh:

console.log(person.name); // Output: Alice
Salin selepas log masuk
Salin selepas log masuk

B. Notasi Kurungan

Akses sifat menggunakan kurungan segi empat sama ([]). Berguna untuk nama harta dinamik.

Contoh:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25
Salin selepas log masuk
Salin selepas log masuk

3. Menambah, Mengubah Suai dan Memadamkan Sifat

  • Menambah:
person.country = "USA";
console.log(person.country); // Output: USA
Salin selepas log masuk
  • Mengubah suai:
person.age = 26;
console.log(person.age); // Output: 26
Salin selepas log masuk
  • Memadamkan:
delete person.age;
console.log(person.age); // Output: undefined
Salin selepas log masuk

4. Kaedah dalam Objek

Apabila fungsi ialah sifat objek, ia dipanggil kaedah.

Contoh:

const car = {
  brand: "Tesla",
  start: function () {
    console.log("Car started!");
  },
};

car.start(); // Output: Car started!
Salin selepas log masuk

5. Mengulang Lebih Sifat Objek

A. Menggunakan untuk...dalam

Lelaran pada semua sifat terhitung objek.

Contoh:

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
Salin selepas log masuk

B. Menggunakan Object.keys()

Mengembalikan tatasusunan kekunci objek.

Contoh:

Object.keys(person).forEach((key) => {
  console.log(`${key}: ${person[key]}`);
});
Salin selepas log masuk

C. Menggunakan Object.entry()

Mengembalikan tatasusunan pasangan [kunci, nilai].

Contoh:

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
Salin selepas log masuk

6. Kaedah Objek

JavaScript menyediakan beberapa kaedah terbina dalam untuk berfungsi dengan objek.

  • Object.assign(): Menyalin sifat dari satu objek ke objek lain.
const person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello!");
  },
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello!
Salin selepas log masuk
Salin selepas log masuk
  • Object.freeze(): Menghalang pengubahsuaian objek.
const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function () {
  console.log("Hi!");
};

console.log(person.name); // Output: Bob
person.greet(); // Output: Hi!
Salin selepas log masuk
Salin selepas log masuk
  • Object.seal(): Menghalang menambah atau mengalih keluar sifat tetapi membenarkan pengubahsuaian sifat sedia ada.
const prototype = { greet: function () { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // Output: Charlie
person.greet(); // Output: Hello!
Salin selepas log masuk
Salin selepas log masuk

7. Prototaip dan Warisan

Objek dalam JavaScript mempunyai prototaip, iaitu objek lain yang mewarisi sifat dan kaedah daripadanya.

Contoh:

console.log(person.name); // Output: Alice
Salin selepas log masuk
Salin selepas log masuk

8. Pemusnahan Objek

Menyahstruktur membolehkan mengekstrak sifat daripada objek kepada pembolehubah.

Contoh:

console.log(person["name"]); // Output: Alice
const key = "age";
console.log(person[key]); // Output: 25
Salin selepas log masuk
Salin selepas log masuk

9. Ringkasan

  • Objek ialah pasangan nilai kunci yang boleh menyimpan sifat dan kaedah.
  • Gunakan literal objek untuk penciptaan objek mudah.
  • Akses sifat objek menggunakan notasi titik atau kurungan.
  • Gunakan kaedah terbina dalam seperti Object.keys(), Object.assign(), dan Object.freeze() untuk manipulasi objek yang berkesan.
  • Menguasai objek adalah penting untuk memahami konsep JavaScript lanjutan seperti prototaip dan warisan.

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 dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan