Fondamentali Di Javascript: Non Sempre I Metodi Di Base si Usano Nel Modo Corretto

by admin admin 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 admin admin Date: 09-08-2013 javascript metodi script trucchi sviluppo web visite : 2851  
 
 
 
 

Articoli correlati

    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…

    Java 12, finalmente meno prolisso?

    Conosciamo tutti Java per le sue caratteristiche grazie alle quali, nonostante siano passati più di 20 anni dalla prima versione,è tutt'oggi uno dei linguaggi più studiati e più utilizzati, malgrado…

    JQuery morirà nel 2019?

    Per un po' di tempo, la centralità di JQuery è stata oggetto di dibattito tra gli sviluppatori web. Come programmatori web interessati a Javascript, eravamo curiosi di sapere che opinioni…

    Google Maps: i migliori trucchi per padroneggiare l'applicazione in Android

    Le numerose funzionalità e opzioni disponibili su Google Maps potrebbero farvi pensare che sia un'applicazione difficile da gestire, ma nulla potrebbe essere più lontano dalla verità. Google ha sviluppato uno…

    45 utili siti che avresti voluto conoscere prima

    In rete sono presenti talmente tanti siti web dedicati alla sviluppo web e alla grafica, che risulta molto complicato conoscerli tutti. Oggi, vi proponiamo una lista di siti web non…

    30 Manuali di riferimento per JavaScript: jQuery, Node.js, React

    Questa lista ha lo scopo di introdurre i nuovi sviluppatori a JavaScript (jQuery, Node.js e React) e agevolare il compito degli sviluppatori più esperti. jQuery jQuery API (Official) Leggi → jQuery Cheatsheet (Devhints) Leggi → jQuery Cheat Sheet (JavaScript Toolbox) Leggi…

    Le migliori librerie JavaScript del 2018

    Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…