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. 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

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

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() 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]

• 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!