使用字串路徑遍歷JavaScript物件和陣列的巢狀結構
P粉897881626
2023-08-15 21:01:19
<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>
這現在可以透過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'我剛剛根據我已經擁有的一些類似程式碼創建了這個，它似乎可以工作：
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; }用法：
在http://jsfiddle.net/alnitak/hEsys/上查看一個工作範例。
編輯 有些人注意到，如果傳遞一個字串，其中最左邊的索引不對應物件中正確嵌套的條目，這段程式碼將拋出錯誤。這是一個有效的關注點，但我認為最好在呼叫時使用
try / catch區塊來處理，而不是使這個函數靜默地返回undefined。