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
});
            

              
                Copy
              
            
          

Näide:

            const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
  console.log(number * 2);
});
// Väljund: 2, 4, 6, 8, 10
            

              
                Copy
              
            
          

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
});
            

              
                Copy
              
            
          

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]
            

              
                Copy
              
            
          

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
});
            

              
                Copy
              
            
          

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]
            

              
                Copy
              
            
          

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);
            

              
                Copy
              
            
          

Näide:

            const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
// Väljund: 15
            

              
                Copy
              
            
          

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. Tagastab undefined, 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, tagastades true või false.
• 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

            

              
                Copy
              
            
          

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]
            

              
                Copy
              
            
          

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);
            

              
                Copy
              
            
          

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)
            

              
                Copy
              
            
          

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);
            

              
                Copy
              
            
          

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]
            

              
                Copy
              
            
          

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 tagastab true, kui leiab massiivist elemendi, mille jaoks etteantud funktsioon tagastab true; vastasel juhul tagastab false. 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
            

              
                Copy
              
            
          

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);
            

              
                Copy
              
            
          

Näide:

            const words = ["Hello", "World", "!"];
const sentence = words.join(" ");
console.log(sentence); // Väljund: Hello World !
            

              
                Copy
              
            
          

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() ja slice() 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]
              
  
                
                  Copy
                
              
            

• 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 ja filter() 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!