Caractéristiques cachées de JavaScript? [fermé]

Quelles "fonctionnalités cachées" de JavaScript pensez-vous que chaque programmeur devrait connaître?

Après avoir vu l'excellente qualité des réponses aux questions suivantes, j'ai pensé qu'il était temps de lui demander JavaScript.

• Fonctionnalités cachées de HTML
• Fonctionnalités cachées de CSS
• Fonctionnalités cachées de PHP
• Fonctionnalités cachées d'ASP.NET
• Fonctions cachées de C #
• Fonctions cachées de Java
• Fonctionnalités cachées de Python

Même si JavaScript est sans doute le langage côté client le plus important en ce moment (il suffit de demander à Google), il est surprenant de constater à quel point la plupart des développeurs Web apprécient sa puissance.

Vous n'avez pas besoin de définir de paramètres pour une fonction. Vous pouvez simplement utiliser l' argumentsobjet de type tableau de la fonction .

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

Je pourrais citer la plupart de l'excellent livre JavaScript de Douglas Crockford : The Good Parts .

Mais je n'en prend qu'un pour vous, utilisez toujours ===et !==au lieu de ==et!=

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

==n'est pas transitif. Si vous l'utilisez, ===cela donnerait false pour toutes ces déclarations comme prévu.

Les fonctions sont des citoyens de première classe en 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

Des techniques de programmation fonctionnelles peuvent être utilisées pour écrire du javascript élégant .

En particulier, les fonctions peuvent être passées en tant que paramètres, par exemple Array.filter () accepte un rappel:

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

Vous pouvez également déclarer une fonction "privée" qui n'existe que dans le cadre d'une fonction spécifique:

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

Vous pouvez utiliser l' opérateur in pour vérifier si une clé existe dans un objet:

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

Si vous trouvez les objets littéraux trop laids, vous pouvez les combiner avec la fonction sans paramètre:

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

Affectation de valeurs par défaut aux variables

Vous pouvez utiliser le logique ou l'opérateur ||dans une expression d'affectation pour fournir une valeur par défaut:

var a = b || c;

La avariable récupérera la valeur cque si best falsy (si est null, false, undefined, 0, empty stringou NaN), sinon ava obtenir la valeur de b.

Ceci est souvent utile dans les fonctions, lorsque vous souhaitez donner une valeur par défaut à un argument au cas où il ne serait pas fourni:

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

Exemple de repli IE dans les gestionnaires d'événements:

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

Les fonctionnalités de langage suivantes sont avec nous depuis longtemps, toutes les implémentations JavaScript les prennent en charge, mais elles ne faisaient pas partie de la spécification jusqu'à ECMAScript 5e édition :

La debuggerdéclaration

Décrit dans: § 12.15 La déclaration du débogueur

Cette instruction vous permet de placer des points d'arrêt par programmation dans votre code simplement en:

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

Si un débogueur est présent ou actif, il provoquera sa rupture immédiatement, directement sur cette ligne.

Sinon, si le débogueur n'est pas présent ou actif, cette instruction n'a aucun effet observable.

Littéraux de chaînes multilignes

Décrit dans: § 7.8.4 Littéraux de chaîne

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

Vous devez être prudent parce que le caractère à côté de la \ doit être une terminaison de ligne, si vous avez un espace après le \par exemple, le code regarder exactement la même chose, mais il soulèvera un SyntaxError.

JavaScript n'a pas de portée de bloc (mais il a une fermeture alors appelons-le même?).

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

Vous pouvez accéder aux propriétés des objets avec []au lieu de.

Cela vous permet de rechercher une propriété correspondant à une variable.

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

Vous pouvez également l'utiliser pour obtenir / définir des propriétés d'objet dont le nom n'est pas un identifiant légal.

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.

Certaines personnes ne le savent pas et finissent par utiliser eval () comme ceci, ce qui est une très mauvaise idée :

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

C'est plus difficile à lire, plus difficile à trouver des erreurs dans (ne peut pas utiliser jslint), plus lent à exécuter et peut conduire à des exploits XSS.

Si vous cherchez sur Google une référence JavaScript décente sur un sujet donné, incluez le mot clé "mdc" dans votre requête et vos premiers résultats proviendront du Mozilla Developer Center. Je n'ai pas de références ou de livres hors ligne avec moi. J'utilise toujours le mot-clé "mdc" pour accéder directement à ce que je recherche. Par exemple:

Google: javascript array sort mdc
(dans la plupart des cas, vous pouvez omettre "javascript")

Mise à jour: Mozilla Developer Center a été renommé Mozilla Developer Network . L'astuce de mot clé "mdc" fonctionne toujours, mais bientôt nous devrons peut-être commencer à utiliser "mdn" à la place .

Peut-être un peu évident pour certains ...

Installez Firebug et utilisez console.log ("bonjour"). Tellement mieux que d'utiliser random alert (); c'est ce dont je me souviens avoir fait beaucoup il y a quelques années.

