Primeiro temos que esclarecer um detalhe: a notação de colchetes em JavaScript não necessariamente está acessando/criando índices de um array. Na verdade, neste caso você está acessando/criando propriedades de um objeto.
Basicamente, data['teste']
é o mesmo que data.teste
(leia aqui e aqui para mais detalhes).
E portanto data['teste']['teste2']['teste3']
é o mesmo que data.teste.teste2.teste3
. Mas como neste caso nenhuma das propriedades existe, então data.teste
é undefined
(pois ao tentar acessar uma propriedade inexistente de um objeto, o resultado é undefined
), e ao tentar acessar a propriedade teste2
de undefined
, dá erro.
Então o jeito é ir criando os objetos um a um, e atribuir as propriedades em cada nível. Como é um processo meio tedioso e repetitivo, você pode criar uma função que recebe o objeto, os nomes das propriedades e o valor a ser setado no último nível. Algo assim:
function createNestedProps(obj, props, value) {
for (var ptr = obj, i = 0; i < props.length; i++) {
ptr = (ptr[props[i]] = (i === props.length - 1 ? value : {}));
}
}
var data = {};
createNestedProps(data, ['teste', 'teste2', 'teste3'], 'valor');
console.log(data);
Basicamente, ele cria um novo objeto para cada propriedade, exceto para o último, que possuirá o valor indicado.
O resultado é:
{
"teste": {
"teste2": {
"teste3": "valor"
}
}
}
Repare que não é um array e sim um objeto (está delimitado por {}
e não por []
). Afinal, estamos tratando de propriedades, não de índices numéricos. PHP não faz tal distinção, pois seus arrays podem ter índices numéricos e textuais, mas em JavaScript há esta diferença.
Na verdade é um pouco mais complicado que isso, mas aí já foge demais do escopo da pergunta. Em todo caso, pode ler aqui, aqui, aqui e aqui. Ver também a documentação da linguagem sobre arrays:
"Arrays cannot use strings as element indexes but must use integers. Setting or accessing via non-integers using bracket notation (or dot notation) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's object property collection."
Vale lembrar que o código acima sobrescreve as propriedades intermediárias, caso elas existam.
Mas se a ideia é mantê-las (caso existam), e só sobrescrever a última, basta mudar para:
function createNestedProps(obj, props, value) {
for (var ptr = obj, i = 0; i < props.length; i++) {
// se é a última, sobrescreve
if (i === props.length - 1) {
ptr[props[i]] = value;
} else if (! ptr.hasOwnProperty(props[i])) {
// se a propriedade não existe, cria
ptr[props[i]] = {};
}
// passa para o objeto no próximo nível
ptr = ptr[props[i]];
}
}
// "teste" já existe e não será sobrescrito
var data = { teste: { a: 1 } };
createNestedProps(data, ['teste', 'teste2', 'teste3'], 'valor');
console.log(data);
Assim, a propriedade teste
(que já existe) não é sobrescrita, e em vez disso teste2
é adicionada a ela. O resultado é:
{
"teste": {
"a": 1,
"teste2": {
"teste3": "valor"
}
}
}
data['teste']['teste2']['teste3']
é comumente usada para acessar/alterar propriedades aninhadas de um objeto que não é necessariamente um array. Isso seria o mesmo que acessar/modificar uma propriedade aninhada de um objeto desta forma:data.teste.teste2.teste3
. No JS, pense na seguinte forma, ele começa a atribuir valores da direita para a esquerda (nesse seu exemplo), logo como o indiceteste3
não existe, ele vai gerar esse erro, o mesmo vale para oteste2
.data['teste'] = []; data['teste']['teste2'] = []; data['teste']['teste2']['teste3'] = 'valor';
, mas não acho muito elegante.