Utilisation des [crochets] autour des variables JavaScript

Question

Nous avons reçu du code JavaScript d'une agence qui a l'air mal, mais qui fonctionne.

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

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

Cela fonctionne, mais les crochets semblent tout à fait superflu.

Y a-t-il un but à cette syntaxe ou est-ce techniquement incorrect, mais ignoré par le navigateur?

Answer 1

Les parenthèses carrées signifient 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 elle est un tableau, il est converti en chaîne, mais si vous supprimez les parenthèses, il prend moins de temps, car il ne dispose pas de construire un nouveau tableau et le convertir, mais cela fonctionne avec une chaîne simple.

Answer 2

Peut être .. ce

accès global variable avec la CROCHET Notation

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

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

, ravira produire une erreur si une tentative est faite pour affecter une valeur à lui, comme il sera traité comme un tableau littéral, si une tentative de lecture de celle-ci est faite d'une matrice d'éléments contenant la chaîne entre les crochets est retourné. Les variables globales sont normalement référencées par leur seul identifiant. Cela semble exclure les variables globales de la possibilité d'être référencées à l'aide d'une chaîne qui contenait leur nom d'identifiant ou une expression qui construisait, ou renvoyait, leur nom. Cependant, les variables globales javascript (et les noms de fonctions globaux d'ailleurs) sont les propriétés d'un objet global. Tout identificateur contenant une référence à l'objet global peut être utilisé à gauche des crochets pour former un accesseur de propriété faisant référence à une variable globale.

Dans un navigateur Web, l'objet global est la fenêtre (ou le cadre) dans laquelle le script est exécuté. 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 identificateur à gauche des crochets lorsque l'on se réfère à des variables globales. Donc, étant donné une variable globale définie comme: -

var anyName = 0; 

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

  fenêtre

  [ "de anyName"]

Comme pour toute autre utilisation de la notation entre crochets, la chaîne entre parenthèses peut être conservée 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 (à l'exception des constructeurs Object invoqués avec le nouveau mot clé) et le code inline en dehors de toutes les fonctions, peuvent également utiliser ce mot clé 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 exécuté 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 peut être appelée "[anyName"], mais uniquement dans le code qui s'exécute dans le contexte global. Toutefois, l'utilisation de ce mot clé 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 les constructeurs) de ces objets utiliseraient cela 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é comme un code en ligne au début d'un script attribuera une référence à l'objet global (ce qui, dans ce contexte). À partir de ce moment, toutes les variables globales peuvent être référencées sous la forme d'une notation carrée: -

  myGlobal ["anyName"];

• et attendez myGlobal pour faire référence à l'objet global à partir de n'importe quel contexte d'exécution.

Answer 3

b = "bar" + ["foo"] 

Ceci est syntaxiquement correct, mais en effet très, très, superflu. Voici comment cela fonctionne:

["foo"] 

JavaScript prend la chaîne « foo » et il se transforme en un tableau avec un élément, « foo »:

"bar" + ["foo"] 

lorsque + est utilisé, et l'un des opérandes est une chaîne, "barre" dans ce cas, JavaScript convertit le second en une chaîne. Puisque l'opérande deux est un tableau, la méthode Array.toString est appelée, qui, par défaut, renvoie 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"]) 

Answer 4

Je parie que quelqu'un a dit que personne: « Est-ce que la concaténation de chaîne avec un tableau, il est plus rapide »

Signification:

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 sera probablement exécuter une seule fois de toute façon. Premature_optimization = sqrt(all_evil)!

Et le pauvre gars a fait cette autre chose hors de propos ...

J'aime les gens.

Answer 5

Il est possible de construire une situation où celle-ci:

var some_variable = 'to=' + other_variable; 

et ceci:

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

produisent 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 rapport à sa valeur 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 tout autre chose.

La probabilité que cela a été fait est mince, j'imagine, mais il doit être mentionné pour l'exhaustivité.

Answer 6

Même sans changer le prototype de tableau il y a des différences:

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

Si other_variable est définie, la valeur de retour avec le tableau est de « = »,

Sans le tableau de la valeur de retour est ' à = indéfini '.

Answer 7

Juste au cas où quelqu'un arrive d'autre ici en essayant de savoir ce que une syntaxe bizarre/nouvelle impliquant [crochets] (vu dans quelqu'un d'autre Javascript) pourrait peut-être, comme je l'étais ...

De nos jours, avec ES6, nous avons aussi [] utilisé sur le côté gauche pour les tableaux de déstructuration, 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'infos 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 destructuration'.