Avastage JavaScripti massiivide vÔimsus! See pÔhjalik juhend kÀsitleb olulisi massiivimeetodeid tÔhusaks andmetöötluseks, parandades teie arendusoskusi ja koodi kvaliteeti.
Massiivimeetodid, mida iga arendaja peaks valdama
Massiivid on JavaScriptis fundamentaalsed andmestruktuurid ja massiivimeetodite valdamine on tĂ”husa ja elegantse koodi jaoks ĂŒlioluline. Need meetodid vĂ”imaldavad teil massiividesse salvestatud andmeid manipuleerida, teisendada ja analĂŒĂŒsida, sÀÀstes teie aega ja parandades koodi loetavust. See juhend uurib kĂ”ige olulisemaid massiivimeetodeid, mida iga arendaja peaks teadma, koos praktiliste nĂ€idete ja kasutusjuhtudega.
Miks massiivimeetodeid vallata?
- TĂ”husus: Massiivimeetodid pakuvad optimeeritud ja lĂŒhikesi viise levinud operatsioonide teostamiseks massiividega.
- Loetavus: Sisseehitatud meetodite kasutamine muudab teie koodi lihtsamini mÔistetavaks ja hooldatavaks.
- Funktsionaalne programmeerimine: Paljud massiivimeetodid edendavad funktsionaalset programmeerimisstiili, mis viib puhtama ja paremini testitava koodini.
- BrauseriteĂŒlene ĂŒhilduvus: JavaScripti massiivimeetodid on laialdaselt toetatud kĂ”igis kaasaegsetes brauserites.
Olulised massiivimeetodid
1. Massiivide lÀbimine: forEach()
Meetod forEach() kĂ€ivitab etteantud funktsiooni iga massiivi elemendi kohta ĂŒks kord. See on lihtne viis massiivi elementide lĂ€bimiseks ja nendega toimingute tegemiseks.
SĂŒntaks:
array.forEach(function(currentValue, index, array) {
// Kood, mis kÀivitatakse iga elemendi jaoks
});
NĂ€ide:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
console.log(number * 2);
});
// VĂ€ljund: 2, 4, 6, 8, 10
Kasutusjuht: Nimekirjas olevate elementide kuvamine, massiivi elementide omaduste uuendamine.
2. Massiivide teisendamine: map()
Meetod map() loob uue massiivi, mille vÀÀrtusteks on algse massiivi iga elemendi peal kĂ€ivitatud funktsiooni tulemused. See on suurepĂ€rane andmete teisendamiseks ĂŒhest vormingust teise.
SĂŒntaks:
const newArray = array.map(function(currentValue, index, array) {
// Tagasta teisendatud vÀÀrtus
});
NĂ€ide:
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers);
// VĂ€ljund: [1, 4, 9, 16, 25]
Kasutusjuht: Andmete vormindamine kuvamiseks, ĂŒhikute teisendamine, uue massiivi loomine muudetud vÀÀrtustega.
Ăldine nĂ€ide: Kujutage ette, et teil on massiiv valuutavÀÀrtustega USA dollarites ja peate need teisendama eurodeks. Saate kasutada meetodit map() koos vahetuskursi API-ga, et luua uus massiiv euro vÀÀrtustega.
3. Massiivide filtreerimine: filter()
Meetod filter() loob uue massiivi kÔikide elementidega, mis lÀbivad etteantud funktsiooniga rakendatud testi. See on ideaalne teatud elementide valimiseks massiivist tingimuse alusel.
SĂŒntaks:
const newArray = array.filter(function(currentValue, index, array) {
// Tagasta 'true' elemendi sÀilitamiseks, 'false' selle vÀlistamiseks
});
NĂ€ide:
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
// VĂ€ljund: [2, 4, 6]
Kasutusjuht: Soovimatute andmete eemaldamine, elementide valimine otsingukriteeriumide alusel, andmete filtreerimine kasutaja eelistuste pÔhjal.
Ăldine nĂ€ide: MĂ”elge kasutajaobjektide massiivile erinevatest riikidest. Saate kasutada meetodit filter(), et luua uus massiiv, mis sisaldab ainult teatud riigi kasutajaid, nĂ€iteks "Jaapan" vĂ”i "Brasiilia".
4. Massiivide redutseerimine: reduce()
Meetod reduce() kĂ€ivitab redutseerimisfunktsiooni (mille te ise pakute) igal massiivi elemendil, tulemuseks on ĂŒksainus vĂ€ljundvÀÀrtus. See on vĂ”imas arvutuste ja koondamiste tegemiseks massiivi andmetel.
SĂŒntaks:
const result = array.reduce(function(accumulator, currentValue, currentIndex, array) {
// Tagasta uuendatud akumulaator
}, initialValue);
NĂ€ide:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
// VĂ€ljund: 15
Kasutusjuht: Summade, keskmiste arvutamine, maksimum- vĂ”i miinimumvÀÀrtuste leidmine, stringide ĂŒhendamine.
Ăldine nĂ€ide: Oletame, et teil on massiiv mĂŒĂŒginumbritest erinevatest piirkondadest (nt PĂ”hja-Ameerika, Euroopa, Aasia). Saate kasutada meetodit reduce(), et arvutada kogu maailma mĂŒĂŒgitulu.
5. Massiividest otsimine: find(), findIndex(), includes(), indexOf(), lastIndexOf()
JavaScript pakub massiividest otsimiseks mitmeid meetodeid:
find(): Tagastab esimese elemendi vÀÀrtuse massiivist, mis vastab etteantud testimisfunktsioonile. Tagastabundefined, kui ĂŒkski element ei vasta funktsioonile.findIndex(): Tagastab esimese elemendi indeksi massiivist, mis vastab etteantud testimisfunktsioonile. Tagastab-1, kui ĂŒkski element ei vasta funktsioonile.includes(): MÀÀrab, kas massiiv sisaldab teatud vÀÀrtust oma kirjete hulgas, tagastadestruevĂ”ifalse.indexOf(): Tagastab esimese indeksi, kust antud element massiivist leitakse, vĂ”i-1, kui seda ei leidu.lastIndexOf(): Tagastab viimase indeksi, kust antud element massiivist leitakse, vĂ”i-1, kui seda ei leidu.
NĂ€ited:
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(number => number > 3);
console.log(foundNumber); // VĂ€ljund: 4
const foundIndex = numbers.findIndex(number => number > 3);
console.log(foundIndex); // VĂ€ljund: 3
const includesThree = numbers.includes(3);
console.log(includesThree); // VĂ€ljund: true
const indexOfTwo = numbers.indexOf(2);
console.log(indexOfTwo); // VĂ€ljund: 1
const lastIndexOfFour = [1, 2, 3, 4, 4, 5].lastIndexOf(4);
console.log(lastIndexOfFour); // VĂ€ljund: 4
Kasutusjuhud: Konkreetse kasutaja leidmine nimekirjast, kontrollimine, kas toode on ostukorvis, elemendi asukoha leidmine massiivis.
6. Elementide lisamine ja eemaldamine: push(), pop(), shift(), unshift(), splice()
Need meetodid muudavad algset massiivi, lisades vÔi eemaldades elemente:
push(): Lisab ĂŒhe vĂ”i mitu elementi massiivi lĂ”ppu ja tagastab massiivi uue pikkuse.pop(): Eemaldab massiivi viimase elemendi ja tagastab selle elemendi.shift(): Eemaldab massiivi esimese elemendi ja tagastab selle elemendi.unshift(): Lisab ĂŒhe vĂ”i mitu elementi massiivi algusesse ja tagastab massiivi uue pikkuse.splice(): Muudab massiivi sisu, eemaldades vĂ”i asendades olemasolevaid elemente ja/vĂ”i lisades uusi elemente kohapeal.
NĂ€ited:
const numbers = [1, 2, 3];
numbers.push(4, 5); // Lisab 4 ja 5 lÔppu
console.log(numbers); // VĂ€ljund: [1, 2, 3, 4, 5]
const lastElement = numbers.pop(); // Eemaldab viimase elemendi (5)
console.log(numbers); // VĂ€ljund: [1, 2, 3, 4]
console.log(lastElement); // VĂ€ljund: 5
const firstElement = numbers.shift(); // Eemaldab esimese elemendi (1)
console.log(numbers); // VĂ€ljund: [2, 3, 4]
console.log(firstElement); // VĂ€ljund: 1
numbers.unshift(0); // Lisab 0 algusesse
console.log(numbers); // VĂ€ljund: [0, 2, 3, 4]
numbers.splice(1, 2, 10, 20); // Eemaldab 2 elementi alates indeksist 1 ja lisab 10 ja 20
console.log(numbers); // VĂ€ljund: [0, 10, 20, 4]
Kasutusjuhud: JĂ€rjekorra haldamine, toodete lisamine ostukorvi, ĂŒlesannete nimekirja uuendamine.
7. Alamassiivide loomine: slice()
Meetod slice() tagastab massiivi osa pealiskaudse koopia uude massiiviobjekti, mis on valitud start kuni end (end ei ole kaasatud), kus start ja end tÀhistavad elementide indekseid selles massiivis. Algne massiiv ei muutu.
SĂŒntaks:
const newArray = array.slice(start, end);
NĂ€ide:
const numbers = [1, 2, 3, 4, 5];
const subarray = numbers.slice(1, 4);
console.log(subarray); // VĂ€ljund: [2, 3, 4]
console.log(numbers); // VĂ€ljund: [1, 2, 3, 4, 5] (algne massiiv on muutmata)
Kasutusjuht: Massiivi osa eraldamine töötlemiseks, massiivi koopia loomine.
8. Massiivide sorteerimine: sort()
Meetod sort() sorteerib massiivi elemendid kohapeal ja tagastab sorteeritud massiivi. Vaikimisi sorteerimisjĂ€rjekord on kasvav, mis pĂ”hineb elementide teisendamisel stringideks ja seejĂ€rel nende UTF-16 koodiĂŒhikute vÀÀrtuste jĂ€rjestuste vĂ”rdlemisel.
SĂŒntaks:
array.sort(compareFunction);
compareFunction on valikuline. Kui see on Ă€ra jĂ€etud, teisendatakse massiivi elemendid stringideks ja sorteeritakse vastavalt UTF-16 koodiĂŒhiku vÀÀrtusele. Kui soovite numbreid numbriliselt sorteerida, peate esitama vĂ”rdlusfunktsiooni.
NĂ€ited:
const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort(); // Sorteerib tÀhestikuliselt (kÀsitledes numbreid stringidena)
console.log(numbers); // VĂ€ljund: [1, 1, 2, 3, 4, 5, 6, 9]
numbers.sort((a, b) => a - b); // Sorteerib numbriliselt (kasvavas jÀrjekorras)
console.log(numbers); // VĂ€ljund: [1, 1, 2, 3, 4, 5, 6, 9]
numbers.sort((a, b) => b - a); // Sorteerib numbriliselt (kahanevas jÀrjekorras)
console.log(numbers); // VĂ€ljund: [9, 6, 5, 4, 3, 2, 1, 1]
Kasutusjuht: Toodete nimekirja sorteerimine hinna jĂ€rgi, kasutajate sorteerimine nime jĂ€rgi, ĂŒlesannete jĂ€rjestamine prioriteedi jĂ€rgi.
9. Massiivi elementide testimine: every(), some()
Need meetodid testivad, kas kÔik vÔi mÔned massiivi elemendid vastavad tingimusele:
every(): Testib, kas kĂ”ik massiivi elemendid lĂ€bivad etteantud funktsiooniga rakendatud testi. See tagastab Boole'i vÀÀrtuse.some(): Testib, kas vĂ€hemalt ĂŒks massiivi element lĂ€bib etteantud funktsiooniga rakendatud testi. See tagastabtrue, kui leiab massiivist elemendi, mille jaoks etteantud funktsioon tagastabtrue; vastasel juhul tagastabfalse. See ei muuda massiivi.
NĂ€ited:
const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven); // VĂ€ljund: true
const someOdd = numbers.some(number => number % 2 !== 0);
console.log(someOdd); // VĂ€ljund: false
Kasutusjuht: Vormiandmete valideerimine, kontrollimine, kas kÔik kasutajad on tingimustega nÔustunud, kindlaksmÀÀramine, kas mÔni toode ostukorvis on laost otsas.
10. Massiivi elementide ĂŒhendamine: join()
Meetod join() loob ja tagastab uue stringi, ĂŒhendades kĂ”ik massiivi (vĂ”i massiivilaadse objekti) elemendid, eraldades need komade vĂ”i mÀÀratud eraldusstringiga. Kui massiivil on ainult ĂŒks element, tagastatakse see element ilma eraldajat kasutamata.
SĂŒntaks:
const newString = array.join(separator);
NĂ€ide:
const words = ["Hello", "World", "!"];
const sentence = words.join(" ");
console.log(sentence); // VĂ€ljund: Hello World !
Kasutusjuht: Komadega eraldatud vÀÀrtuste loendi loomine, URL-i tee genereerimine segmentide massiivist.
Parimad praktikad
- MĂ”istke tagastusvÀÀrtust: Olge teadlik, mida iga meetod tagastab (uus massiiv, ĂŒksik vÀÀrtus, Boole'i vÀÀrtus jne).
- Muutumatus: Meetodid nagu
map(),filter()jaslice()loovad uusi massiive, sĂ€ilitades algsed andmed. Eelistage neid meetoditele, mis muudavad algset massiivi (push(),pop(),shift(),unshift(),splice(),sort()), kui vĂ”imalik, et vĂ€ltida ootamatuid kĂ”rvalmĂ”jusid. - Aheldamine: Kombineerige mitu massiivimeetodit, et teostada keerulisi operatsioone lĂŒhidalt ja loetavalt. NĂ€iteks:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const result = numbers .filter(number => number % 2 === 0) // Filtreeri paarisarvud .map(number => number * 2); // Korruta 2-ga console.log(result); // VĂ€ljund: [4, 8, 12, 16, 20] - JĂ”udlus: Kuigi massiivimeetodid on ĂŒldiselt tĂ”husad, arvestage jĂ”udluse mĂ”judega vĂ€ga suurte massiividega töötamisel. MĂ”nel juhul vĂ”ib traditsiooniline
for-tsĂŒkkel olla kiirem. - Loetavus: Valige meetod, mis vĂ€ljendab kĂ”ige paremini teie kavatsust. NĂ€iteks kasutage
forEach()lihtsaks iteratsiooniks,map()teisendamiseks jafilter()valimiseks.
KokkuvÔte
JavaScripti massiivimeetodite valdamine on iga veebiarendaja jaoks hÀdavajalik. Need pakuvad vÔimsaid ja tÔhusaid tööriistu andmete manipuleerimiseks ja teisendamiseks, mis viib puhtama, loetavama ja hooldatavama koodini. MÔistes ja rakendades neid meetodeid tÔhusalt, saate oma arendusoskusi oluliselt parandada ja luua robustseid rakendusi.
Harjutage nende meetodite kasutamist erinevates stsenaariumides, et oma arusaamist kinnistada ja nende tÀielik potentsiaal avada. Head kodeerimist!