Méthodes privées

Un objet peut avoir des méthodes privées.

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());

Également mentionné dans "Javascript: The Good Parts" de Crockford:

parseInt()est dangereux. Si vous lui passez une chaîne sans l'informer de la base appropriée, il peut retourner des nombres inattendus. Par exemple, parseInt('010')renvoie 8, pas 10. Passer une base à parseInt le fait fonctionner correctement:

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

Les fonctions sont des objets et peuvent donc avoir des propriétés.

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

fn.foo = 1;

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

Je devrais dire des fonctions auto-exécutables.

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

Parce que Javascript n'a pas de portée de bloc , vous pouvez utiliser une fonction auto-exécutable si vous souhaitez définir des variables locales:

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

Ici, myvaris n'interfère pas avec la portée globale et ne la pollue pas, et disparaît lorsque la fonction se termine.

Savoir combien de paramètres sont attendus par une fonction

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

Savoir combien de paramètres sont reçus par la fonction

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

Voici quelques choses intéressantes:

• Comparer NaNavec quoi que ce soit (même NaN) est toujours faux, cela inclut ==, <et >.
• NaN Signifie Pas un nombre mais si vous demandez le type, il retourne en fait un nombre.
• Array.sort peut prendre une fonction de comparaison et est appelé par un pilote de type quicksort (dépend de l'implémentation).
• Les expressions constantes "constantes" peuvent conserver leur état, comme la dernière chose à laquelle elles correspondent.
• Certaines versions de JavaScript vous permettent d'accéder $0, $1, les $2membres sur une expression régulière.
• nullne ressemble à rien d'autre. Ce n'est ni un objet, ni un booléen, ni un nombre, ni une chaîne, ni undefined. C'est un peu comme un "suppléant" undefined. (Note: typeof null == "object")
• Dans le contexte le plus externe, thisrenvoie l'objet [Global] autrement innommable.
• Déclarer une variable avec var, au lieu de simplement se fier à la déclaration automatique de la variable, donne au runtime une réelle chance d'optimiser l'accès à cette variable
• La withconstruction détruira de telles optimisations
• Les noms de variable peuvent contenir des caractères Unicode.
• Les expressions régulières JavaScript ne sont pas réellement régulières. Ils sont basés sur les expressions rationnelles de Perl, et il est possible de construire des expressions avec des anticipations qui prennent très, très longtemps à évaluer.
• Les blocs peuvent être étiquetés et utilisés comme cibles de break. Les boucles peuvent être étiquetées et utilisées comme cible de continue.
• Les tableaux ne sont pas rares. La définition du 1000e élément d'un tableau par ailleurs vide devrait le remplir undefined. (dépend de la mise en œuvre)
• if (new Boolean(false)) {...} exécutera le {...}bloc
• Les moteurs d'expression régulière de Javascript sont spécifiques à l'implémentation: par exemple, il est possible d'écrire des expressions régulières "non portables".

[mis à jour un peu en réponse à de bons commentaires; veuillez voir les commentaires]

Je sais que je suis en retard à la fête, mais je n'arrive pas à croire que l' +utilité de l' opérateur n'ait pas été mentionnée au-delà de "convertir quoi que ce soit en nombre". C'est peut-être à quel point une fonctionnalité est bien cachée?

// 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

Bien sûr, vous pouvez faire tout cela à la Number()place, mais l' +opérateur est tellement plus joli!

Vous pouvez également définir une valeur de retour numérique pour un objet en remplaçant la valueOf()méthode du prototype . Toute conversion de nombre effectuée sur cet objet n'entraînera pas NaN, mais la valeur de retour de la valueOf()méthode:

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

" Méthodes d'extension en JavaScript " via la propriété prototype.

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

Cela ajoutera une containsméthode à tous les Arrayobjets. Vous pouvez appeler cette méthode en utilisant cette syntaxe

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

Pour supprimer correctement une propriété d'un objet, vous devez supprimer la propriété au lieu de simplement la définir sur undefined :

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

obj.prop2 = undefined;

for (var key in obj) {
    ...

La propriété prop2 fera toujours partie de l'itération. Si vous voulez vous débarrasser complètement de prop2 , vous devriez plutôt faire:

delete obj.prop2;

La propriété prop2 n'apparaîtra plus lorsque vous parcourez les propriétés.

with.

Il est rarement utilisé, et franchement, rarement utile ... Mais, dans des circonstances limitées, il a ses utilisations.

Par exemple: les littéraux d'objet sont très pratiques pour configurer rapidement les propriétés d'un nouvel objet. Mais que faire si vous devez modifier la moitié des propriétés d'un objet existant?

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

// ...

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

Alan tempête souligne que cela peut être un peu dangereux: si l'objet utilisé comme contexte ne possède l' une des propriétés étant affecté à, il sera résolu dans le cadre extérieur, créant peut - être ou une variable globale d' écraser. Cela est particulièrement dangereux si vous avez l'habitude d'écrire du code pour travailler avec des objets dont les propriétés avec des valeurs par défaut ou vides ne sont pas définies:

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

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

Par conséquent, c'est probablement une bonne idée d'éviter d'utiliser l' withinstruction pour une telle affectation.

Voir aussi: Y a-t-il des utilisations légitimes pour la déclaration «with» de JavaScript?

Les méthodes (ou fonctions) peuvent être appelées sur des objets qui ne sont pas du type avec lequel ils ont été conçus. C'est génial d'appeler des méthodes natives (rapides) sur des objets personnalisés.

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

Ce code se bloque car listNodesn'est pas unArray

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

Ce code fonctionne car listNodesdéfinit suffisamment de propriétés de type tableau (longueur, opérateur []) pour être utilisées par sort().

L'héritage prototypique (popularisé par Douglas Crockford) révolutionne complètement votre façon de penser à beaucoup de choses en Javascript.

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

C'est un tueur! Dommage que presque personne ne l'utilise.

Il vous permet de «générer» de nouvelles instances de n'importe quel objet, de les étendre, tout en conservant un lien d'héritage prototypique (en direct) vers leurs autres propriétés. Exemple:

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'

Certains appelleraient cela une question de goût, mais:

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

L'opérateur trinaire peut être enchaîné pour agir comme Scheme (cond ...):

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

peut s'écrire comme ...

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

C'est très "fonctionnel", car il branche votre code sans effets secondaires. Donc au lieu de:

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

Tu peux écrire:

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

Fonctionne bien avec la récursivité aussi :)

Les nombres sont aussi des objets. Vous pouvez donc faire des trucs sympas comme:

// 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

Que diriez-vous des fermetures en JavaScript (similaires aux méthodes anonymes dans C # v2.0 +). Vous pouvez créer une fonction qui crée une fonction ou une "expression".

Exemple de fermetures :

//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);

Vous pouvez également étendre (hériter) des classes et remplacer les propriétés / méthodes à l'aide de la chaîne de prototype cuillère16 mentionnée.

Dans l'exemple suivant, nous créons une classe Pet et définissons certaines propriétés. Nous substituons également la méthode .toString () héritée d'Object.

Après cela, nous créons une classe Dog qui étend Pet et remplace la méthode .toString () en modifiant à nouveau son comportement (polymorphisme). De plus, nous ajoutons d'autres propriétés à la classe enfant.

Après cela, nous vérifions la chaîne d'héritage pour montrer que Dog est toujours de type Dog, de type Pet et de type 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

Les deux réponses à cette question étaient des codes modifiés à partir d'un excellent article MSDN par Ray Djajadinata.

Vous pouvez intercepter des exceptions en fonction de leur type. Cité de 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
}

REMARQUE: les clauses de capture conditionnelle sont une extension Netscape (et donc Mozilla / Firefox) qui ne fait pas partie de la spécification ECMAScript et ne peut donc pas être invoquée sauf sur des navigateurs particuliers.

Du haut de ma tête...

Les fonctions

arguments.callee se réfère à la fonction qui héberge la variable "arguments", elle peut donc être utilisée pour recésurer des fonctions anonymes:

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

C'est utile si vous voulez faire quelque chose comme ça:

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

Objets

Une chose intéressante à propos des membres d'objet: ils peuvent avoir n'importe quelle chaîne comme nom:

//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);
}

