Funzionalità nascoste di JavaScript? [chiuso]

Quali "funzioni nascoste" di JavaScript pensi che ogni programmatore dovrebbe conoscere?

Dopo aver visto l'eccellente qualità delle risposte alle seguenti domande, ho pensato che fosse tempo di chiederlo per JavaScript.

• Funzionalità nascoste di HTML
• Caratteristiche nascoste dei CSS
• Caratteristiche nascoste di PHP
• Funzionalità nascoste di ASP.NET
• Caratteristiche nascoste di C #
• Funzionalità nascoste di Java
• Caratteristiche nascoste di Python

Anche se JavaScript è probabilmente la lingua lato client più importante in questo momento (basta chiedere a Google) è sorprendente quanto poco la maggior parte degli sviluppatori web apprezzi quanto sia veramente potente.

Non è necessario definire alcun parametro per una funzione. Puoi semplicemente usare l' argumentsoggetto simile a matrice della funzione .

function sum() {
    var retval = 0;
    for (var i = 0, len = arguments.length; i < len; ++i) {
        retval += arguments[i];
    }
    return retval;
}

sum(1, 2, 3) // returns 6

Potrei citare la maggior parte dell'ottimo libro di Douglas Crockford JavaScript: The Good Parts .

Ma ne prenderò solo uno per te, usare sempre ===e !==invece di ==e!=

alert('' == '0'); //false
alert(0 == ''); // true
alert(0 =='0'); // true

==non è transitivo. Se lo usi ===, darebbe falso per tutte queste affermazioni come previsto.

Le funzioni sono cittadini di prima classe in JavaScript:

var passFunAndApply = function (fn,x,y,z) { return fn(x,y,z); };

var sum = function(x,y,z) {
  return x+y+z;
};

alert( passFunAndApply(sum,3,4,5) ); // 12

Le tecniche di programmazione funzionale possono essere utilizzate per scrivere eleganti javascript .

In particolare, le funzioni possono essere passate come parametri, ad esempio Array.filter () accetta un callback:

[1, 2, -1].filter(function(element, index, array) { return element > 0 });
// -> [1,2]

Puoi anche dichiarare una funzione "privata" che esiste solo nell'ambito di una funzione specifica:

function PrintName() {
    var privateFunction = function() { return "Steve"; };
    return privateFunction();
}

Puoi usare in all'operatore di controllare se una chiave esiste in un oggetto:

var x = 1;
var y = 3;
var list = {0:0, 1:0, 2:0};
x in list; //true
y in list; //false
1 in list; //true
y in {3:0, 4:0, 5:0}; //true

Se trovi gli oggetti letterali troppo brutti puoi combinarli con il suggerimento di funzione senza parametri:

function list()
 { var x = {};
   for(var i=0; i < arguments.length; ++i) x[arguments[i]] = 0;
   return x
 }

 5 in list(1,2,3,4,5) //true

Assegnare valori predefiniti alle variabili

È possibile utilizzare la logica o l'operatore ||in un'espressione di assegnazione per fornire un valore predefinito:

var a = b || c;

La avariabile otterrà il valore csolo se bè falsy (se è null, false, undefined, 0, empty string, o NaN), altrimenti aotterrà il valore di b.

Ciò è spesso utile nelle funzioni, quando si desidera dare un valore predefinito a un argomento nel caso in cui non venga fornito:

function example(arg1) {
  arg1 || (arg1 = 'default value');
}

Esempio di fallback di IE nei gestori di eventi:

function onClick(e) {
    e || (e = window.event);
}

Le seguenti funzionalità linguistiche sono state con noi per molto tempo, tutte le implementazioni JavaScript le supportano, ma non facevano parte delle specifiche fino alla quinta edizione di ECMAScript :

La debuggerdichiarazione

Descritto in: § 12.15 L'istruzione debugger

Questa affermazione ti consente di inserire punti di interruzione a livello di codice nel tuo codice semplicemente:

// ...
debugger;
// ...

Se un debugger è presente o attivo, si interromperà immediatamente, proprio su quella linea.

Altrimenti, se il debugger non è presente o attivo questa affermazione non ha alcun effetto osservabile.

Letterali stringa multilinea

