Täielik juhend JavaScripti ja jQuery massiivi otsingumeetodite kohta

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Sissejuhatus

JavaScript on üks veebiarenduse kõige laialdasemalt kasutatavaid programmeerimiskeeli. Eriti mängivad selle massiivide manipuleerimise võimalused olulist rolli andmehalduse ja kasutajate suhtluse puhul.
Selles artiklis selgitame üksikasjalikult, kuidas otsida väärtusi JavaScripti massiivides. Alustades põhilistest otsingumeetoditest kuni keerukamate tehnikateni, pakub see juhend kasulikku teavet nii algajatele kui ka kesktaseme arendajatele.

Selle artikli eesmärk

Selle artikli lugemisega õpite järgmised punktid:

• Mõista peamiste JavaScripti meetodite erinevusi, mida kasutatakse massiivide otsimiseks.
• Õppida iga meetodi konkreetset kasutamist koodinäidete kaudu.
• Valida olukorrale sobivad meetodid.

Sihtgrupp

See artikkel on mõeldud:

• Algajatele, kes on just alustanud JavaScripti kasutamist.
• Kesktaseme kasutajatele, kes soovivad süvendada oma arusaama massiivide otsimisest ja andmetöötlusest.
• Veebiarendajatele, kes otsivad praktilisi koodinäiteid.

Teadmised ja oskused, mida omandate

• JavaScripti massiivide otsingumeetodite põhialused ja rakendused (indexOf(), includes(), find(), findIndex()).
• Kuidas kasutada jQuery inArray() meetodit ja selle piiranguid.
• Jõudluse võrdlused ja praktilised kasutusstsenaariumid.

Nende oskuste omandamisega suudate JavaScripti abil andmete manipuleerimist tõhusamalt teostada.

Järgmine artikkel

Järgnevas artiklis selgitame üksikasjalikult “JavaScripti põhilisi massiivi otsingumeetodeid”. Käsitleme iga meetodi omadusi ja kasutamist konkreetsete näidetega. Jälgige meid.
Kui teil on selle sisu kohta küsimusi või soovitusi, võtke julgelt ühendust.

2. JavaScripti põhilised massiivi otsingumeetodid

JavaScript pakub mitmeid meetodeid väärtuste otsimiseks massiivides. See jaotis selgitab, kuidas iga meetod töötab, kasutades lihtsasti mõistetavaid näiteid.

2-1. indexOf() meetod

Ülevaade
indexOf() meetod tagastab esimese indeksi, millel määratud väärtus massiivis esineb. Kui väärtust pole, tagastab see -1.

Põhisüntaks

array.indexOf(value, fromIndex)

• value : Otsitav väärtus.
• fromIndex : Valikuline. Otsingu alguspositsioon (vaikimisi 0).

Näide

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

Märkused

• indexOf() võrdleb väärtusi rangelt võrdsuse (===) alusel. Erinevat tüüpi väärtused ei kattu.
• Ei sobi objektide või massiivide omavaheliseks võrdlemiseks.

2-2. includes() meetod

Ülevaade
includes() meetod tagastab booli (true või false), mis näitab, kas määratud väärtus massiivis eksisteerib.

Põhisüntaks

array.includes(value, fromIndex)

Näide

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green'));  // Output: true
console.log(colors.includes('yellow')); // Output: false

Märkused

• includes() tutvustati ES6 (2015) versioonis, seega vanemad brauserid ei pruugi seda toetada.

2-3. find() meetod

Ülevaade
find() meetod tagastab esimese elemendi, mis vastab määratud tingimusele. Kui ühtegi elementi ei leita, tagastab see undefined.

Näide

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. findIndex() meetod

Ülevaade
findIndex() meetod tagastab esimese elemendi indeksi, mis vastab määratud tingimusele. Kui ühtegi elementi ei leita, tagastab see -1.

Näide

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

Kokkuvõte

See jaotis selgitas JavaScripti põhilisi massiivi otsingumeetodeid: indexOf(), includes(), find() ja findIndex().

Võrdluspunktid

• Lihtsate väärtuste otsimiseks kasutage indexOf() või includes().
• Tingimuslike otsingute puhul on kasulikud find() või findIndex().

