Acessando objetos e arrays JavaScript aninhados pelo caminho da string

Eu tenho uma estrutura de dados como esta:

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }, {
            'name': 'Part 3B',
            'size': '5',
            'qty' : '20'
        }, {
            'name': 'Part 3C',
            'size': '7.5',
            'qty' : '20'
        }
    ]
};

E eu gostaria de acessar os dados usando estas variáveis:

var part1name = "part1.name";
var part2quantity = "part2.qty";
var part3name1 = "part3[0].name";

part1name deve ser preenchido com someObject.part1.nameo valor de "Part 1". A mesma coisa com part2quantity, que preencheu 60.

Existe alguma maneira de conseguir isso com javascript puro ou JQuery?

Acabei de fazer isso com base em um código semelhante que já tinha, parece funcionar:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Uso::

Object.byString(someObj, 'part3[0].name');

Veja uma demonstração de trabalho em http://jsfiddle.net/alnitak/hEsys/

EDIT Alguns notaram que esse código geraria um erro se passasse uma string em que os índices mais à esquerda não correspondam a uma entrada aninhada corretamente dentro do objeto. Esta é uma preocupação válida, mas o IMHO melhor endereçou com um try / catchbloco ao chamar, em vez de ter essa função silenciosamente retornar undefinedpara um índice inválido.

Esta é a solução que eu uso:

function resolve(path, obj=self, separator='.') {
    var properties = Array.isArray(path) ? path : path.split(separator)
    return properties.reduce((prev, curr) => prev && prev[curr], obj)
}

Exemplo de uso:

// accessing property path on global scope
resolve("document.body.style.width")
// or
resolve("style.width", document.body)

// accessing array indexes
// (someObject has been defined in the question)
resolve("part3.0.size", someObject) // returns '10'

// accessing non-existent properties
// returns undefined when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})

// accessing properties with unusual keys by changing the separator
var obj = { object: { 'a.property.name.with.periods': 42 } }
resolve('object->a.property.name.with.periods', obj, '->') // returns 42

// accessing properties with unusual keys by passing a property name array
resolve(['object', 'a.property.name.with.periods'], obj) // returns 42

Limitações:

• Não é possível usar colchetes ( []) para índices de matriz - embora a especificação de índices de matriz entre o token do separador (por exemplo, .) funcione corretamente, como mostrado acima.

Agora isso é suportado pelo lodash usando _.get(obj, property). Vejo https://lodash.com/docs#get

Exemplo dos documentos:

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// → 3

_.get(object, ['a', '0', 'b', 'c']);
// → 3

_.get(object, 'a.b.c', 'default');
// → 'default'

ES6 : Apenas uma linha no Vanila JS (ele retorna nulo se não encontrar, em vez de dar erro):

'path.string'.split('.').reduce((p,c)=>p&&p[c]||null, MyOBJ)

Ou exemplo:

'a.b.c'.split('.').reduce((p,c)=>p&&p[c]||null, {a:{b:{c:1}}})

Com operador de encadeamento opcional :

'a.b.c'.split('.').reduce((p,c)=>p?.[c]||null, {a:{b:{c:1}}})

Para uma função pronta para usar que também reconhece número falso, 0 e negativo e aceita valores padrão como parâmetro:

const resolvePath = (object, path, defaultValue) => path
   .split('.')
   .reduce((o, p) => o ? o[p] : defaultValue, object)

Exemplo a usar:

resolvePath(window,'document.body') => <body>
resolvePath(window,'document.body.xyz') => undefined
resolvePath(window,'document.body.xyz', null) => null
resolvePath(window,'document.body.xyz', 1) => 1

Bônus :

Para definir um caminho (solicitado por @ rob-gordon), você pode usar:

const setPath = (object, path, value) => path
   .split('.')
   .reduce((o,p,i) => o[p] = path.split('.').length === ++i ? value : o[p] || {}, object)

Exemplo:

let myVar = {}
setPath(myVar, 'a.b.c', 42) => 42
console.log(myVar) => {a: {b: {c: 42}}}

Matriz de acesso com [] :

