Introducció En aquest article sobre JavaScript Array Methods Mutating vs Non Mutating expliquem de manera clara i pràctica la diferència entre mètodes que modifiquen l'array original i mètodes que retornen nous arrays o valors sense alterar l'original. Inclou exemples senzills per a cada mètode i recomanacions d'ús en projectes reals.
Mètodes que muten l'array Aquests mètodes canvien directament l'array original.
1 push() Afegeix un o diversos elements al final de l'array. Exemple arr = [1,2,3]; arr.push(4) Resultat [1,2,3,4]
2 pop() Elimina l'últim element de l'array. Exemple arr = [1,2,3]; arr.pop() Resultat [1,2]
3 shift() Elimina el primer element de l'array. Exemple arr = [1,2,3]; arr.shift() Resultat [2,3]
4 unshift() Afegeix un o diversos elements a l'inici de l'array. Exemple arr = [1,2,3]; arr.unshift(0) Resultat [0,1,2,3]
5 splice() Canvia l'array eliminant o reemplaçant elements i opcionalment inserint-ne de nous. Exemple arr = [10,5,6,4]; arr.splice(1,2,20,30) Resultat [10,20,30,4]
6 fill() Omple una zona de l'array amb un valor estàtic. Exemple arr = [25,30,35,40,45,50]; arr.fill(0,2,5) Resultat [25,30,0,0,0,50]
7 sort() Ordena els elements in place. Exemple arr = [30,10,1,20]; arr.sort() Resultat [1,10,20,30]
8 reverse() Inverteix l'ordre dels elements in place. Exemple arr = [1,2,3,4]; arr.reverse() Resultat [4,3,2,1]
9 copyWithin() Copia part de l'array a una altra posició dins del mateix array. Exemple arr = [1,2,3,4,5]; arr.copyWithin(0,2) Resultat [3,4,5,4,5]
Mètodes que no muten l'array Aquests mètodes retornen nous arrays o valors sense modificar l'array original, cosa que afavoreix la immutabilitat i redueix efectes secundaris.
1 slice() Retorna una porció de l'array. Exemple arr = [1,2,3,4,5]; arr.slice(1,4) Resultat [2,3,4]
2 concat() Combina arrays en un nou array. Exemple arr1 = [a,b]; arr2 = [c,d]; arr1.concat(arr2) Resultat [a,b,c,d]
3 indexOf() Retorna el primer índex d'un element o -1 si no existeix. Exemple arr = [1,2,3,4]; arr.indexOf(3) Resultat 2
4 lastIndexOf() Retorna l'últim índex d'un element. Exemple arr = [a,b,a]; arr.lastIndexOf(a) Resultat 2
5 includes() Comprova si un valor existeix a l'array. Exemple arr = [1,2,3]; arr.includes(2) Resultat true
6 find() Retorna el primer element que compleix una condició. Exemple nums = [10,25,30]; nums.find(n => n > 20) Resultat 25
7 findIndex() Retorna l'índex del primer element que compleix una condició. Exemple nums = [10,25,30]; nums.findIndex(n => n > 20) Resultat 1
8 filter() Retorna un nou array amb els elements que compleixen la condició. Exemple nums = [10,25,30]; nums.filter(n => n > 20) Resultat [25,30]
9 map() Transforma cada element i retorna un nou array. Exemple nums = [1,2,3]; nums.map(n => n * 2) Resultat [2,4,6]
10 reduce() Redueix l'array a un sol valor aplicant una funció acumuladora. Exemple nums = [1,2,3]; nums.reduce((t,n) => t + n,0) Resultat 6
11 reduceRight() Redueix des de la dreta cap a l'esquerra. Exemple nums = [1,2,3]; nums.reduceRight((t,n) => t + n,0) Resultat 6
12 some() Retorna true si almenys un element compleix la condició. Exemple nums = [1,2,3]; nums.some(n => n % 2 === 0) Resultat true
13 every() Retorna true si tots els elements compleixen la condició. Exemple nums = [2,4,6]; nums.every(n => n % 2 === 0) Resultat true
14 forEach() Executa una funció per a cada element sense retornar un nou array. Exemple nums = [1,2,3]; nums.forEach(n => console.log(n)) Resultat imprimeix 1 2 3
15 toSorted() Retorna una còpia ordenada sense mutar l'original. Exemple nums = [3,1,2]; nums.toSorted() Resultat [1,2,3]
16 toSpliced() Retorna un nou array amb l'operació splice aplicada sense mutar l'original. Exemple nums = [1,2,3]; nums.toSpliced(1,1) Resultat [1,3]
17 at() Retorna l'element a la posició indicada, accepta índexs negatius. Exemple nums = [10,20,30]; nums.at(1) Resultat 20
18 findLast() Retorna l'últim element que compleix la condició. Exemple nums = [10,25,30,25]; nums.findLast(n => n === 25) Resultat 25
19 findLastIndex() Retorna l'índex de l'últim element que compleix la condició. Exemple nums = [10,25,30,25]; nums.findLastIndex(n => n === 25) Resultat 3
20 join() Uneix els elements en una cadena amb un separador. Exemple arr = [Hello,World]; arr.join( ) Resultat Hello World
21 flat() Aplana arrays niats fins a la profunditat indicada. Exemple arr = [1,[2,[3]]]; arr.flat(2) Resultat [1,2,3]
22 flatMap() Aplica map i després aplana el resultat una profunditat. Exemple arr = [1,2,3]; arr.flatMap(x => [x,x*2]) Resultat [1,2,2,4,3,6]
23 toReversed() Retorna una còpia invertida sense mutar l'original. Exemple arr = [1,2,3]; arr.toReversed() Resultat [3,2,1]
Bones pràctiques Quan busquis evitar efectes secundaris, utilitza mètodes no mutants per mantenir la immutabilitat i facilitar proves i depuració. En casos on el rendiment i la manipulació directa són crítics, pots optar per mètodes mutants però amb cura i documentació clara.
Sobre Q2BSTUDIO Q2BSTUDIO és una empresa de desenvolupament de programari i aplicacions a mida especialitzada en programari a mida, intel·ligència artificial i ciberseguretat. Oferim serveis cloud aws i azure, serveis intel·ligència de negoci, solucions d'ia per a empreses, agents IA i consultoria en power bi. Dissenyem solucions a mida que combinen millors pràctiques d'enginyeria, seguretat i models d'intel·ligència artificial per impulsar la transformació digital de la teva organització.
Serveis destacats Desenvolupament d'aplicacions a mida integrades amb serveis cloud aws i azure, projectes d'intel·ligència artificial per a anàlisi avançada i automatització, implementació d'agents IA per a atenció i processos, auditories i solucions de ciberseguretat, i quadres de comandament amb power bi per a serveis intel·ligència de negoci.
Contacte i següent pas Si necessites assessorament per triar entre enfocaments immutables o mutants en els teus desenvolupaments o vols dissenyar programari a mida amb capacitats d'intel·ligència artificial i ciberseguretat, contacta amb Q2BSTUDIO per a una consulta personalitzada. Integrar les decisions correctes sobre manipulació d'arrays en JavaScript és un detall que millora la qualitat del codi i l'èxit dels teus projectes.
