Fondamentali di javascript: non sempre i metodi di base si usano nel modo corretto

Il JavaScript è basicamente un linguaggio semplice che grazie agli sviluppatori continua ad evolvere evolvere mediante l'implementazione di modelli flessibili ed intelligenti.

Tali modelli alimentano le odierne applicazioni web.

Ma a volte, gli svilppatori web, dimenticano, omettono o non usano propriamente alcune semplici tecniche JavaScript che rendono possibili le attività di base.

Di seguito, un elenco delle suddette tecniche:

1.  Metodo string.replace: /g e /i

Una sorpresa per molti neofiti JavaScript è che il metodo string.replace() non sostituisce tutte le occorrenze ma solo la prima. Naturalmente i veterani del JavaScript sanno che per sostuire tutte le occorrenze di una stringa in una frase è sufficente scrivere:

var frase =frase.replace(“parola_da_cercare/g“,”parola_da_sostituire”);

Se volessimo rimuovere tutti gli “a capo” (i new line o \n che dir si voglia) bisogna invece scrivere:

var frase =frase.replace(/\n/g,”parola_da_sostituire”);

Da notare il non utilizzo delle virgolette e l’escape del metacarattere \n (newline)

Ricapitolando:

// Errore  
var str = "David is an Arsenal fan, which means David is great";  
str.replace("David", "Darren"); 
// "Darren is an Arsenal fan, which means David is great"    

// Risultato desiderato
str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"

Valutate anche la possiblitá di trovarsi di fronte a parole maiuscole o minuscole, e di utilizzare, pertanto il flag /i.

str.replace(/david/gi, "Darren") 
// "Darren will always be an Arsenal fan, which means Darren will always be great"

2.  Array come Oggetti ed Array.prototype.slice

Metodo slice serve principalmente per catturare dei segmenti di un array. Quello che molti sviluppatori non sanno è che il segmento può essere utilizzato per trasformare gli Oggetti Array in argomenti,e i NodeLists e gli attributi in veri array di dati:

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div")); 
// "true" array of DIVs    
var argsArr = Array.prototype.slice.call(arguments); 
// changes arguments to "true" array

È anche possibile clonare un array usando slice:

var clone = myArray.slice(0); // naive clone

3.  Array.prototype.sort

Il metodo Array .sort è ampiamente sottovalutato e poco utilizzato dalla maggior parte degli sviluppatori, oltre ad essere uno strumento alquanto potente.

L'uso comune è:

[1, 3, 9, 2].sort();      
// Returns: [1, 2, 3, 9]

ma esistono alternative interessanti:

[     
{ name: "Robin Van PurseStrings", age: 30 },      
{ name: "Theo Walcott", age: 24 },      
{ name: "Bacary Sagna", age: 28  }  
]
.sort(function(obj1, obj2) {      
// Ascending: first age less than the previous      
return obj1.age - obj2.age;  });      
// Returns:        
// [      
//    { name: "Theo Walcott", age: 24 },      
//    { name: "Bacary Sagna", age: 28  },      
//    { name: "Robin Van PurseStrings", age: 30 }      
// ]

Ovvero: é possibile ordinare gli oggetti a partire dalla loro proprietà.

4.  Utilizzare array.length per troncare (errore!)

Il metodo array.lenght serve per conoscere la lunghezza di un array. Spesso gli sviluppatori cercano di svuotare un array ma erroneamente ne creano uno nuovo:

var myArray = yourArray = [1, 2, 3];    
// :( 
 myArray = []; // "yourArray" is still [1, 2, 3]    
// The right way, keeping reference  

myArray.length = 0; // "yourArray" and "myArray" both []

Cercate invece di usare il metodo .splice

var a = ['apple', 'mango', 'rocket', 'moon', 'tiger'];
var b = a.splice(2); // Assigning to a variable is not mandatory
console.log(a);
// ["apple", "mango"]

5.  Unire gli Array con il metodo push

Il metodo push aggiunge nuovi elementi a una matrice e restituisce la nuova lunghezza della matrice. Il metodo push aggiunge elementi nell'ordine in cui vengono riportati. Se uno degli argomenti è una matrice, verrà aggiunto come elemento singolo. Si puó utilizzare il metodo concat per unire gli elementi di due o più matrici.

Ma anche:

var mergeTo = [4,5,6],  
var mergeFrom = [7,8,9];    
Array.prototype.push.apply(mergeTo, mergeFrom);    
mergeTo; // is: [4, 5, 6, 7, 8, 9]

6. Efficienza/Rivelare la propietá di un Oggetto

Spesso gli sviluppatori utilizzano la seguente tecnica per rilevare una proprietà del browser:

if(navigator.geolocation) {      
// Do some stuff  
}

Questo frammento di codice puó causare perdite di memoria in alcuni browser. La scelta migliore consiste nell'optare per il controllo di una chiave all'interno di un oggetto:

if("geolocation" in navigator) {      
// Do some stuff  
}

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.