3. Mis on jQuery inArray() meetod?

Kuigi JavaScript pakub sisseehitatud massiivi otsingu meetodeid, pakub jQuery omaenda meetodit inArray(). See jaotis selgitab selle omadusi, kasutamist ja piiranguid.

3-1. Miks kasutada jQuery’t?

jQuery on pikka aega kasutatud DOM-i manipuleerimise ja sündmuste käitlemise lihtsustamiseks. Seda kasutatakse endiselt:

• Pärandüsteemide hooldus
• Lihtsustatud koodi kirjutamine
• Ühilduvus vanemate brauseritega

3-2. Kuidas kasutada inArray()

Ülevaade
inArray() tagastab väärtuse indeksi massiivis. Kui väärtust ei leita, tagastab see -1.

Põhisüntaks

$.inArray(value, array, [fromIndex])

Näide

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. Võrdlus: inArray() vs. Natiivsed meetodid

Olulised punktid:

• Kasutage inArray() jQuery projektide järjepidevuse tagamiseks.
• Kasutage natiivseid meetodeid kaasaegsetes projektides.

3-4. Märkused

1. jQuery versiooni sõltuvus
inArray() töötab ainult jQuery keskkonnas.

2. Range võrdlus
See võrdleb väärtusi rangelt (===).

3. Jõudluse erinevused
Natiivsed meetodid on kiirem.

Kokkuvõte

See jaotis käsitles jQuery inArray() meetodit.
Olulised punktid:

• Mugav pärand- või jQuery‑põhistes süsteemides.
• Uues arenduses soovitatakse kasutada natiivseid meetodeid.

4. Võrdlev juhend massiivi otsingu meetodite valimiseks

JavaScript ja jQuery pakuvad mitmeid massiivi otsingu meetodeid, millest igaühel on oma omadused ja kasutusjuhtumid. See jaotis võrdleb peamisi meetodeid ja selgitab, kuidas valida õige meetod vastavalt olukorrale.

4-1. Iga meetodi omadused ja võrdlus

Allpool on võrdlustabel peamiste massiivi otsingu meetodite kohta.

4-2. Soovitatavad meetodid kasutusstsenaariumite järgi

1. Lihtne väärtuse otsing
Näide: Kontrollida, kas massiiv sisaldab konkreetset väärtust.

• Soovitatavad meetodid:
• indexOf() → Kui on vaja indeksinumbrit.
• includes() → Kui piisab lihtsast olemasolu kontrollist.

Näide:

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

2. Tingimuslik otsing
Näide: Otsida andmeid, mis vastavad kindlale tingimusele.

• Soovitatavad meetodid:
• find() → Tagastab esimese sobiva elemendi.
• findIndex() → Tagastab esimese sobiva elemendi indeksi.

Näide:

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

3. Pärandisüsteemi otsing
Näide: Andmete otsimine vanemates jQuery‑põhistes süsteemides.

• Soovitatav meetod:
• inArray() → Kasulik, kui on vaja jQuery’t.

Näide:

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1

4-3. Jõudluse võrdlus

1. Kui on vaja suurt kiirust:

• indexOf() ja includes() on kiired.

2. Tingimuslike otsingute puhul:

• find() ja findIndex() võimaldavad paindlikke tingimusi, kuid on veidi aeglasemad.

3. Kui kasutatakse jQuery’t:

• inArray() on lihtne, kuid aeglasem teekogu koormuse tõttu.

Kokkuvõte

See jaotis võrdles peamisi massiivi otsingu meetodeid ja selgitas nende soovitatavat kasutamist sõltuvalt stsenaariumist.
Olulised punktid:

• Kasutage indexOf() või includes() lihtsate otsingute jaoks.
• Kasutage find() või findIndex() tingimuslike otsingute jaoks.
• Kasutage inArray() pärandjQuery keskkondades.

Sobiva meetodi valimine sõltuvalt teie keskkonnast ja kasutusjuhtumist aitab luua tõhusat ja hooldatavat koodi.

5. Praktikalised näited ja rakendatud stsenaariumid