Descritto in: § 7.8.4 Letterali a stringa

var str = "This is a \
really, really \
long line!";

Bisogna stare attenti perché il carattere successivo al \ deve essere un terminatore di linea, se si dispone di uno spazio dopo il \per esempio, il codice sarà guardare esattamente lo stesso, ma sarà sollevare una SyntaxError.

JavaScript non ha un ambito di blocco (ma ha la chiusura, quindi chiamiamolo anche?).

var x = 1;
{
   var x = 2;
}
alert(x); // outputs 2

È possibile accedere alle proprietà dell'oggetto con []anziché.

Ciò consente di cercare una proprietà corrispondente a una variabile.

obj = {a:"test"};
var propname = "a";
var b = obj[propname];  // "test"

Puoi anche usarlo per ottenere / impostare proprietà dell'oggetto il cui nome non è un identificatore legale.

obj["class"] = "test";  // class is a reserved word; obj.class would be illegal.
obj["two words"] = "test2"; // using dot operator not possible with the space.

Alcune persone non lo sanno e finiscono per usare eval () in questo modo, che è una pessima idea :

var propname = "a";
var a = eval("obj." + propname);

È più difficile da leggere, più difficile da trovare errori (impossibile usare jslint), più lento da eseguire e può portare a exploit XSS.

Se stai cercando su Google un riferimento JavaScript decente su un determinato argomento, includi la parola chiave "mdc" nella tua query e i tuoi primi risultati verranno dal Mozilla Developer Center. Non porto con me riferimenti o libri offline. Uso sempre il trucco delle parole chiave "mdc" per arrivare direttamente a quello che sto cercando. Per esempio:

Google: array javascript ordina mdc
(nella maggior parte dei casi potresti omettere "javascript")

Aggiornamento: Mozilla Developer Center è stato rinominato in Mozilla Developer Network . Il trucco della parola chiave "mdc" funziona ancora, ma presto potremmo dover iniziare a usare "mdn" .

Forse un po 'ovvio per alcuni ...

Installa Firebug e usa console.log ("ciao"). Molto meglio dell'utilizzo di random alert (); 'che ricordo di aver fatto molto qualche anno fa.

Metodi privati

Un oggetto può avere metodi privati.

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    // A private method only visible from within this constructor
    function calcFullName() {
       return firstName + " " + lastName;    
    }

    // A public method available to everyone
    this.sayHello = function () {
        alert(calcFullName());
    }
}

//Usage:
var person1 = new Person("Bob", "Loblaw");
person1.sayHello();

// This fails since the method is not visible from this scope
alert(person1.calcFullName());

Anche menzionato nel "Javascript: The Good Parts" di Crockford:

parseInt()è pericoloso. Se gli passi una stringa senza informarla della base corretta, potrebbe restituire numeri imprevisti. Ad esempio parseInt('010')restituisce 8, non 10. Passare una base a parseInt fa funzionare correttamente:

parseInt('010') // returns 8! (in FF3)
parseInt('010', 10); // returns 10 because we've informed it which base to work with.

Le funzioni sono oggetti e quindi possono avere proprietà.

fn = funzione (x) {
   // ...
}

fn.foo = 1;

fn.next = function (y) {
  //
}

Dovrei dire funzioni di auto-esecuzione.

(function() { alert("hi there");})();

Poiché Javascript non ha un ambito di blocco , è possibile utilizzare una funzione di auto-esecuzione se si desidera definire le variabili locali:

(function() {
  var myvar = 2;
  alert(myvar);
})();

Qui, myvaris non interferisce con o inquina l'ambito globale e scompare quando termina la funzione.

Sapere quanti parametri sono previsti da una funzione

function add_nums(num1, num2, num3 ){
    return num1 + num2 + num3;
}
add_nums.length // 3 is the number of parameters expected.

Sapere quanti parametri sono ricevuti dalla funzione

function add_many_nums(){
    return arguments.length;
}    
add_many_nums(2,1,122,12,21,89); //returns 6

Ecco alcune cose interessanti:

