Cara Mencari Elemen dalam Tatasusunan Menggunakan JavaScript: Panduan Komprehensif dengan Contoh DOM

Mencari elemen dalam tatasusunan ialah tugas biasa dalam pengaturcaraan JavaScript. ? Sama ada anda menyemak sama ada item wujud, mendapatkan semula indeksnya atau menapis senarai, JavaScript menyediakan beberapa kaedah untuk berfungsi dengan tatasusunan. ? Panduan ini akan merangkumi pelbagai pendekatan untuk mencari elemen dalam tatasusunan dan menunjukkan cara menggunakan kaedah ini dalam kombinasi dengan DOM untuk mencipta aplikasi web interaktif. ?✨

Jadual Kandungan

1 Pengenalan kepada Tatasusunan JavaScript
2 Kaedah Asas Mencari Elemen
|- Menggunakan indexOf()
|- Menggunakan find()
|- Menggunakan findIndex()

3 Kaedah Lanjutan untuk Mencari Elemen
|- Menggunakan termasuk()
|- Menggunakan penapis()

4 Contoh Mudah Menggunakan DOM
5 Kesimpulan

Pengenalan kepada Tatasusunan JavaScript

Tatasusunan JavaScript ialah struktur data serba boleh yang membolehkan anda menyimpan berbilang nilai dalam satu pembolehubah. Tatasusunan boleh menyimpan elemen pelbagai jenis data, termasuk rentetan, nombor, objek dan juga tatasusunan lain. Berikut ialah contoh:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

Tatasusunan di atas mengandungi empat elemen. Dalam bahagian berikut, kami akan meneroka kaedah yang berbeza untuk mencari elemen dalam tatasusunan sedemikian.

Kaedah Asas untuk Mencari Unsur

JavaScript menawarkan beberapa kaedah terbina dalam untuk mencari elemen dalam tatasusunan. Di bawah adalah beberapa kaedah yang biasa digunakan:

Menggunakan indexOf()
Kaedah indexOf() mengembalikan indeks kejadian pertama elemen tertentu, atau -1 jika ia tidak ditemui.

Sintaks:

array.indexOf(searchElement, fromIndex);

Contoh

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let position = fruits.indexOf('Mango');
console.log(position); // Output: 2

Dalam contoh ini, 'Mangga' terletak di indeks 2.

Menggunakan find()
Kaedah find() mengembalikan elemen pertama yang memenuhi syarat tertentu, atau tidak ditentukan jika tiada yang sepadan.

Sintaks:

array.find(function(element, index, array) { /* ... */ });

Contoh

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(element => element > 10);
console.log(found); // Output: 12

Di sini, nombor pertama yang lebih besar daripada 10 ialah 12.

Menggunakan findIndex()
Kaedah findIndex() adalah serupa dengan find(), tetapi ia mengembalikan indeks elemen pertama yang memenuhi syarat.

Sintaks:

array.findIndex(function(element, index, array) { /* ... */ });

Contoh:

let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(element => element > 10);
console.log(index); // Output: 1

Dalam kes ini, indeks unsur pertama yang lebih besar daripada 10 ialah 1.

Kaedah Lanjutan untuk Mencari Elemen

Penggunaan termasuk()
Kaedah includes() menyemak sama ada tatasusunan mengandungi elemen tertentu, mengembalikan benar atau palsu.

Sintaks:

array.includes(searchElement, fromIndex);

Contoh:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let hasBanana = fruits.includes('Banana');
console.log(hasBanana); // Output: true

Menggunakan penapis()
Kaedah penapis() mengembalikan tatasusunan baharu dengan elemen yang memenuhi syarat yang ditentukan.

Sintaks:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

Contoh:

array.indexOf(searchElement, fromIndex);

Contoh Mudah Menggunakan DOM

Untuk menjadikan konsep ini lebih praktikal, mari buat aplikasi web ringkas yang menggunakan kaedah tatasusunan di atas dan memaparkan hasilnya secara dinamik pada halaman web.

Struktur HTML
Cipta fail HTML bernama index.html:

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let position = fruits.indexOf('Mango');
console.log(position); // Output: 2

HTML ini termasuk butang dan perenggan tempat keputusan akan dipaparkan.

Kod JavaScript (script.js)
Buat fail JavaScript bernama script.js dengan kod berikut:

array.find(function(element, index, array) { /* ... */ });

Penjelasan Kod

1. findCar(): Menggunakan indexOf() untuk mencari indeks 'Ford' dan mengemas kini kandungan result1 dengan sewajarnya.
2. findLongNameCar(): Menggunakan find() untuk mencari nama kereta dengan lebih daripada empat huruf dan memaparkan hasilnya dalam result2.
3. checkForAudi(): Uses includes() untuk menyemak sama ada 'Audi' berada dalam tatasusunan, memaparkan keputusan dalam result3.
4. filterCars(): Menggunakan filter() untuk mencari semua kereta bermula dengan 'B' dan hasil kemas kini.

Menjalankan Contoh
Buka fail index.html dalam pelayar web. Klik butang untuk melihat kaedah tatasusunan yang berbeza dalam tindakan dan lihat hasil yang dipaparkan secara dinamik.

Dengan menggabungkan kaedah tatasusunan JavaScript dengan manipulasi DOM, kami boleh mencipta halaman web interaktif yang bertindak balas kepada tindakan pengguna. ? Panduan ini merangkumi teknik pencarian tatasusunan asas dan lanjutan dan memberikan contoh praktikal tentang cara mengintegrasikan kaedah ini dengan DOM. ?? Gunakan teknik ini untuk meningkatkan kemahiran JavaScript anda dan membina aplikasi web yang lebih dinamik. ?✨

Selamat pengekodan! ?

Atas ialah kandungan terperinci Cara Mencari Elemen dalam Tatasusunan Menggunakan JavaScript: Panduan Komprehensif dengan Contoh DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!