const resolvePath = (object, path, defaultValue) => path
   .split(/[\.\[\]\'\"]/)
   .filter(p => p)
   .reduce((o, p) => o ? o[p] : defaultValue, object)

Exemplo:

const myVar = {a:{b:[{c:1}]}}
resolvePath(myVar,'a.b[0].c') => 1
resolvePath(myVar,'a["b"][\'0\'].c') => 1

Você teria que analisar a string você mesmo:

function getProperty(obj, prop) {
    var parts = prop.split('.');

    if (Array.isArray(parts)) {
        var last = parts.pop(),
        l = parts.length,
        i = 1,
        current = parts[0];

        while((obj = obj[current]) && i < l) {
            current = parts[i];
            i++;
        }

        if(obj) {
            return obj[last];
        }
    } else {
        throw 'parts is not valid array';
    }
}

Isso exigia que você também definisse índices de matriz com notação de ponto:

var part3name1 = "part3.0.name";

Isso facilita a análise.

DEMO

Também funciona para matrizes / matrizes dentro do objeto. Defensivo contra valores inválidos.

/**
 * Retrieve nested item from object/array
 * @param {Object|Array} obj
 * @param {String} path dot separated
 * @param {*} def default value ( if result undefined )
 * @returns {*}
 */
function path(obj, path, def){
    var i, len;

    for(i = 0,path = path.split('.'), len = path.length; i < len; i++){
        if(!obj || typeof obj !== 'object') return def;
        obj = obj[path[i]];
    }

    if(obj === undefined) return def;
    return obj;
}

//////////////////////////
//         TEST         //
//////////////////////////

var arr = [true, {'sp ace': true}, true]

var obj = {
  'sp ace': true,
  arr: arr,
  nested: {'dotted.str.ing': true},
  arr3: arr
}

shouldThrow(`path(obj, "arr.0")`);
shouldBeDefined(`path(obj, "arr[0]")`);
shouldBeEqualToNumber(`path(obj, "arr.length")`, 3);
shouldBeTrue(`path(obj, "sp ace")`);
shouldBeEqualToString(`path(obj, "none.existed.prop", "fallback")`, "fallback");
shouldBeTrue(`path(obj, "nested['dotted.str.ing'])`);

<script src="https://cdn.rawgit.com/coderek/e7b30bac7634a50ad8fd/raw/174b6634c8f57aa8aac0716c5b7b2a7098e03584/js-test.js"></script>

usando eval:

var part1name = eval("someObject.part1.name");

wrap para retornar indefinido por erro

function path(obj, path) {
    try {
        return eval("obj." + path);
    } catch(e) {
        return undefined;
    }
}

http://jsfiddle.net/shanimal/b3xTw/

Por favor, use o bom senso e cautela ao exercer o poder da avaliação. É um pouco como um sabre de luz, se você ativá-lo, há 90% de chance de cortar um membro. Não é para todos.

Você pode obter um valor de um membro profundo do objeto com notação de ponto sem nenhuma biblioteca JavaScript externa com o seguinte truque simples:

new Function('_', 'return _.' + path)(obj);

No seu caso para obter valor part1.namea partir de someObjectapenas fazer:

new Function('_', 'return _.part1.name')(someObject);

Aqui está uma demonstração simples de violino: https://jsfiddle.net/harishanchu/oq5esowf/

Provavelmente isso nunca verá a luz do dia ... mas aqui está mesmo assim.

1. Substituir [] sintaxe do suporte por.
2. Dividir em . personagem
3. Remover cadeias de caracteres em branco
4. Encontre o caminho (caso contrário undefined)

// "one liner" (ES6)

const deep_value = (obj, path) => 
  path
    .replace(/\[|\]\.?/g, '.')
    .split('.')
    .filter(s => s)
    .reduce((acc, val) => acc && acc[val], obj);
    
// ... and that's it.

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }
        // ...
    ]
};

console.log(deep_value(someObject, "part1.name"));               // Part 1
console.log(deep_value(someObject, "part2.qty"));                // 60
console.log(deep_value(someObject, "part3[0].name"));            // Part 3A

É um forro com lodash.

const deep = { l1: { l2: { l3: "Hello" } } };
const prop = "l1.l2.l3";
const val = _.reduce(prop.split('.'), function(result, value) { return result ? result[value] : undefined; }, deep);
// val === "Hello"