Cordes

String.split peut prendre des expressions régulières comme paramètres:

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

String.replace peut prendre une expression régulière comme paramètre de recherche et une fonction comme paramètre de remplacement:

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

Vous pouvez utiliser des objets au lieu de commutateurs la plupart du temps.

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

Mise à jour: si vous craignez que les cas évalués à l'avance soient inefficaces (pourquoi vous inquiétez-vous de l'efficacité si tôt dans la conception du programme ??), vous pouvez faire quelque chose comme ceci:

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)]();
}

C'est plus onéreux à taper (ou à lire) qu'un commutateur ou un objet, mais cela préserve les avantages de l'utilisation d'un objet au lieu d'un commutateur, détaillés dans la section commentaires ci-dessous. Ce style rend également plus simple de transformer cela en une «classe» appropriée une fois qu'il a suffisamment grandi.

update2: avec les extensions de syntaxe proposées pour ES.next, cela devient

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

Veillez à utiliser la méthode hasOwnProperty lors de l'itération à travers les propriétés d'un objet:

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

Ceci est fait pour que vous n'accédiez qu'aux propriétés directes d'un objet , et que vous n'utilisiez pas les propriétés situées en bas de la chaîne de prototype.

Variables privées avec une interface publique

Il utilise une petite astuce avec une définition de fonction auto-appelante. Tout ce qui est retourné à l'intérieur de l'objet est disponible dans l'interface publique, tandis que tout le reste est privé.

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());