Meneroka Tatasusunan dan Objek dalam JavaScript

Hari 6: Meneroka Tatasusunan dan Objek dalam JavaScript

Tarikh: 13 Disember 2024

Selamat datang ke Hari ke-6 perjalanan JavaScript anda! Hari ini, kami menyelidiki dua struktur data penting dalam JavaScript: Array dan Objek. Struktur ini membentuk tulang belakang manipulasi data dalam pembangunan web moden. Dengan menguasai tatasusunan dan objek, anda akan membuka kunci cara yang berkuasa untuk menyimpan, mengakses dan mengubah data dengan cekap.

---

1. Apakah Tatasusunan?

tatasusunan ialah koleksi item (dipanggil elemen) yang disimpan di lokasi memori bersebelahan. Dalam JavaScript, tatasusunan adalah serba boleh dan boleh menyimpan jenis data bercampur.

Mencipta Tatasusunan

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

2. Memanipulasi Tatasusunan

Menambah dan Mengalih Keluar Elemen

• tekan: Tambahkan elemen pada penghujung.
• pop: Alih keluar elemen terakhir.
• nyah anjakan: Tambahkan elemen pada permulaan.
• shift: Alih keluar elemen pertama.

Contoh:

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

---

3. Kaedah Tatasusunan Biasa

peta: Mengubah setiap elemen dalam tatasusunan.

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

penapis: Menapis elemen berdasarkan keadaan.

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

kurangkan: Mengurangkan tatasusunan kepada satu nilai.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

---

4. Apakah Objek?

Sebuah objek ialah koleksi sifat, di mana setiap sifat adalah pasangan nilai kunci. Objek sesuai untuk mewakili entiti dunia sebenar dengan atribut.

Mencipta Objek

let person = {
  name: "Arjun",
  age: 22,
  isStudent: true,
};
console.log(person.name); // Output: Arjun
console.log(person["age"]); // Output: 22

---

5. Memanipulasi Objek

Menambah dan Mengemas kini Hartanah

let car = {
  brand: "Tesla",
};
car.model = "Model 3"; // Adding a new property
car.brand = "Ford";    // Updating a property
console.log(car); // Output: { brand: "Ford", model: "Model 3" }

Mengalih Keluar Hartanah

delete car.model;
console.log(car); // Output: { brand: "Ford" }

---

6. Kaedah Objek Biasa

Lelaran Pada Objek

• Object.keys: Mengembalikan tatasusunan kunci.
• Object.values: Mengembalikan tatasusunan nilai.
• Object.entry: Mengembalikan tatasusunan pasangan nilai kunci.

Contoh:

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

7. Tatasusunan lwn. Objek

Ciri Susun atur Objek

Feature	Arrays	Objects
Storage	Ordered collection of items.	Unordered collection of key-value pairs.
Access	Index-based (arr[0]).	Key-based (obj.key).
Best Use Case	List of related items.	Grouping attributes of an entity.

Storan Kumpulan item yang dipesan. Koleksi tidak tertib pasangan nilai kunci.

---

Akses

Berasaskan indeks (arr[0]). Berasaskan kunci (obj.key). Kes Penggunaan Terbaik Senarai item yang berkaitan. Mengumpulkan atribut entiti.

8. Contoh Dunia Nyata

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

Contoh 1: Senarai Tugasan Menggunakan Tatasusunan

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

Contoh 2: Mewakili Orang Menggunakan Objek

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

---

Contoh 3: Menggabungkan Tatasusunan dan Objek

• 9. Ambilan Utama
• Array
: Gunakan untuk koleksi yang dipesan; memanfaatkan kaedah seperti peta, penapis dan pengurangan untuk transformasi yang berkuasa.
• Objek
: Gunakan untuk data berstruktur dengan pasangan nilai kunci; kaedah induk seperti Object.keys dan Object.values.

---

Kuasa Gabungan: Campurkan tatasusunan dan objek untuk memodelkan dan memanipulasi data yang kompleks.

Amalan untuk Hari 6
Buat susunan filem kegemaran anda dan tambah/alih keluar item secara dinamik.

---

Buat objek untuk mewakili buku dengan sifat seperti tajuk, pengarang dan tahun. Tambah kaedah untuk log butiran buku.

Gunakan peta dan tapis pada susunan nombor untuk mendapatkan kuasa dua nombor genap.

Langkah Seterusnya

Dalam

Hari 7, kami akan menumpukan pada Acara dan DOM—membawakan interaktiviti pada aplikasi web anda. Jumpa anda esok!

Atas ialah kandungan terperinci Meneroka Tatasusunan dan Objek dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!