Ou melhor ainda ...

const val = _.get(deep, prop);

Ou versão ES6 com redução ...

const val = prop.split('.').reduce((r, val) => { return r ? r[val] : undefined; }, deep);

Plunkr

Eu acho que você está pedindo isso:

var part1name = someObject.part1.name;
var part2quantity = someObject.part2.qty;
var part3name1 =  someObject.part3[0].name;

Você pode estar perguntando isso:

var part1name = someObject["part1"]["name"];
var part2quantity = someObject["part2"]["qty"];
var part3name1 =  someObject["part3"][0]["name"];

Ambos irão funcionar

Ou talvez você esteja pedindo isso

var partName = "part1";
var nameStr = "name";

var part1name = someObject[partName][nameStr];

Finalmente, você pode estar pedindo por isso

var partName = "part1.name";

var partBits = partName.split(".");

var part1name = someObject[partBits[0]][partBits[1]];

Aqui, ofereço mais maneiras, que parecem mais rápidas em muitos aspectos:

Opção 1: Dividir a sequência. ou [ou] ou 'ou ", inverta, pule itens vazios.

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var parts = path.split(/\[|\]|\.|'|"/g).reverse(), name; // (why reverse? because it's usually faster to pop off the end of an array)
    while (parts.length) { name=parts.pop(); if (name) origin=origin[name]; }
    return origin;
}

Opção 2 (a mais rápida de todas, exceto eval): Varredura de caracteres de baixo nível (sem regex / split / etc, apenas uma varredura rápida de caracteres). Nota: Este não suporta aspas para índices.

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var c = '', pc, i = 0, n = path.length, name = '';
    if (n) while (i<=n) ((c = path[i++]) == '.' || c == '[' || c == ']' || c == void 0) ? (name?(origin = origin[name], name = ''):(pc=='.'||pc=='['||pc==']'&&c==']'?i=n+2:void 0),pc=c) : name += c;
    if (i==n+2) throw "Invalid path: "+path;
    return origin;
} // (around 1,000,000+/- ops/sec)

Opção 3: ( novo : opção 2 expandida para oferecer suporte a cotações - um pouco mais lenta, mas ainda rápida)

function getValue(path, origin) {
    if (origin === void 0 || origin === null) origin = self ? self : this;
    if (typeof path !== 'string') path = '' + path;
    var c, pc, i = 0, n = path.length, name = '', q;
    while (i<=n)
        ((c = path[i++]) == '.' || c == '[' || c == ']' || c == "'" || c == '"' || c == void 0) ? (c==q&&path[i]==']'?q='':q?name+=c:name?(origin?origin=origin[name]:i=n+2,name='') : (pc=='['&&(c=='"'||c=="'")?q=c:pc=='.'||pc=='['||pc==']'&&c==']'||pc=='"'||pc=="'"?i=n+2:void 0), pc=c) : name += c;
    if (i==n+2 || name) throw "Invalid path: "+path;
    return origin;
}

JSPerf: http://jsperf.com/ways-to-dereference-a-delimited-property-string/3

"eval (...)" ainda é rei (o que é desempenho). Se você possui caminhos de propriedade diretamente sob seu controle, não deve haver nenhum problema com o uso de 'eval' (especialmente se a velocidade for desejada). Se estiver puxando caminhos de propriedade "por cima do fio" ( na linha !? Lol: P), sim, use outra coisa para ser seguro. Apenas um idiota diria para nunca usar "eval", pois existem boas razões para usá-lo. Além disso, "é usado no analisador JSON de Doug Crockford ". Se a entrada for segura, não haverá problemas. Use a ferramenta certa para o trabalho certo, é isso.

Caso alguém esteja visitando esta pergunta em 2017 ou mais tarde e procurando uma maneira fácil de lembrar , aqui está uma publicação elaborada no blog Acessando Objetos Aninhados em JavaScript sem ser enganada por

Não é possível ler a propriedade 'foo' de indefinido erro

Acessar objetos aninhados usando matriz Reduzir

Vamos pegar esta estrutura de exemplo

