Home-theater-designers
Els desenvolupadors web de tots els nivells d’habilitat, des de programadors novells fins a experts en codificació, veuen la importància de JavaScript en el desenvolupament de llocs web moderns. JavaScript és tan dominant que és una habilitat essencial per saber si crearà aplicacions web.
Un dels blocs de construcció més potents integrats al llenguatge JavaScript són les matrius. Les matrius es troben habitualment en molts llenguatges de programació i són útils per emmagatzemar dades.
JavaScript també inclou funcions útils conegudes com a mètodes de matriu. Aquí en teniu quinze que hauríeu de mirar de prop per fer créixer les vostres habilitats com a desenvolupador.
Què són els mètodes de matriu?
Mètodes de matriu són funcions integrades a JavaScript que podeu aplicar a les vostres matrius. Cada mètode té una funció única que realitza un canvi o un càlcul a la vostra matriu, cosa que us estalviarà la necessitat de codificar funcions comunes des de zero.
Els mètodes de matriu a JavaScript s’executen mitjançant una notació de punts adjunta a la vostra variable de matriu. Com que només són funcions JavaScript, sempre acaben amb parèntesis que pot contenir arguments opcionals. Aquí hi ha un mètode adjunt a una matriu simple anomenada myArray .
let myArray = [1,2,3]; myArray.pop();Aquest codi aplicaria un mètode anomenat pop a la matriu.
Exemple de matriu
Per a cada exemple, utilitzeu un exemple de matriu que anomenarem myArray , per realitzar els mètodes a. No dubteu a treure la consola i el codi.
let myArray = [2,4,5,7,9,12,14];Aquests exemples suposaran que coneixeu els fonaments de què és JavaScript i com funciona . Si no, està bé, estem tots aquí per aprendre i créixer.
Aprofiteu en aquests quinze poderosos mètodes de matriu.
1. Array.push ()
Què fa: push () agafa la vostra matriu i afegeix un o més elements al final de la matriu i, a continuació, retorna la nova longitud de la matriu. Aquest mètode modificarà la vostra matriu existent.
Afegiu el número 20 a la matriu executant push () , fent servir 20 com a argument.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Comproveu si ha funcionat:
console.log(myArray); [2,4,5,7,9,12,14,20]Executant el push () El mètode myArray va afegir el valor donat a l'argument a la matriu. En aquest cas, 20. Quan marqueu myArray a la consola, veureu que el valor s'afegeix al final de la matriu.
2. Array.concat ()
Què fa: concat () pot combinar dues o més matrius en una nova matriu. No modifica les matrius existents, però en crea una de nova.
Prengui myArray i combinar una matriu anomenada newArray dins de.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Aquest mètode fa meravelles quan es tracta de múltiples matrius o valors que heu de combinar, tot en un pas bastant senzill quan s'utilitzen variables.
3. Array.join ()
Què fa: unir-se () pren una matriu i concatena el contingut de la matriu, separats per una coma. El resultat es col·loca en una cadena. Podeu especificar un separador si voleu utilitzar una alternativa a una coma.
Feu una ullada a com funciona amb myArray. Primer utilitzeu el mètode per defecte sense argument separador, que utilitzarà una coma.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript generarà una cadena, amb cada valor de la matriu separat per una coma. Podeu utilitzar un argument a la funció per canviar el separador. Observeu-lo amb dos arguments: un sol espai i una cadena.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'El primer exemple és un espai, fent una cadena que es pot llegir fàcilment.
El segon exemple utilitza ('i') , i aquí hi ha dues coses a saber.
En primer lloc, fem servir la paraula 'i' per separar els valors. En segon lloc, hi ha un espai a banda i banda de la paraula 'i'. Aquesta és una cosa important que cal tenir en compte quan s’utilitza unir-se () . JavaScript llegeix els arguments literalment; per tant, si es deixa aquest espai, tot quedarà comprimit (és a dir, '2and4and5 ...' etc.) No és una sortida molt llegible.
4. Array.forEach ()
Què fa: per cadascú() (distingeix entre majúscules i minúscules!) realitza una funció a cada element de la vostra matriu. Aquesta funció és qualsevol funció que creeu, similar a l'ús d'un bucle 'per' per aplicar una funció a una matriu, però amb molt menys treball al codi.
Hi ha una mica més per fer per cadascú() ; mireu la sintaxi i, a continuació, realitzeu una funció senzilla per demostrar.
myArray.forEach(function(item){
//code
});
Estem utilitzant myArray , per cadascú() s'aplica amb la notació de punts. Col·loqueu la funció que voleu utilitzar dins del parèntesi de l’argument, que és funció (ítem) a l'exemple.
Mireu-ho funció (ítem) . Aquesta és la funció executada dins de forEach (), i té el seu propi argument. Anem a argumentar article . Hi ha dues coses a saber sobre aquest argument:
- Quan forEach () passa per la vostra matriu, aplica el codi a aquest argument. Penseu-ho com una variable temporal que conté l'element actual.
- Trieu el nom de l'argument, es pot anomenar qualsevol cosa que vulgueu. Normalment, s'anomenaria quelcom que facilita la seva comprensió, com ara 'element' o 'element'.
Tenint en compte aquestes dues coses, consulteu aquest exemple senzill. Afegiu 15 a cada valor i feu que la consola mostri el resultat.
myArray.forEach(function(item){
console.log(item + 15);
});
Estem utilitzant article en aquest exemple com a variable, la funció s'escriu per afegir 15 a cada valor mitjançant article . A continuació, la consola imprimeix els resultats. A continuació s’explica l’aspecte d’una consola de Google Chrome.
El resultat és cada número de la matriu, però amb 15 afegits.
5. Array.map ()
Què fa: mapa () realitza una funció a tots els elements de la vostra matriu i situa el resultat en una matriu nova.
Executar una funció a cada element sona com per a forEach (). La diferència aquí és mapa () crea una nova matriu quan s'executa. forEach () no crea una nova matriu automàticament, hauríeu de codificar una funció específica per fer-ho.
Utilitzeu map () per duplicar el valor de tots els elements de myArray i col·locar-los en una nova matriu. Veureu el mateix funció (ítem) sintaxi per practicar una mica més.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Consulteu els resultats a la consola.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray no ha canviat:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Què fa: similar a com funciona el mètode push (), el unshift () El mètode pren la vostra matriu i afegeix un o més elements a l'inici de la matriu en lloc del final i retorna la nova longitud de la matriu. Aquest mètode modificarà la vostra matriu existent.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);En registrar la matriu a la consola, hauríeu de veure el número 0 al començament de la matriu.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Què fa: classificar és una de les operacions més habituals realitzades en una matriu i és molt útil. JavaScript sort () El mètode array es pot utilitzar per ordenar una matriu de nombres o fins i tot cadenes amb només una línia de codi. Aquesta operació està al seu lloc i retorna la matriu ordenada modificant la matriu inicial. Agafeu un conjunt de números diferent per a myArray aquesta vegada.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Com que l'ordenació es fa al seu lloc, no cal que declareu cap variable separada per a la matriu ordenada.
console.log(myArray); [10, 12, 34, 55, 65]Per defecte, la matriu s'ordena en ordre ascendent, però opcionalment podeu passar una funció personalitzada al fitxer ordenar () mètode per ordenar la matriu de la manera desitjada. En aquest cas, he aprovat un costum funció de fletxa per ordenar la matriu numèricament en ordre ascendent.
8. Array.reverse ()
Què fa: com el seu nom indica, el revers () S’utilitza un mètode per invertir l’ordre dels elements de la matriu. Tingueu en compte que això no inverteix el contingut de la matriu, sinó només l'ordre en si. Aquí teniu un exemple per entendre millor aquest mètode:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Registreu la sortida a la consola per verificar el funcionament.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Com podeu veure, l'ordre dels elements s'ha invertit. Anteriorment, l'element de l'últim índex (element 14 de l'índex 6) ara és l'element de l'índex zero i així successivament.
9. Array.slice ()
Què fa: llesca () s'utilitza per recuperar una còpia superficial d'una porció d'una matriu. En termes més senzills, aquest mètode permet seleccionar elements específics d'una matriu pel seu índex. Podeu passar l'índex inicial de l'element del qual voleu recuperar i els elements i, opcionalment, també l'índex final.
Si no proporcioneu l'índex final, es recuperaran tots els elements des de l'índex inicial fins al final de la matriu. Aquest mètode retorna una nova matriu i no modifica l'actual.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);Al codi anterior, es recuperen tots els elements del segon índex a l'últim índex ja que no es passa el paràmetre de l'índex final. Registreu les dues matrius a la consola.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Evidentment, la matriu inicial no es modifica amb el mètode slice () i, en canvi, retorna una nova matriu que s’emmagatzema al fitxer slicedArray variable. A continuació, es mostra un exemple en què el paràmetre d’índex final també es passa al fitxer llesca () mètode.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice ()
Què fa: empalme () és un mètode útil de matriu utilitzat per eliminar o substituir elements de la matriu al seu lloc. En especificar l’índex i el nombre d’elements a suprimir, modifica la matriu.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);A l'exemple anterior, el fitxer myArray la matriu s’uneix a l’índex 2 i se n’eliminen 3 elements. Ara la matriu consisteix en:
[2, 4, 12, 14]Per substituir els elements en lloc de suprimir-los, podeu passar qualsevol paràmetre opcional amb els elements que vulgueu substituir, com ara:
com llançar de mac a roku
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter ()
Què fa: filter () mètode és un mètode de matriu útil que pren una funció que conté una prova i retorna una nova matriu amb tots els elements que passen aquesta prova. Fidel al seu nom, aquest mètode s’utilitza per filtrar els elements que necessiteu dels altres elements. La filtració es fa mitjançant una funció que retorna un valor booleà.
Aquí teniu un exemple de filter () mètode utilitzat per obtenir només aquells elements de la matriu que són divisibles per 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);A l'exemple anterior, es passa una funció de fletxa com a paràmetre que pren cada número de la matriu original i comprova si és divisible per 2 mitjançant el mòdul ( % ) i igualtat ( === ) operador. A continuació s’explica la sortida:
[2, 4, 12, 14]12. Array.reduce ()
Què fa: reduce () és un mètode de matriu que adopta una funció reductora i l'executa en cada element de matriu per generar un valor únic mentre torna. Pren una funció reductora amb una variable acumuladora i una variable d’element actual com a paràmetres necessaris. El valor de l’acumulador es recorda en totes les iteracions i, finalment, es torna després de la iteració final.
Un cas d'ús popular d'aquest mètode és calcular la suma de tots els elements de la matriu. La implementació d'aquesta funcionalitat és la següent:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 es passa com a segon paràmetre a l'exemple anterior, que s'utilitza com a valor inicial de la variable acumulador. El sumOfNums La variable contindrà el valor de retorn del fitxer reduce () mètode que s'espera que sigui la suma de tots els elements de la matriu.
console.log(sumOfNums); 5313. Array.includes ()
Què fa: buscar un element en una matriu per comprovar si està present és una operació que s’utilitza amb força freqüència i, per tant, JavaScript té un mètode incorporat per a això en forma de inclou () mètode de matriu. A continuació s’explica com es pot utilitzar:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Aquest mètode pren un paràmetre obligatori, l'element a cercar i un paràmetre opcional, l'índex de matriu des d'on començar la cerca. Segons si aquest element és present o no, tornarà cert o bé fals respectivament. Per tant, la sortida serà:
true
false
true
false14. Array.indexOf ()
Què fa: índex de() s'utilitza el mètode per esbrinar l'índex en què es pot trobar la primera ocurrència d'un element especificat a la matriu. Tot i que és similar al mètode include (), aquest mètode retorna l'índex numèric o -1 si l'element no està present a la matriu.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));índex de() El mètode utilitza una estricta igualtat per comprovar si hi ha un element, cosa que significa que el valor, així com el tipus de dades, haurien de ser el mateix. El segon paràmetre opcional pren l'índex per començar a cercar. Basant-se en aquests criteris, el resultat serà així:
1
-1
415. Array.fill ()
Què fa: sovint, és possible que hagueu d’establir tots els valors de la matriu a un valor estàtic com ara 0. En lloc d’utilitzar un bucle, podeu provar el omplir () mètode amb el mateix propòsit. Podeu trucar a aquest mètode a una matriu amb 1 paràmetre obligatori: el valor per omplir la matriu i 2 paràmetres opcionals: l’índex inicial i final a emplenar. Aquest mètode modifica la matriu que surt.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);En registrar la sortida a la consola, veureu:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Propers passos del vostre viatge de JavaScript
Les matrius són una part poderosa del llenguatge JavaScript, per això hi ha molts mètodes integrats per facilitar la vostra vida com a desenvolupador. La millor manera de dominar aquests quinze mètodes és practicar.
Mentre continueu aprenent JavaScript, MDN és un gran recurs per obtenir documentació detallada. Posa't còmode a la consola i, a continuació, augmenta les teves habilitats amb els millors editors de JavaScript per a programadors. Esteu a punt per crear el vostre lloc web amb JavaScript? Per què no mireu alguns marcs que podeu considerar.
Compartir Compartir Tweet Correu electrònic 6 marcs JavaScript que val la pena aprendreHi ha molts marcs JavaScript per ajudar-vos amb el desenvolupament. Aquí en teniu alguns que hauríeu de conèixer.
Llegiu a continuació Temes relacionats- Programació
- JavaScript
- Consells de codificació
Nitin és un àvid desenvolupador de programari i estudiant d’enginyeria informàtica que desenvolupa aplicacions web mitjançant tecnologies JavaScript. Treballa com a desenvolupador web independent i li agrada escriure per a Linux i Programació en el seu temps lliure.
Més de Nitin RanganathSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us