Mengakses objek JavaScript yang tersarang dan array melalui jalur string

Saya memiliki struktur data seperti ini:

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'
        }
    ]
};

Dan saya ingin mengakses data menggunakan variabel ini:

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

part1name harus diisi dengan someObject.part1.namenilai, yaitu "Bagian 1". Hal yang sama dengan part2quantity yang diisi dengan 60.

Apakah ada cara untuk mencapai ini dengan javascript murni atau JQuery?

Saya baru saja membuat ini berdasarkan pada beberapa kode serupa yang sudah saya miliki, tampaknya berfungsi:

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;
}

Pemakaian::

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

Lihat demo yang berfungsi di http://jsfiddle.net/alnitak/hEsys/

EDIT beberapa telah memperhatikan bahwa kode ini akan menimbulkan kesalahan jika melewati string di mana indeks paling kiri tidak sesuai dengan entri bersarang dengan benar dalam objek. Ini adalah masalah yang valid, tetapi IMHO paling baik diatasi dengan try / catchblok saat memanggil, daripada meminta fungsi ini diam-diam mengembalikan undefinedindeks yang tidak valid.

Ini adalah solusi yang saya gunakan:

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

Contoh penggunaan:

// 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

Keterbatasan:

• Tidak dapat menggunakan tanda kurung ( []) untuk indeks array — meskipun menentukan indeks array antara token pemisah (misalnya, .) berfungsi dengan baik seperti yang ditunjukkan di atas.

Ini sekarang didukung oleh penggunaan Lodash _.get(obj, property). Lihat https://lodash.com/docs#get

Contoh dari dokumen:

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 : Hanya satu baris di Vanila JS (ini mengembalikan nol jika tidak menemukan alih-alih memberikan kesalahan):

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

Atau contoh:

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

Dengan operator rantai opsional :

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

Untuk fungsi siap pakai yang juga mengenali angka false, 0 dan negatif dan menerima nilai default sebagai parameter:

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

Contoh untuk digunakan:

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

Bonus :

Untuk mengatur jalur (Diminta oleh @ rob-gordon) Anda dapat menggunakan:

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

Contoh:

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

Array akses dengan [] :

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

Contoh:

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

Anda harus mengurai senar sendiri:

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';
    }
}

Ini mengharuskan Anda juga mendefinisikan indeks array dengan notasi titik:

var part3name1 = "part3.0.name";

Itu membuat parsing lebih mudah.

DEMO

Berfungsi untuk array / array di dalam objek juga. Bertahan terhadap nilai yang tidak valid.