const user = {
    id: 101,
    email: '[email protected]',
    personalInfo: {
        name: 'Jack',
        address: [{
            line1: 'westwish st',
            line2: 'washmasher',
            city: 'wallas',
            state: 'WX'
        }]
    }
}

Para poder acessar matrizes aninhadas, você pode escrever seu próprio utilitário de redução de matrizes.

const getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

// pass in your object structure as array elements
const name = getNestedObject(user, ['personalInfo', 'name']);

// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject(user, ['personalInfo', 'address', 0, 'city']);
// this will return the city from the first address item.

Há também um excelente tipo de manipulação de typy mínimo de biblioteca que faz tudo isso para você.

Com o typy, seu código ficará assim

const city = t(user, 'personalInfo.address[0].city').safeObject;

Disclaimer: Eu sou o autor deste pacote.

AngularJS

A abordagem de Speigg é muito organizada e limpa, embora eu tenha encontrado essa resposta ao procurar a solução de acessar as propriedades do escopo AngularJS $ pelo caminho da string e, com uma pequena modificação, ele faz o trabalho:

$scope.resolve = function( path, obj ) {
    return path.split('.').reduce( function( prev, curr ) {
        return prev[curr];
    }, obj || this );
}

Basta colocar esta função no seu controlador raiz e usá-la em qualquer escopo filho como este:

$scope.resolve( 'path.to.any.object.in.scope')

Ainda não encontrei um pacote para executar todas as operações com um caminho de string, então acabei escrevendo meu próprio pacote rápido que suporta insert (), get () (com retorno padrão), set () e remove ( ) operações.

Você pode usar notação de ponto, colchetes, índices numéricos, propriedades de números de sequência e teclas com caracteres que não sejam palavras. Uso simples abaixo:

> var jsocrud = require('jsocrud');

...

// Get (Read) ---
> var obj = {
>     foo: [
>         {
>             'key w/ non-word chars': 'bar'
>         }
>     ]
> };
undefined

> jsocrud.get(obj, '.foo[0]["key w/ non-word chars"]');
'bar'

https://www.npmjs.com/package/jsocrud

https://github.com/vertical-knowledge/jsocrud

/**
 * Access a deep value inside a object 
 * Works by passing a path like "foo.bar", also works with nested arrays like "foo[0][1].baz"
 * @author Victor B. https://gist.github.com/victornpb/4c7882c1b9d36292308e
 * Unit tests: http://jsfiddle.net/Victornpb/0u1qygrh/
 */
