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

Fondamentali di javascript: non sempre i metodi di base si usano nel modo corretto
by Janeth Kent Date: 09-08-2013 javascript metodi script trucchi sviluppo web

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  
}

 

 

 

 
by Janeth Kent Date: 09-08-2013 javascript metodi script trucchi sviluppo web visite : 4841  
 
Janeth Kent

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.

 
 
 

Articoli correlati

Un approccio a Java: Il ciclo while

Ciao a tutti e bentornati! Dopo aver fatto una breve, ma corposa, introduzione sui cicli, andiamo oggi a vedere finalmente le prime implementazioni che utilizzano quello che abbiamo definito ciclo precondizionale. In Java, come…

Un approccio a Java: I cicli - Introduzione

Ciao a tutti e bentornati! Sino ad ora, abbiamo parlato di variabili e di strutture di selezione, andando a considerare alcuni degli aspetti fondamentali di questi due concetti. Teoricamente, per…

Un approccio a Java: operatori booleani

La volta precedente, abbiamo ampiamente parlato delle variabili booleane, cercando di delineare quali siano le principali operazioni che si possono effettuare proprio a livello pratico.  Di tutti i casi esaminati, non abbiamo…

Java Strutture Dati: Liste Concatenate

Con il 2020 andiamo ad esaminare un nuovo aspetto della programmazione: le strutture dati. Spesso capita a tutti di utilizzare strutture messe a disposizione dai vari linguaggi di programmazione. L'obiettivo sarà…

Java algoritmi di ordinamento: Merge Sort

Andiamo oggi ad analizzare uno tra i migliori algoritmi di ordinamento: il Merge Sort. Detto anche algoritmo per fusione, fa parte della famiglia dei Divide and Conquer proprio come il Quick Sort. A differenza del…

Come creare un aplicazione Vue.js in 5 minuti

Vue.js sta acquisendo sempre più popolarità, diventando un importante concorrente di framework come Angular o React.js. Come framework per i principianti, conquista i cuori dei giovani sviluppatori front-end e delle…

Java algoritmi di ordinamento: Bubble Sort

Programmando, nasce spesso la necessità di ordinare le collezioni di dati o oggetti che devono poi essere manipolate. Ordinare una lista può essere utile nei casi in cui si debbano…

Java Design Pattern: Prototype Pattern

Andremo ora a parlare di un pattern creazionale che ci permette di "copiare con classe". Sì, anche se sembra strano, il compito fondamentale di questo pattern è copiare. Sto parlando…

Java Design Pattern: Builder Pattern

Andiamo oggi a parlare di un pattern creazionale che in molte situazioni può rappresentare una valida alternativa alla costruzione di oggetti mediante costruttori: il Builder Pattern. La necessità di introdurre meccanismi…

Java Design Pattern: Strategy Pattern

Uno dei pattern che gode di una notevole popolarità ed è al contempo piuttosto semplice è lo Strategy Pattern. Membro della famiglia dei pattern comportamentali, ha il compito di gestire algoritmi,…

Java Design Pattern: Factory Pattern

Continuando il discorso sui design pattern iniziato precedentemente, andiamo oggi a vedere un altro pattern molto utilizzato: il Factory Method Pattern. Il GoF (Gang of Four Design Patterns) lo definisce così: Definisce…

Java: Introduzione ai design pattern: Singleton

Chiunque abbia anche una minima esperienza di programmazione, si sarà reso conto di come i problemi sianoricorrenti. Infatti troviamo spesso problemi con uno stesso pattern ma con contesti differenti. Ad esempio, un…

Clicky