/**
 * 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>

menggunakan eval:

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

bungkus untuk mengembalikan yang tidak ditentukan pada kesalahan

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

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

Silakan gunakan akal sehat dan kehati-hatian ketika menggunakan kekuatan eval. Ini agak seperti pedang cahaya, jika Anda menyalakannya ada kemungkinan 90% Anda akan memutuskan anggota tubuh. Ini bukan untuk semua orang.

Anda dapat mengatur untuk mendapatkan nilai anggota objek yang dalam dengan notasi titik tanpa pustaka JavaScript eksternal dengan trik sederhana berikut ini:

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

Dalam kasus Anda untuk memperoleh nilai part1.namedari someObjecthanya melakukan:

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

Berikut ini adalah demo biola sederhana: https://jsfiddle.net/harishanchu/oq5esowf/

Ini mungkin tidak akan pernah melihat cahaya hari ... tapi ini dia.

1. Menggantikan [] sintaks braket dengan.
2. Berpisah pada .karakter
3. Hapus string kosong
4. Temukan jalurnya (jika tidak 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

Ini satu liner dengan 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"

Atau bahkan lebih baik ...

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

Atau versi ES6 dengan / ...

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

Plunkr

Saya pikir Anda meminta ini:

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

Anda bisa meminta ini:

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

Keduanya akan bekerja

Atau mungkin Anda meminta ini

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

var part1name = someObject[partName][nameStr];

Akhirnya Anda bisa meminta ini

var partName = "part1.name";

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

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

Di sini saya menawarkan lebih banyak cara, yang tampaknya lebih cepat dalam banyak hal:

Opsi 1: Split string aktif. atau [atau] atau 'atau ", balikkan, lewati item kosong.

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;
}

Opsi 2 (kecuali yang tercepat eval): Pemindaian karakter tingkat rendah (tanpa regex / split / dll, hanya pemindaian karakter cepat). Catatan: Yang ini tidak mendukung kutipan untuk indeks.

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)

Opsi 3: ( baru : opsi 2 diperluas untuk mendukung kutipan - sedikit lebih lambat, tetapi masih cepat)

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 (...)" masih tetap raja (kinerja bijaksana yaitu). Jika Anda memiliki jalur properti langsung di bawah kendali Anda, seharusnya tidak ada masalah dengan menggunakan 'eval' (terutama jika kecepatan diinginkan). Jika menarik jalur properti "di atas kabel" ( di telepon !? Lol: P), maka ya, gunakan sesuatu yang lain agar aman. Hanya seorang idiot yang akan mengatakan untuk tidak pernah menggunakan "eval" sama sekali, karena ADA alasan bagus untuk menggunakannya. Juga, "Ini digunakan dalam parser JSON Doug Crockford ." Jika inputnya aman, maka tidak ada masalah sama sekali. Gunakan alat yang tepat untuk pekerjaan yang tepat, itu saja.

Untuk jaga-jaga, siapa pun yang mengunjungi pertanyaan ini pada 2017 atau lebih baru dan mencari cara yang mudah diingat , berikut ini adalah posting blog yang rumit tentang Mengakses Objek Bersarang di JavaScript tanpa dikacaukan oleh

Tidak dapat membaca properti 'foo' yang tidak terdefinisi kesalahan yang

Akses Objek Bersarang Menggunakan Array Reduce

Mari kita ambil contoh struktur ini

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

Untuk dapat mengakses array bersarang, Anda dapat menulis util pengurangan array Anda sendiri.

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.

Ada juga jenis penanganan perpustakaan typy yang sangat baik yang yang melakukan semua ini untuk Anda.

Dengan typy, kode Anda akan terlihat seperti ini

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

Penafian: Saya pembuat paket ini.

AngularJS

Pendekatan Speigg sangat rapi dan bersih, meskipun saya menemukan balasan ini ketika mencari solusi untuk mengakses properti lingkup AngularJS $ melalui jalur string dan dengan sedikit modifikasi ia bekerja:

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

Cukup tempatkan fungsi ini di pengontrol root Anda dan gunakan setiap lingkup anak seperti ini:

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

Saya belum menemukan paket untuk melakukan semua operasi dengan jalur string, jadi saya akhirnya menulis paket kecil cepat saya sendiri yang mendukung insert (), get () (dengan pengembalian default), set () dan hapus ( ) operasi.

Anda dapat menggunakan notasi titik, tanda kurung, indeks angka, properti nomor string, dan kunci dengan karakter non-kata. Penggunaan sederhana di bawah ini:

> 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;
}

Bekerja dengan

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")

Fungsi sederhana, memungkinkan untuk jalur string atau 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

ATAU

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

Ada npmmodul sekarang untuk melakukan ini: https://github.com/erictrinh/safe-access

Contoh penggunaan:

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

Meskipun mengurangi baik, saya terkejut tidak ada yang menggunakan forEach:

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

Uji

Baru saja memiliki pertanyaan yang sama baru-baru ini dan berhasil menggunakan https://npmjs.org/package/tea-properties yang juga setmenyarangkan objek / array:

Dapatkan:

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

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

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

set:

var o = {};

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

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

Terinspirasi oleh jawaban webjay: https://stackoverflow.com/a/46008856/4110122

Saya membuat fungsi ini yang dapat Anda gunakan untuk Get / Set / Unset nilai apa pun di objek

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;
    }
}

Untuk menggunakannya:

 // 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');

Saya mengembangkan toko online dengan React. Saya mencoba untuk mengubah nilai dalam objek keadaan disalin untuk memperbarui keadaan asli dengan itu pada saat mengirimkan. Contoh di atas tidak berhasil untuk saya, karena kebanyakan dari mereka bermutasi struktur objek yang disalin. Saya menemukan contoh kerja dari fungsi untuk mengakses dan mengubah nilai properti objek bersarang mendalam: https://lowrey.me/create-an-object-by-path-in-javascript-2/ Ini dia:

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;
};

Berdasarkan jawaban Alnitak .

Saya membungkus polyfill dalam cek, dan mengurangi fungsinya menjadi reduksi berantai tunggal.

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'))

Jika Anda perlu mengakses kunci bersarang yang berbeda tanpa mengetahuinya pada waktu pengkodean (itu akan sepele untuk mengatasinya) Anda dapat menggunakan accessor notasi array:

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

Mereka setara dengan accessor notasi titik dan dapat bervariasi saat runtime, misalnya:

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

var part1name = someObject[part][property];

setara dengan

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

atau

var part1name = someObject.part1.name;

Saya harap ini menjawab pertanyaan Anda ...

EDIT

Saya tidak akan menggunakan string untuk mempertahankan semacam permintaan xpath untuk mengakses nilai objek. Karena Anda harus memanggil fungsi untuk mengurai kueri dan mengambil nilai, saya akan mengikuti jalur lain (tidak:

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);

atau, jika Anda tidak nyaman dengan metode yang berlaku

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);

Fungsinya lebih pendek, lebih jelas, penerjemah memeriksa Anda untuk kesalahan sintaks dan sebagainya.

Ngomong-ngomong, saya merasa bahwa tugas sederhana yang dibuat pada waktu yang tepat akan cukup ...

Solusi di sini hanya untuk mengakses kunci yang sangat bersarang. Saya membutuhkan satu untuk mengakses, menambahkan, memodifikasi dan menghapus kunci. Inilah yang saya pikirkan:

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: path dalam sebuah array. Anda dapat menggantinya dengan string_path.split(".").
• type_of_function: 0 untuk mengakses (jangan meneruskan nilai apa pun ke value), 0 untuk menambah dan memodifikasi. 1 untuk dihapus.

Membangun dari jawaban 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;
  };

}

Ini memungkinkan Anda untuk menetapkan nilai juga!

Saya telah membuat paket npm dan github dengan ini juga

Alih-alih sebuah string, sebuah array dapat digunakan untuk memberi alamat objek dan array seperti: ["my_field", "another_field", 0, "last_field", 10]

Berikut adalah contoh yang akan mengubah bidang berdasarkan representasi array ini. Saya menggunakan sesuatu seperti itu di react.js untuk bidang input terkontrol yang mengubah keadaan struktur bersarang.

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);

Berdasarkan jawaban sebelumnya, saya telah membuat fungsi yang juga dapat menangani tanda kurung. Tapi tidak ada titik di dalamnya karena perpecahan.

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);
}

Bekerja dengan Underscore's propertyatau 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>

Semoga berhasil...