web-dev-qa-db-fra.com

Utilisation de [crochets] autour des variables JavaScript

Nous avons reçu du JavaScript d'une agence qui semble incorrecte, mais qui fonctionne.

Pour une raison quelconque, ils ajoutent des [crochets] autour des variables, donc:

var some_variable = 'to=' + [other_variable];

Cela fonctionne, mais les crochets semblent complètement superflus.

Cette syntaxe a-t-elle un but ou est-elle techniquement incorrecte, mais ignorée par le navigateur?

javascriptsyntax
47
Richard Everett

Les crochets signifient un nouveau tableau.

var ar=new Array("a","b");
var ar=["a","b"]; //Equal to the syntax above

dans cette situation, il n'y a pas de différence si vous utilisez des crochets ou non parce que si c'est un tableau, il est converti en chaîne, mais si vous supprimez les crochets, cela prend moins de temps car il n'a pas à construire un nouveau tableau et à le convertir mais il fonctionne avec une chaîne simple.

43
mck89

Juste au cas où quelqu'un d'autre arriverait ici en essayant de découvrir ce que pourrait être une syntaxe étrange/nouvelle impliquant des [crochets] (vue dans le Javascript de quelqu'un d'autre), comme j'étais ...

De nos jours, avec ES6, nous avons également [] utilisé sur le côté gauche pour la déstructuration des tableaux, par exemple.

const names = ['Luke', 'Eva', 'Phil']; 
const [first] = names;  
console.log(first); // 'Luke' 
const [first, second] = names;  
console.log(first, second); // 'Luke' 'Eva'

Pour plus d'informations, voir http://www.deadcoderising.com/2017-03-28-es6-destructuring-an-elegant-way-of-extracting-data-from-arrays-and-objects-in- javascript / ou google 'es6 destructuring'.

40
Jim Smart

Même sans changer le prototype Array, il existe des différences:

var other_variable;
var some_variable = 'to=' + [other_variable];

Si other_variable n'est pas défini, la valeur de retour avec le tableau est 'to =',

Sans le tableau, la valeur de retour est 'to = undefined'.

32
kennebec
b = "bar" + ["foo"]

C'est syntaxiquement correct, mais en effet très, très, superflu. Voilà comment cela fonctionne:

["foo"]

JavaScript prend la chaîne "foo" et la convertit en un tableau avec un élément, "foo":

"bar" + ["foo"]

quand + est utilisé, et l'un des opérandes est une chaîne, "bar" dans ce cas, JavaScript convertit le second en chaîne. Puisque l'opérande deux est un tableau, le Array.toString est appelée, qui, par défaut, retourne tous les éléments joints par une virgule. Nous avons un élément, et le résultat sera égal à cet élément, c'est-à-dire dans ce contexte "foo" est équivalent à ["foo"].

Si vous redéfinissez Array.toString vous pouvez mieux voir ce qui se passe:

alert("bar" + ["foo"])
Array.prototype.toString = function() { return "???"; }
alert("bar" + ["foo"])
15
user187291

Il est possible de construire une situation où ceci:

var some_variable = 'to=' + other_variable;

et ça:

var some_variable = 'to=' + [other_variable];

produire des résultats différents. Plus précisément, si la méthode Array.prototype.toString() (ou, je suppose, la méthode Array.prototype.join()) a été modifiée par défaut, tout peut arriver. Par exemple, des fonctionnalités supplémentaires peuvent être ajoutées à la méthode Array.prototype.toString() pour générer des informations de journalisation, effectuer des recherches ou quoi que ce soit vraiment.

La probabilité que cela ait été fait est mince, j'imagine, mais cela doit être mentionné pour être complet.

9
Tim

Je parie que quelqu'un a dit à cette personne:

  • "Faites la concaténation des chaînes avec un tableau, c'est plus rapide!"

Sens:

var some_variable = ['to=', other_variable].join("");

Ce qui est apparemment plus rapide pour beaucoup de concaténations, mais totalement hors de propos, car ce code ne s'exécutera probablement qu'une seule fois de toute façon. Premature_optimization = sqrt(all_evil)!

Et le pauvre gars a fait cette autre chose non pertinente ...

J'aime les gens.

9
Victor

Peut être ça ..

Accès variable global avec la notation du support carré

La notation entre crochets nécessite qu'il y ait une sorte de référence d'objet à gauche des crochets.

["document"] //Array literal, not a Property Accessor!

- produira une erreur si une tentative est faite pour lui assigner une valeur, car elle sera traitée comme un littéral de tableau, si une tentative de lecture est faite, le tableau à un élément contenant la chaîne entre crochets est retourné. Les variables globales sont normalement référencées par leur seul identifiant. Cela semblerait exclure les variables globales de la possibilité d'être référencées à l'aide d'une chaîne contenant leur nom d'identifiant ou une expression qui a construit ou renvoyé leur nom. Cependant, les variables globales javascript (et les noms de fonctions globales d'ailleurs) sont des propriétés d'un objet global. Tout identifiant contenant une référence à l'objet global peut être utilisé à gauche des crochets pour former un accesseur de propriété qui fait référence à une variable globale.

Dans un navigateur Web, l'objet global est la fenêtre (ou le cadre) dans laquelle le script s'exécute. Chaque objet fenêtre (ou cadre) contient un certain nombre de propriétés, dont au moins deux sont des références à la fenêtre (objet global) lui-même. Ces propriétés sont "window" et "self". Ces noms de propriété peuvent être utilisés comme identifiant à gauche des crochets lorsque vous faites référence à des variables globales. Donc, étant donné une variable globale définie comme: -

var anyName = 0;

  • cette variable globale peut être référencée comme: -

    fenêtre ["anyName"]

Comme pour toute autre utilisation de la notation entre crochets, la chaîne entre crochets peut être contenue dans une variable ou construite/renvoyée par une expression.

Le code qui s'exécute dans le contexte global, le code dans les fonctions globales (sauf les constructeurs Object invoqués avec le nouveau mot clé) et le code en ligne en dehors de toutes les fonctions, pourraient également utiliser le mot clé this pour faire référence à l'objet global. Le mot-clé this fait référence à un objet en fonction du contexte d'exécution. Pour le code s'exécutant dans le contexte global, il s'agit de l'objet global (sur un navigateur Web, l'objet window). Par conséquent, la variable ci-dessus pourrait être appelée ceci ["anyName"], mais uniquement dans le code qui s'exécute dans le contexte global.

Cependant, l'utilisation du mot-clé this est très susceptible de prêter à confusion, en particulier dans les scripts qui incluent des objets javascript personnalisés où les méthodes (et constructeurs) de ces objets les utiliseraient pour faire référence à leurs propres instances d'objet.

Certaines implémentations javascript n'ont pas de propriété de l'objet global qui fait référence à l'objet global. Plutôt que d'essayer d'utiliser le mot-clé this pour accéder aux variables globales, il est possible de créer votre propre variable globale qui fait référence à l'objet global.

var myGlobal = this;

  • exécuté en tant que code en ligne au début d'un script affectera une référence à l'objet global (ceci dans ce contexte). Dès lors, toutes les variables globales peuvent être référencées avec une notation entre crochets comme: -

    myGlobal ["anyName"];

  • et attendez-vous à ce que myGlobal fasse référence à l'objet global à partir de n'importe quel contexte d'exécution.

6
TigerTiger