首頁  >  問答  >  主體

使用字串路徑遍歷JavaScript物件和陣列的巢狀結構

<p>我有一個像這樣的資料結構:</p> <pre class="brush:php;toolbar:false;">var someObject = { 'part1' : { '名': 'Part 1', 'size': '20', 'qty' : '50' }, 'part2' : { '名': 'Part 2', 'size': '15', 'qty' : '60' }, 'part3' : [ { '名': 'Part 3A', 'size': '10', 'qty' : '20' }, { '名': 'Part 3B', 'size': '5', 'qty' : '20' }, { '名': 'Part 3C', 'size': '7.5', 'qty' : '20' } ] };</pre> <p>我想使用以下變數來存取資料:</p> <pre class="brush:php;toolbar:false;">var part1name = "part1.name"; var part2quantity = "part2.qty"; var part3name1 = "part3[0].name";</pre> <p>part1name 應該填入 <code>someObject.part1.name</code> 的值,即 "Part 1"。 part2quantity 也是同樣的道理,填充為 60。 </p> <p>有沒有辦法用純 JavaScript 或 JQuery 來實現這個需求? </p>
P粉897881626P粉897881626432 天前391

全部回覆(2)我來回復

  • P粉720716934

    P粉7207169342023-08-16 19:39:27

    這現在可以透過lodash使用_.get(obj, property)來支援。請參閱https://lodash.com/docs#get

    #

    文檔中的範例:

    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'

    回覆
    0
  • P粉733166744

    P粉7331667442023-08-16 14:08:25

    我剛剛根據我已經擁有的一些類似程式碼創建了這個,它似乎可以工作:

    Object.byString = function(o, s) {
        s = s.replace(/\[(\w+)\]/g, '.'); // 将索引转换为属性
        s = s.replace(/^\./, '');           // 去掉前导点
        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;
    }

    用法:

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

    http://jsfiddle.net/alnitak/hEsys/上查看一個工作範例。

    編輯 有些人注意到,如果傳遞一個字串,其中最左邊的索引不對應物件中正確嵌套的條目,這段程式碼將拋出錯誤。這是一個有效的關注點,但我認為最好在呼叫時使用try / catch區塊來處理,而不是使這個函數靜默地返回undefined

    回覆
    0
  • 取消回覆