See jaotis selgitab, kuidas rakendada JavaScripti ja jQuery massiivi otsingumeetodeid reaalse maailma stsenaariumides. Praktiliste näidete kaudu süvendate oma koodi mõistmist.

5-1. Vormisisendi valideerimine

Stsenaarium: Kontrollige, kas kasutaja sisend eksisteerib eeldefineeritud nimekirjas. Lahendus: Kasutage includes() lihtsa olemasolu kontrolliks. Koodinäide:

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('Valid color.');
} else {
  console.log('Invalid color.');
}

5-2. Kasutajaandmete otsimine ja ekstraktimine

Stsenaarium: Otsige massiivi objektidest kasutajaandmeid, mis vastavad kindlatele tingimustele. Lahendus: Kasutage find() või findIndex(). Koodinäide:

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // Output: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // Output: 1

5-3. Veakäsitluse näide

Stsenaarium: Rakendage veakäsitlust, kui otsitav sihtmärk ei leitud. Lahendus: Kasutage indexOf() või findIndex(). Koodinäide:

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('Product not found.');
} else {
  console.log(`Product found at index ${index}.`);
}

5-4. Massiiviandmete filtreerimine

Stsenaarium: Ekstrakteerige ainult andmed, mis vastavad kindlatele tingimustele. Lahendus: Kasutage filter(). Koodinäide:

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // Output: [72, 88, 94]

5-5. jQuery otsingunäide

Stsenaarium: Kontrollige andmete olemasolu inArray() abil vanemas süsteemis. Lahendus: Kasutage jQuery inArray(). Koodinäide:

const fruits = ['apple', 'banana', 'orange'];

if ($.inArray('banana', fruits) !== -1) {
  console.log('Banana exists in the list.');
} else {
  console.log('Banana is not in the list.');
}

Kokkuvõte

See jaotis tutvustas praktilisi kasutamisnäiteid reaalse maailma stsenaariumide põhjal. Peamised punktid:

• includes() on lihtne ja kasulik sisendvalideerimiseks.
• find() ja findIndex() on võimsad tingimuslikuks ja objektipõhiseks otsinguks.
• indexOf() on mitmekülgne veakäsitluseks.
• filter() on tõhus mitme vaste elemendi ekstraktimiseks.
• inArray() aitab vanades jQuery keskkondades.

6. KKK (sageli esitatavad küsimused)

See jaotis vastab levinud küsimustele massiivi otsimise kohta JavaScriptis ja jQuerys.

Küsimus 1: Mis on indexOf() ja includes() vahe?

Vastus: Mõlemad meetodid kasutatakse elementide otsimiseks massiivis, kuid nende tagastatud väärtused ja kasutamine erinevad:

• indexOf() : Tagastab määratud väärtuse indeksi. Tagastab -1, kui väärtust ei leitud.
• includes() : Tagastab buuleva väärtuse ( true või false ), mis näitab, kas väärtus eksisteerib massiivis.

Näide:

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana'));   // Output: 1
console.log(fruits.includes('banana'));  // Output: true

Küsimus 2: Kuidas find() ja filter() erinevad?

Vastus: Mõlemad meetodid tagastavad elemendid, mis vastavad tingimusele, kuid nende funktsionaalsus erineb:

• find() : Tagastab esimese elemendi, mis vastab tingimusele.
• filter() : Tagastab kõik vastavad elemendid uue massiivina.

Näide:

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25));   // Output: 30
console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

Küsimus 3: Kuidas otsida kindlat võti-väärtuse paari massiivi objektide seest?

Vastus: Kasutage find() või findIndex() tingimusega. Näide:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // Output: { id: 2, name: 'Bob' }

Küsimus 4: Kas peaksin ikka kasutama jQuery inArray()?

Vastus:
jQuery inArray() on kasulik vanades keskkondades, kuid kaasaegne JavaScript pakub paremaid sisseehitatud meetodeid.
Soovitus:

• Uutele projektidele : Kasutage sisseehitatud meetodeid nagu indexOf() või includes().
• Olemasolevates jQuery süsteemides : Kasutage inArray() järjepidevuse säilitamiseks.