function getDeepVal(obj, path) {
    if (typeof obj === "undefined" || obj === null) return;
    path = path.split(/[\.\[\]\"\']{1,2}/);
    for (var i = 0, l = path.length; i < l; i++) {
        if (path[i] === "") continue;
        obj = obj[path[i]];
        if (typeof obj === "undefined" || obj === null) return;
    }
    return obj;
}

Funciona com

getDeepVal(obj,'foo.bar')
getDeepVal(obj,'foo.1.bar')
getDeepVal(obj,'foo[0].baz')
getDeepVal(obj,'foo[1][2]')
getDeepVal(obj,"foo['bar'].baz")
getDeepVal(obj,"foo['bar']['baz']")
getDeepVal(obj,"foo.bar.0.baz[1]['2']['w'].aaa[\"f\"].bb")

Função simples, permitindo um caminho de string ou array.

function get(obj, path) {
  if(typeof path === 'string') path = path.split('.');

  if(path.length === 0) return obj;
  return get(obj[path[0]], path.slice(1));
}

const obj = {a: {b: {c: 'foo'}}};

console.log(get(obj, 'a.b.c')); //foo

OU

console.log(get(obj, ['a', 'b', 'c'])); //foo

Agora, existe um npmmódulo para fazer isso: https://github.com/erictrinh/safe-access

Exemplo de uso:

var access = require('safe-access');
access(very, 'nested.property.and.array[0]');

Embora reduzir seja bom, fico surpreso que ninguém tenha usado cada um:

function valueForKeyPath(obj, path){
        const keys = path.split('.');
        keys.forEach((key)=> obj = obj[key]);
        return obj;
    };

Teste

Apenas tive a mesma pergunta recentemente e utilizou com sucesso https://npmjs.org/package/tea-properties, que tambémset aninhava objetos / matrizes:

pegue:

var o = {
  prop: {
    arr: [
      {foo: 'bar'}
    ]
  }
};

var properties = require('tea-properties');
var value = properties.get(o, 'prop.arr[0].foo');

assert(value, 'bar'); // true

conjunto:

var o = {};

var properties = require('tea-properties');
properties.set(o, 'prop.arr[0].foo', 'bar');

assert(o.prop.arr[0].foo, 'bar'); // true

Inspirado na resposta de @ webjay: https://stackoverflow.com/a/46008856/4110122

Eu criei essa função que você pode usar para obter / definir / desabilitar qualquer valor no objeto

function Object_Manager(obj, Path, value, Action) 
{
    try
    {
        if(Array.isArray(Path) == false)
        {
            Path = [Path];
        }

        let level = 0;
        var Return_Value;
        Path.reduce((a, b)=>{
            level++;
            if (level === Path.length)
            {
                if(Action === 'Set')
                {
                    a[b] = value;
                    return value;
                }
                else if(Action === 'Get')
                {
                    Return_Value = a[b];
                }
                else if(Action === 'Unset')
                {
                    delete a[b];
                }
            } 
            else 
            {
                return a[b];
            }
        }, obj);
        return Return_Value;
    }

    catch(err)
    {
        console.error(err);
        return obj;
    }
}

Para usá-lo:

 // Set
 Object_Manager(Obj,[Level1,Level2,Level3],New_Value, 'Set');

 // Get
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Get');

 // Unset
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Unset');

Estou desenvolvendo uma loja on-line com o React. Tentei alterar os valores no objeto de estado copiado para atualizar o estado original com ele no envio. Os exemplos acima não funcionaram para mim, porque a maioria deles muda a estrutura do objeto copiado. Encontrei um exemplo prático da função para acessar e alterar valores das propriedades profundas do objeto aninhado: https://lowrey.me/create-an-object-by-path-in-javascript-2/ Aqui está:

const createPath = (obj, path, value = null) => {
  path = typeof path === 'string' ? path.split('.') : path;
  let current = obj;
  while (path.length > 1) {
    const [head, ...tail] = path;
    path = tail;
    if (current[head] === undefined) {
      current[head] = {};
    }
    current = current[head];
  }
  current[path[0]] = value;
  return obj;
};

Com base na resposta de Alnitak .

Embrulhei o polyfill em um cheque e reduzi a função a uma única redução encadeada.

if (Object.byPath === undefined) {
  Object.byPath = (obj, path) => path
    .replace(/\[(\w+)\]/g, '.$1')
    .replace(/^\./, '')
    .split(/\./g)
    .reduce((ref, key) => key in ref ? ref[key] : ref, obj)
}

const data = {
  foo: {
    bar: [{
      baz: 1
    }]
  }
}

console.log(Object.byPath(data, 'foo.bar[0].baz'))

Se você precisar acessar diferentes chaves aninhadas sem conhecê-las no momento da codificação (será trivial tratá-las), poderá usar o acessador de notação de matriz:

var part1name = someObject['part1']['name'];
var part2quantity = someObject['part2']['qty'];
var part3name1 =  someObject['part3'][0]['name'];

Eles são equivalentes ao acessador de notação de ponto e podem variar em tempo de execução, por exemplo:

var part = 'part1';
var property = 'name';

var part1name = someObject[part][property];

é equivalente a

var part1name = someObject['part1']['name'];

ou

var part1name = someObject.part1.name;

Espero que este endereço sua pergunta ...

EDITAR

Não usarei uma string para manter uma espécie de consulta xpath para acessar um valor de objeto. Como você precisa chamar uma função para analisar a consulta e recuperar o valor, eu seguiria outro caminho (não:

var part1name = function(){ return this.part1.name; }
var part2quantity = function() { return this['part2']['qty']; }
var part3name1 =  function() { return this.part3[0]['name'];}

// usage: part1name.apply(someObject);

ou, se você estiver preocupado com o método apply

var part1name = function(obj){ return obj.part1.name; }
var part2quantity = function(obj) { return obj['part2']['qty']; }
var part3name1 =  function(obj) { return obj.part3[0]['name'];}

// usage: part1name(someObject);

As funções são mais curtas e claras, o intérprete verifica se há erros de sintaxe e assim por diante.

A propósito, acho que uma tarefa simples feita no momento certo será suficiente ...

As soluções aqui são apenas para acessar as chaves profundamente aninhadas. Eu precisava de um para acessar, adicionar, modificar e excluir as chaves. Isto é o que eu vim com:

var deepAccessObject = function(object, path_to_key, type_of_function, value){
    switch(type_of_function){
        //Add key/modify key
        case 0: 
            if(path_to_key.length === 1){
                if(value)
                    object[path_to_key[0]] = value;
                return object[path_to_key[0]];
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    object[path_to_key[0]] = {};
            }
            break;
        //delete key
        case 1:
            if(path_to_key.length === 1){
                delete object[path_to_key[0]];
                return true;
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    return false;
            }
            break;
        default:
            console.log("Wrong type of function");
    }
};

• path_to_key: caminho em uma matriz. Você pode substituí-lo pelo seu string_path.split(".").
• type_of_function: 0 para acessar (não passe nenhum valor para value), 0 para adicionar e modificar. 1 para excluir.

Partindo da resposta de Alnitak:

if(!Object.prototype.byString){
  //NEW byString which can update values
Object.prototype.byString = function(s, v, o) {
  var _o = o || this;
      s = s.replace(/\[(\w+)\]/g, '.$1'); // CONVERT INDEXES TO PROPERTIES
      s = s.replace(/^\./, ''); // STRIP A LEADING DOT
      var a = s.split('.'); //ARRAY OF STRINGS SPLIT BY '.'
      for (var i = 0; i < a.length; ++i) {//LOOP OVER ARRAY OF STRINGS
          var k = a[i];
          if (k in _o) {//LOOP THROUGH OBJECT KEYS
              if(_o.hasOwnProperty(k)){//USE ONLY KEYS WE CREATED
                if(v !== undefined){//IF WE HAVE A NEW VALUE PARAM
                  if(i === a.length -1){//IF IT'S THE LAST IN THE ARRAY
                    _o[k] = v;
                  }
                }
                _o = _o[k];//NO NEW VALUE SO JUST RETURN THE CURRENT VALUE
              }
          } else {
              return;
          }
      }
      return _o;
  };

}

Isso permite que você defina um valor também!

Eu criei um pacote npm e github com isso também

Em vez de uma string, uma matriz pode ser usada para endereçar objetos e matrizes aninhados, por exemplo: ["my_field", "another_field", 0, "last_field", 10]

Aqui está um exemplo que alteraria um campo com base nessa representação de matriz. Estou usando algo parecido no react.js para campos de entrada controlada que alteram o estado das estruturas aninhadas.

let state = {
        test: "test_value",
        nested: {
            level1: "level1 value"
        },
        arr: [1, 2, 3],
        nested_arr: {
            arr: ["buh", "bah", "foo"]
        }
    }

function handleChange(value, fields) {
    let update_field = state;
    for(var i = 0; i < fields.length - 1; i++){
        update_field = update_field[fields[i]];
    }
    update_field[fields[fields.length-1]] = value;
}

handleChange("update", ["test"]);
handleChange("update_nested", ["nested","level1"]);
handleChange(100, ["arr",0]);
handleChange('changed_foo', ["nested_arr", "arr", 3]);
console.log(state);

Com base em uma resposta anterior, criei uma função que também pode lidar com colchetes. Mas não há pontos dentro deles devido à divisão.

function get(obj, str) {
  return str.split(/\.|\[/g).map(function(crumb) {
    return crumb.replace(/\]$/, '').trim().replace(/^(["'])((?:(?!\1)[^\\]|\\.)*?)\1$/, (match, quote, str) => str.replace(/\\(\\)?/g, "$1"));
  }).reduce(function(obj, prop) {
    return obj ? obj[prop] : undefined;
  }, obj);
}

Trabalhando com Underscore's propertyou propertyOf:

var test = {
  foo: {
    bar: {
      baz: 'hello'
    }
  }
}
var string = 'foo.bar.baz';


// document.write(_.propertyOf(test)(string.split('.')))

document.write(_.property(string.split('.'))(test));

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

Boa sorte...