As vírgulas finais em matrizes e objetos fazem parte das especificações?

215

As vírgulas finais são padrão no JavaScript ou a maioria dos navegadores como o Chrome e o Firefox os toleram?

Eu pensei que eles eram padrão, mas o IE8 vomitou depois de encontrar um - é claro que o IE não suporta algo dificilmente significa que não é padrão.

Aqui está um exemplo do que quero dizer (após o último elemento da matriz de livros):

var viewModel = {
    books: ko.observableArray([
        { title: "..", display: function() { return ".."; } },
        { title: "..", display: function() { return ".."; } },
        { title: "..", display: function() { return ".."; } }, // <--right there
    ]),
    currentTemplate: ko.observable("bookTemplate1"),
    displayTemplate: function() { return viewModel.currentTemplate(); }
};
Adam Rackis
fonte
Achei isso no outro dia. Sendo um programador C # eu estava tão acostumado a eles sendo permitido ...
CaffGeek
5
Eu lidei com isso há algumas semanas. Imagine tentar encontrar isso no IE7 sem nenhuma das ferramentas de depuração mais recentes ...
Ryan Miller
4
Isso me fez feliz quando descobri linguagens como JS, Ruby, C # suportam esta-marcas cópia colando dados de teste fácil ... me deixou com raiva quando eu percebi IE suga o mesmo este ...
Adam Rackis
Gostaria de saber se espaço em branco significativo em vez de vírgulas (como o CoffeeScript) causaria alguma ambiguidade sintática?
Andy

Respostas:

209

Especificações: ECMAScript 5 e ECMAScript 3


Seção 11.1.5 na especificação ECMAScript 5:

ObjectLiteral :
    { }
    { PropertyNameAndValueList }
    { PropertyNameAndValueList , }

Então, sim, isso faz parte da especificação.

Atualização: Aparentemente, isso é novo no ES5. No ES3 (página 41), a definição era apenas:

ObjectLiteral :
    { }
    { PropertyNameAndValueList }

Para literais de matrizes ( Seção 11.1.4 ), é ainda mais interessante ( atualização: isso já existia no ES3):

ArrayLiteral :
    [ Elisionopt ]
    [ ElementList ]
    [ ElementList , Elision_opt ]

(onde Elision_optestá Elision opt , o que significa que o Elision é opcional)

Elision é definido como

Elision :
    ,
    Elision ,

Então, uma matriz literal como

var arr = [1,2,,,,];

é perfeitamente legal. Isso cria uma matriz com dois elementos, mas define o comprimento da matriz como 2 + 3 = 5.

Não espere muito do IE (antes do IE9) ...

Felix Kling
fonte
1
Como perguntei ao EndoPhage, você sabe se isso também era padrão no ES3? Eu não consigo encontrar a especificação para isso
Adam Rackis
1
Aparentemente, a vírgula à direita nos literais do objeto não estava na especificação do ES3. Mas a definição para matrizes é a mesma.
Felix Kling
Bem, foram os elementos do array com os quais me deparei, então acho que não há desculpa para a MS, não importa como você a corte. Obrigado novamente
Adam Rackis
Vergonha no Micro $ oft Internet Explorer
pylover
91

Apenas um lembrete / aviso rápido de que essa é uma das áreas em que o padrão JavaScript / ECMAScript e JSON diferem; vírgulas finais são válidas em JS, mas não são válidas em JSON.

Joey Sabey
fonte
1
Mas, novamente, se o superconjunto estiver em uma "Mudança de Coração", "Você (ainda) poderá ser amado" se apenas pela primeira vez se ajustar?
Lukas Bünger
52

O que é ainda mais engraçado, o IE7 dá

[1,].length  --> 2

enquanto Firefox e Chrome

[1,].length  --> 1
seeg
fonte
16
Mas [1,,].length2. Sentido : os navegadores não fazem nada.
David Titarenco
84
Faz todo o sentido, a especificação diz que uma vírgula à direita (nota: singular) não é adicionada ao comprimento de uma matriz. Chrome e Firefox implementaram o ES5 corretamente.
JaredMcAteer
7
Quando há duas vírgulas finais (plural), apenas uma adiciona ao comprimento da matriz, portanto, parece mais preciso dizer que a vírgula final final é ignorada do que dizer que uma única vírgula final é ignorada.
Iconoclast
4

Você pode encontrar a especificação para javascript (também conhecido como ECMA Script) aqui . Você pode encontrar a definição relevante para matrizes na página 63 e, como Felix observou, a definição do objeto algumas páginas mais tarde na página 65.

Embora essa especificação diga que é bom ter um rastro ,, não sei se isso seria verdade olhando para trás algumas versões. Como você notou, o IE8- se estraga se você deixar uma vírgula à direita, mas o Chrome e o FF lidam bem com isso.

Endófago
fonte
De cabeça para baixo, isso fazia parte do padrão ES3? Eu não consigo encontrar a especificação ES3
Adam Rackis
1
@ Adam: Estou tentando encontrá-lo ... Dadas as datas de lançamento (o ES3 foi publicado em 1999, o ES4 foi abandonado e o ES5 foi publicado apenas em 2009), faria sentido que estivesse no padrão do ES3. Ou pode ser que a MS tenha estragado mais uma coisa.
Endofago
Parece que a Microsoft estragou mais uma coisa, dada a resposta de Felix. Mais uma vez obrigado pela sua
Adam Rackis
2

Vamos quebrar isso.

As vírgulas finais são padrão em JavaScript?

Sim. A partir da especificação do ECMAScript 5 (também parte do guia de estilo do Google e Airbnb)

A maioria dos navegadores como o Chrome e o Firefox os tolera?

Esta é uma pergunta de suporte do ECMAScript 5.

Transpilers como Babel removerão a vírgula à direita adicional no código transpilado, o que significa que você não precisa se preocupar com o problema da vírgula à direita nos navegadores herdados.

Então, isso significa:

var heroes = [
  'Batman',
  'Superman',
];
// heroes.length === 2 (not 3)

Então, é provável que, se você estiver usando qualquer coisa do ES5 ou superior, não precise se preocupar com isso.

Eu pensei que eles eram padrão, mas o IE8 vomitou depois de encontrar um - é claro que o IE não suporta algo dificilmente significa que não é padrão.

Novamente, essa é uma pergunta de suporte do ECMAScript 5. O IE8 não suporta ECMAScript 5 (apenas IE9 e superior)

Eu recomendo dar uma olhada na Documentação descontinuada ES5 do Airbnb https://github.com/airbnb/javascript/blob/es5-deprecated/es5/README.md#commas

Eu também recomendaria o Docs do Mozilla:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

garrettmac
fonte
1

No Chrome 52:

[1,].length --> 1
[1,2,].length --> 2
[].length --> 0 
[,].length --> 1    <<<<=== OUHHHHH !!!!

Só não gosto de vírgulas. As pessoas costumam usá-los em projetos de código aberto para evitar apagar a linha escrita por outro commiter. Veja a mesma pergunta em Python: https://stackoverflow.com/a/11597911/968988

Nicolas Zozol
fonte
13
Por que 'OUHHHHH'? O que mais você esperava lá, se não 1? Você claramente 'tem um elemento' antes dessa vírgula, exatamente como [1,] (que é length: 1).
Fygo 06/12/19
Por que 'OUHHHHH'? porque não espero nada de um código que não entendo sem ler o RFC. E sim, funciona exatamente como [1,]: há claramente algo antes da vírgula. Mas [,]há tanto antes e depois da vírgula. Então, porque eu não entendo [,]sozinho, não acho que usar [1,]é uma boa ideia.
Nicolas Zozol 16/09/19