Küsimus 5: Kuidas optimeerida massiivi otsimist jõudluse huvides?

Vastus:
Suure andmemahu või sagedaste otsingute korral pidage meeles järgmisi punkte:
1. Valige kiired meetodid:

• indexOf() ja includes() on lihtsate otsingute puhul kõige kiiremad.

2. Kasutage vahemällu salvestamist:

• Salvestage otsingutulemused vahemällu, et vältida korduvat arvutamist.

3. Optimeerige andmestruktuure:

• Suure andmemahu korral kasutage objektide, Map või Set abil tõhusaid otsinguid.

Näide:

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // Output: true

Kokkuvõte

See sektsioon selgitas levinud küsimusi, mis on seotud massiivi otsimisega JavaScriptis ja jQuery-s.
Olulised punktid:

• Mõistke iga meetodi erinevusi ja valige sobivalt.
• find() on kasulik tingimuslike otsingute jaoks objektide massiivides.
• Kaasaegses arenduses eelistatakse sisseehitatud meetodeid; jQuery on peamiselt mõeldud vanematele süsteemidele.
• Optimeerige jõudlust, valides õige andmestruktuuri.

7. Kokkuvõte ja järgmised sammud

See artikkel pakkus üksikasjalikku selgitust massiivi otsingu meetodite kohta JavaScriptis ja jQuery-s. Vaatame üle olulised punktid ja arutame, kuidas saate jätkata nende kontseptsioonide õppimist ja rakendamist.

7-1. Oluliste punktide kokkuvõte

1. Põhilised massiivi otsingu meetodid

• indexOf() : Otsib elemendi indeksit.
• includes() : Tagastab tõeväärtuse, mis näitab, kas väärtus on olemas.
• find() / findIndex() : Otsib esimest elementi või indeksit, mis vastab tingimusele.

2. jQuery inArray() meetod

• Kasulik vanades või jQuery‑põhistes süsteemides.
• Kaasaegses arenduses soovitatakse sisseehitatud JavaScripti meetodeid.

3. Praktilised näited ja rakendusstsenaariumid

• Sisendi valideerimine, kasutajaandmete ekstraheerimine, veahaldus ja filtreerimine saab kõiki nende meetoditega lihtsustada.

4. Korduma kippuvad küsimused

• Selgitatud erinevusi, kasutusjuhtumeid ja jõudlusaspekte.

7-2. Kuidas valida õige meetod

Meetodi valik sõltub teie eesmärgist. Kasutage allolevat kiirlehte:

7-3. Järgmised sammud

1. Alusta väikest projekti

• Loo lihtne veebirakendus ja rakenda siin õpitud meetodeid.
  Näide: TODO nimekiri, tooteinventari haldamine, filtreerimisvahendid.

2. Õpi rohkem edasijõudnud JavaScripti

• ES6+ funktsioonid : laialdane süntaks, destruktureerimine, noolefunktsioonid.
• Asünkroonne programmeerimine : Õpi Promise, async/await andmete toomise haldamiseks.

3. Uuri raamistikke

• Raamistikud nagu React või Vue.js kasutavad massiivi operatsioone sageli UI renderdamiseks.

4. Soovitatavad ressursid

• MDN Web Docs : JavaScript massiivid
• W3Schools : JavaScript massiivi meetodid
• JSFiddle / CodePen : Kasulik koodinäidete testimiseks ja jagamiseks.

7-4. Lõppsõna

Selle juhendi kaudu õppisite massiivi otsingu põhitõdesid ja edasijõudnud rakendusi JavaScriptis ja jQuery-s.
Nõuanded lugejatele:

1. Harjutage õpitut, kirjutades ja testides koodi regulaarselt.
2. Jätkake uute JavaScripti funktsioonide ja tehnikate uurimist.
3. Valige oma konkreetsete vajaduste põhjal kõige sobivam meetod.

Kokkuvõte

See lõpetab “Täieliku juhendi JavaScripti ja jQuery massiivide otsingule.” Jätka õppimist ja oma programmeerimisoskuste laiendamist, et luua veel võimsamaid ja tõhusamaid rakendusi.