• Confrontando NaNcon qualsiasi cosa (anche NaN) è sempre false, che comprende ==, <e> .
• NaN Sta per Not a Number ma se chiedi il tipo in realtà restituisce un numero.
• Array.sort può assumere una funzione di confronto e viene chiamato da un driver simile a quicksort (dipende dall'implementazione).
• Le "costanti" di espressioni regolari possono mantenere lo stato, come l'ultima cosa a cui corrispondono.
• Alcune versioni di JavaScript consentono di accedere $0, $1, $2i membri su una regex.
• nullè diverso da qualsiasi altra cosa. Non è né un oggetto, un booleano, un numero, una stringa, né undefined. È un po 'come un "alternato" undefined. (Nota:typeof null == "object" :)
• Nel contesto più esterno, this produce l'oggetto [Globale] altrimenti non modificabile.
• Dichiarare una variabile con var , invece di basarsi semplicemente sulla dichiarazione automatica della variabile offre al runtime una reale possibilità di ottimizzare l'accesso a quella variabile
• Il with costrutto distruggerà tali ottimizzazioni
• I nomi delle variabili possono contenere caratteri Unicode.
• Le espressioni regolari JavaScript non sono effettivamente regolari. Sono basati sulle regex di Perl ed è possibile costruire espressioni con lookahead che impiegano molto, molto tempo per essere valutate.
• I blocchi possono essere etichettati e utilizzati come target di break. I loop possono essere etichettati e utilizzati come target di continue.
• Le matrici non sono sparse. L'impostazione del 1000 ° elemento di un array altrimenti vuoto dovrebbe riempirlo di undefined. (dipende dall'implementazione)
• if (new Boolean(false)) {...} eseguirà il {...}blocco
• I motori di espressione regolare di Javascript sono specifici dell'implementazione: ad es. È possibile scrivere espressioni regolari "non portatili".

