Langkau ke kandungan
WANCODE
EN

Object: Mengumpulkan Data yang Berkaitan

16 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

  • Cipta object dan baca property dengan notasi titik dan kurungan
  • Bekerja dengan object bersarang dan array berisi object
  • Proses data dalam object dengan Object.keys dan Object.entries

Idea utama

Array menjawab "apakah item nombor 3?". Object pula menjawab "berapakah harga benda ini?" — ia menyimpan nilai di bawah nama (key), bukan kedudukan.

Seorang pelajar ada nama, umur dan bandar asal. Anda boleh simpan dalam tiga variable berasingan, tetapi data itu sebenarnya satu kumpulan. Object menggabungkannya menjadi satu nilai yang terdiri daripada pasangan key: value, yang dipanggil property.

JavaScript
const student = {
  name: "Aina",
  age: 17,
  subjects: ["Maths", "Biology"], // a value can be an array…
  address: {                      // …or another object
    city: "Kuching",
    state: "Sarawak",
  },
};

student.name;              // "Aina"
student.address.city;      // "Kuching" ← follow the dots inwards
student.subjects[0];       // "Maths"
student.email;             // undefined ← no such property

Titik atau kurungan?

Notasi titik — nama sudah tetap

JavaScript
student.age = 18;
student.school = "SMK Batu Lintang";

Kurungan — nama ialah string atau variable

JavaScript
const field = "age";
student[field];          // 18
student["home town"] = "Kuching";

Guna titik dalam kebanyakan masa. Guna kurungan apabila key disimpan dalam variable atau mengandungi ruang atau tanda sengkang.

Bug klasik

student.field mencari property yang betul-betul bernama "field". Jika nama itu berada dalam variable, anda perlukan student[field].

Array berisi object

Data sebenar biasanya ialah senarai benda yang setiap satunya ada beberapa property — produk, mesej, pelajar. Itulah array berisi object, dan map/filter daripada pelajaran lepas sangat sesuai digunakan padanya.

JavaScript
const menu = [
  { name: "Nasi Lemak", price: 6.5, spicy: true },
  { name: "Roti Canai", price: 2, spicy: false },
];

menu[1].price;                                  // 2
menu.map((dish) => dish.name);                  // ["Nasi Lemak", "Roti Canai"]
menu.filter((dish) => dish.price < 5);          // [{ name: "Roti Canai", … }]

Melihat isi sesuatu object

JavaScript
const scores = { Aina: 82, Ben: 67 };

Object.keys(scores);    // ["Aina", "Ben"]
Object.values(scores);  // [82, 67]
Object.entries(scores); // [["Aina", 82], ["Ben", 67]]

"Aina" in scores;       // true  — does this key exist?

// Each entry is a little [key, value] array:
Object.entries(scores).map((pair) => pair[0] + " got " + pair[1]);
// The same, unpacking the pair straight away:
Object.entries(scores).map(([name, score]) => name + " got " + score);

Method: function di dalam object

JavaScript
const cart = {
  items: ["teh tarik"],
  add(item) {
    this.items.push(item); // "this" = the object the method was called on
  },
};

cart.add("kuih");
cart.items; // ["teh tarik", "kuih"]

Anda sebenarnya sudah lama guna method: cart.items.push ialah method push milik array, dan console.log ialah method log milik object console.

Lengkapkan dua function dalam script.js:

1. describe(person) memulangkan ayat seperti "Aina (17) from Kuching", menggunakan name, age dan city di dalam address orang itu.

2. getField(obj, key) memulangkan nilai yang disimpan di bawah key, atau string "unknown" jika object itu tiada key tersebut. Hati-hati: nilai 0 tetap nilai yang sah.

Semakan

  • describe membina ayat daripada data bersarang
  • getField membaca apa-apa key dan mengendalikan key yang tiada

Uji kefahaman

Q1

const key = "price"; — baris mana yang membaca harga dish?

Q2

const shop = { owner: { name: "Pak Ali" } }; — apakah nilai shop.name?

Apa yang anda pelajari

  • Object menyimpan nilai di bawah nama: { key: value }. Nilai boleh jadi apa sahaja — termasuk array dan object lain.
  • Guna obj.key untuk nama tetap dan obj[variable] apabila key berada dalam variable atau ada ruang.
  • Array berisi object + map/filter ialah cara kebanyakan data aplikasi sebenar diuruskan.
  • Object.keys, Object.values dan Object.entries menukar object menjadi array yang boleh diproses.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3