[aggiornato un po 'in risposta a buoni commenti; si prega di vedere i commenti]

So di essere in ritardo alla festa, ma non riesco proprio a credere +che l'utilità dell'operatore non sia stata menzionata oltre a "convertire qualsiasi cosa in un numero". Forse è così ben nascosta una caratteristica?

// Quick hex to dec conversion:
+"0xFF";              // -> 255

// Get a timestamp for now, the equivalent of `new Date().getTime()`:
+new Date();

// Safer parsing than parseFloat()/parseInt()
parseInt("1,000");    // -> 1, not 1000
+"1,000";             // -> NaN, much better for testing user input
parseInt("010");      // -> 8, because of the octal literal prefix
+"010";               // -> 10, `Number()` doesn't parse octal literals 

// A use case for this would be rare, but still useful in cases
// for shortening something like if (someVar === null) someVar = 0;
+null;                // -> 0;

// Boolean to integer
+true;                // -> 1;
+false;               // -> 0;

// Other useful tidbits:
+"1e10";              // -> 10000000000
+"1e-4";              // -> 0.0001
+"-12";               // -> -12

Ovviamente, puoi fare tutto questo usando Number()invece, ma il+ operatore è molto più carino!

È inoltre possibile definire un valore di ritorno numerico per un oggetto sovrascrivendo il valueOf()metodo del prototipo . Qualsiasi conversione numerica eseguita su quell'oggetto non comporterà NaN, ma il valore di ritorno del valueOf()metodo:

var rnd = {
    "valueOf": function () { return Math.floor(Math.random()*1000); }
};
+rnd;               // -> 442;
+rnd;               // -> 727;
+rnd;               // -> 718;

" Metodi di estensione in JavaScript " tramite la proprietà prototype.

Array.prototype.contains = function(value) {  
    for (var i = 0; i < this.length; i++) {  
        if (this[i] == value) return true;  
    }  
    return false;  
}

Ciò aggiungerà un containsmetodo a tutti gli Arrayoggetti. È possibile chiamare questo metodo utilizzando questa sintassi

var stringArray = ["foo", "bar", "foobar"];
stringArray.contains("foobar");

Per rimuovere correttamente una proprietà da un oggetto, è necessario eliminare la proprietà anziché impostarla su non definita :

var obj = { prop1: 42, prop2: 43 };

obj.prop2 = undefined;

for (var key in obj) {
    ...

La proprietà prop2 farà ancora parte dell'iterazione. Se vuoi sbarazzarti completamente di prop2 , dovresti invece fare:

delete obj.prop2;

La proprietà prop2 non apparirà più quando stai iterando attraverso le proprietà.

with.

È usato raramente e francamente, raramente utile ... Ma, in circostanze limitate, ha i suoi usi.

Ad esempio: i letterali di oggetti sono molto utili per impostare rapidamente le proprietà su un nuovo oggetto. E se fosse necessario modificare la metà delle proprietà su un oggetto esistente?

var user = 
{
   fname: 'Rocket', 
   mname: 'Aloysus',
   lname: 'Squirrel', 
   city: 'Fresno', 
   state: 'California'
};

// ...

with (user)
{
   mname = 'J';
   city = 'Frostbite Falls';
   state = 'Minnesota';
}

Alan Storm sottolinea che questo può essere alquanto pericoloso: se l'oggetto utilizzato come contesto non ha una delle proprietà assegnate, verrà risolto nell'ambito esterno, creando o sovrascrivendo una variabile globale. Ciò è particolarmente pericoloso se sei abituato a scrivere codice per lavorare con oggetti in cui le proprietà con valori predefiniti o vuoti non vengono definite:

var user = 
{
   fname: "John",
// mname definition skipped - no middle name
   lname: "Doe"
};

with (user)
{
   mname = "Q"; // creates / modifies global variable "mname"
}

Pertanto, è probabilmente una buona idea evitare l'uso withdell'istruzione per tale assegnazione.

Vedi anche: ci sono usi legittimi per l'affermazione "con" di JavaScript?

I metodi (o le funzioni) possono essere richiamati su oggetti che non sono del tipo con cui sono stati progettati per funzionare. È fantastico chiamare metodi nativi (veloci) su oggetti personalizzati.

var listNodes = document.getElementsByTagName('a');
listNodes.sort(function(a, b){ ... });

Questo codice si arresta in modo anomalo perché listNodesnon è unArray

Array.prototype.sort.apply(listNodes, [function(a, b){ ... }]);

Questo codice funziona perché listNodesdefinisce abbastanza proprietà simili a array (lunghezza, operatore []) per essere utilizzate da sort().

L'eredità prototipale (resa popolare da Douglas Crockford) rivoluziona completamente il modo in cui pensi a un sacco di cose in Javascript.

Object.beget = (function(Function){
    return function(Object){
        Function.prototype = Object;
        return new Function;
    }
})(function(){});

È un assassino! Peccato che quasi nessuno lo usi.

Ti consente di "generare" nuove istanze di qualsiasi oggetto, di estenderle, mantenendo al contempo un collegamento di eredità prototipo (attivo) alle loro altre proprietà. Esempio:

var A = {
  foo : 'greetings'
};  
var B = Object.beget(A);

alert(B.foo);     // 'greetings'

// changes and additionns to A are reflected in B
A.foo = 'hello';
alert(B.foo);     // 'hello'

A.bar = 'world';
alert(B.bar);     // 'world'


// ...but not the other way around
B.foo = 'wazzap';
alert(A.foo);     // 'hello'

B.bar = 'universe';
alert(A.bar);     // 'world'

Alcuni lo definirebbero una questione di gusti, ma:

aWizz = wizz || "default";
// same as: if (wizz) { aWizz = wizz; } else { aWizz = "default"; }

L'operatore trinario può essere incatenato per agire come quello di Scheme (cond ...):

(cond (predicate  (action  ...))
      (predicate2 (action2 ...))
      (#t         default ))

può essere scritto come ...

predicate  ? action( ... ) :
predicate2 ? action2( ... ) :
             default;

Questo è molto "funzionale", in quanto ramifica il tuo codice senza effetti collaterali. Quindi invece di:

if (predicate) {
  foo = "one";
} else if (predicate2) {
  foo = "two";
} else {
  foo = "default";
}

Tu puoi scrivere:

foo = predicate  ? "one" :
      predicate2 ? "two" :
                   "default";

Funziona bene anche con la ricorsione :)

Anche i numeri sono oggetti. Quindi puoi fare cose interessanti come:

// convert to base 2
(5).toString(2) // returns "101"

// provide built in iteration
Number.prototype.times = function(funct){
  if(typeof funct === 'function') {
    for(var i = 0;i < Math.floor(this);i++) {
      funct(i);
    }
  }
  return this;
}


(5).times(function(i){
  string += i+" ";
});
// string now equals "0 1 2 3 4 "

var x = 1000;

x.times(function(i){
  document.body.innerHTML += '<p>paragraph #'+i+'</p>';
});
// adds 1000 parapraphs to the document

Che ne dici di chiusure in JavaScript (simili ai metodi anonimi in C # v2.0 +). È possibile creare una funzione che crea una funzione o "espressione".

Esempio di chiusure :

//Takes a function that filters numbers and calls the function on 
//it to build up a list of numbers that satisfy the function.
function filter(filterFunction, numbers)
{
  var filteredNumbers = [];

  for (var index = 0; index < numbers.length; index++)
  {
    if (filterFunction(numbers[index]) == true)
    {
      filteredNumbers.push(numbers[index]);
    }
  }
  return filteredNumbers;
}

//Creates a function (closure) that will remember the value "lowerBound" 
//that gets passed in and keep a copy of it.
function buildGreaterThanFunction(lowerBound)
{
  return function (numberToCheck) {
    return (numberToCheck > lowerBound) ? true : false;
  };
}

var numbers = [1, 15, 20, 4, 11, 9, 77, 102, 6];

var greaterThan7 = buildGreaterThanFunction(7);
var greaterThan15 = buildGreaterThanFunction(15);

numbers = filter(greaterThan7, numbers);
alert('Greater Than 7: ' + numbers);

numbers = filter(greaterThan15, numbers);
alert('Greater Than 15: ' + numbers);

È inoltre possibile estendere (ereditare) le classi e sovrascrivere le proprietà / i metodi utilizzando il prototipo di catena cucchiaio16 cui si fa riferimento.

Nel seguente esempio creiamo una classe Pet e definiamo alcune proprietà. Sostituiamo anche il metodo .toString () ereditato da Object.

Successivamente creiamo una classe Dog che estende Pet e sovrascrive nuovamente il metodo .toString () modificandone il comportamento (polimorfismo). Inoltre aggiungiamo alcune altre proprietà alla classe figlio.

Dopodiché controlliamo la catena di ereditarietà per mostrare che Dog è ancora di tipo Dog, di tipo Pet e di tipo Object.

// Defines a Pet class constructor 
function Pet(name) 
{
    this.getName = function() { return name; };
    this.setName = function(newName) { name = newName; };
}

// Adds the Pet.toString() function for all Pet objects
Pet.prototype.toString = function() 
{
    return 'This pets name is: ' + this.getName();
};
// end of class Pet

// Define Dog class constructor (Dog : Pet) 
function Dog(name, breed) 
{
    // think Dog : base(name) 
    Pet.call(this, name);
    this.getBreed = function() { return breed; };
}

// this makes Dog.prototype inherit from Pet.prototype
Dog.prototype = new Pet();

// Currently Pet.prototype.constructor
// points to Pet. We want our Dog instances'
// constructor to point to Dog.
Dog.prototype.constructor = Dog;

// Now we override Pet.prototype.toString
Dog.prototype.toString = function() 
{
    return 'This dogs name is: ' + this.getName() + 
        ', and its breed is: ' + this.getBreed();
};
// end of class Dog

var parrotty = new Pet('Parrotty the Parrot');
var dog = new Dog('Buddy', 'Great Dane');
// test the new toString()
alert(parrotty);
alert(dog);

// Testing instanceof (similar to the `is` operator)
alert('Is dog instance of Dog? ' + (dog instanceof Dog)); //true
alert('Is dog instance of Pet? ' + (dog instanceof Pet)); //true
alert('Is dog instance of Object? ' + (dog instanceof Object)); //true

Entrambe le risposte a questa domanda sono state modificate da un ottimo articolo MSDN di Ray Djajadinata.

È possibile rilevare eccezioni a seconda del tipo. Citato da MDC :

try {
   myroutine(); // may throw three exceptions
} catch (e if e instanceof TypeError) {
   // statements to handle TypeError exceptions
} catch (e if e instanceof RangeError) {
   // statements to handle RangeError exceptions
} catch (e if e instanceof EvalError) {
   // statements to handle EvalError exceptions
} catch (e) {
   // statements to handle any unspecified exceptions
   logMyErrors(e); // pass exception object to error handler
}

NOTA: le clausole di cattura condizionale sono un'estensione Netscape (e quindi Mozilla / Firefox) che non fa parte delle specifiche ECMAScript e quindi non può essere invocata se non su determinati browser.

Dalla cima della mia testa ...

funzioni

argument.callee si riferisce alla funzione che ospita la variabile "argomenti", quindi può essere utilizzata per richiamare funzioni anonime:

var recurse = function() {
  if (condition) arguments.callee(); //calls recurse() again
}

È utile se vuoi fare qualcosa del genere:

//do something to all array items within an array recursively
myArray.forEach(function(item) {
  if (item instanceof Array) item.forEach(arguments.callee)
  else {/*...*/}
})

Oggetti

Una cosa interessante sui membri dell'oggetto: possono avere qualsiasi stringa come i loro nomi:

//these are normal object members
var obj = {
  a : function() {},
  b : function() {}
}
//but we can do this too
var rules = {
  ".layout .widget" : function(element) {},
  "a[href]" : function(element) {}
}
/* 
this snippet searches the page for elements that
match the CSS selectors and applies the respective function to them:
*/
for (var item in rules) {
  var elements = document.querySelectorAll(rules[item]);
  for (var e, i = 0; e = elements[i++];) rules[item](e);
}

stringhe

String.split può assumere espressioni regolari come parametri:

"hello world   with  spaces".split(/\s+/g);
//returns an array: ["hello", "world", "with", "spaces"]

String.replace può assumere un'espressione regolare come parametro di ricerca e una funzione come parametro sostitutivo:

var i = 1;
"foo bar baz ".replace(/\s+/g, function() {return i++});
//returns "foo1bar2baz3"

È possibile utilizzare gli oggetti anziché gli switch per la maggior parte del tempo.

function getInnerText(o){
    return o === null? null : {
        string: o,
        array: o.map(getInnerText).join(""),
        object:getInnerText(o["childNodes"])
    }[typeis(o)];
}

Aggiornamento: se sei preoccupato che i casi che valutano in anticipo siano inefficienti (perché sei preoccupato per l'efficienza fin dall'inizio nella progettazione del programma ??) allora puoi fare qualcosa del genere:

function getInnerText(o){
    return o === null? null : {
        string: function() { return o;},
        array: function() { return o.map(getInnerText).join(""); },
        object: function () { return getInnerText(o["childNodes"]; ) }
    }[typeis(o)]();
}

Questo è più oneroso da digitare (o leggere) rispetto a uno switch o a un oggetto, ma conserva i vantaggi dell'utilizzo di un oggetto anziché di uno switch, dettagliato nella sezione commenti qui sotto. Questo stile rende anche più semplice trasformarlo in una vera "classe" una volta cresciuto abbastanza.

update2: con le estensioni di sintassi proposte per ES.next, questo diventa

let getInnerText = o -> ({
    string: o -> o,
    array: o -> o.map(getInnerText).join(""),
    object: o -> getInnerText(o["childNodes"])
}[ typeis o ] || (->null) )(o);

Assicurati di utilizzare il metodo hasOwnProperty durante l'iterazione delle proprietà di un oggetto:

for (p in anObject) {
    if (anObject.hasOwnProperty(p)) {
        //Do stuff with p here
    }
}

Questo viene fatto in modo da accedere solo alle proprietà dirette di anObject e non utilizzare le proprietà che si trovano nella catena del prototipo.

Variabili private con un'interfaccia pubblica

Usa un piccolo trucco con una definizione della funzione di auto-chiamata. Tutto all'interno dell'oggetto che viene restituito è disponibile nell'interfaccia pubblica, mentre tutto il resto è privato.

var test = function () {
    //private members
    var x = 1;
    var y = function () {
        return x * 2;
    };
    //public interface
    return {
        setx : function (newx) {
            x = newx;
        },
        gety : function () {
            return y();
        }
    }
}();

assert(undefined == test.x);
assert(undefined == test.y);
assert(2 == test.gety());
test.setx(5);
assert(10 == test.gety());