JavaScript：轉換字符串並將其連接起來以動態創建對象屬性引用

Question

我正在創建一個API，其中服務器通過data屬性傳遞值，因此JS可以用來檢索信息...我的JS進行AJAX調用並返回JSON對象...

{
    "data": {
        "results": {
            "type": [
                {
                    "cars" : {
                        "brands": {
                            "ford" : {},
                            "honda" : {}
                        }
                    }
                }
            ]
        }
    }
}

為了獲得品牌，我只要輸入

let brand = data.result.type[0].cars.brands.ford

這樣，我可以獲得所需的結果，但是我需要通過連接路徑的2個部分來動態構建此路徑。 就像我在問題開頭所說的那樣，一些信息是通過data屬性傳遞的，信息是type[0].cars.brands.ford ...我需要在我的代碼data.result其加入data.result中。 我現在可以通過使用eval()來獲得所需的結果，像這樣

entry.querySelectorAll('[data-brand]').forEach((e) =>
    let brand = eval('data.result.' + e.dataset.brand);
)

我知道你們中的許多人都會說使用eval()不好，我對此非常了解，但是我只是找不到更好的方法來實現這一目標，還有另一個問題，那就是品牌，例如， nissan不在JSON上，我收到一個錯誤TypeError: Cannot read property 'nissan' of undefined ...在繼續代碼之前，可以通過檢查屬性是否存在來避免這種情況，但是我不知道該怎么做涉及eval()時進行這種測試。

所以...基本上，我需要的是一種動態構建屬性路徑的更好方法，可以對其進行測試以查看屬性是否存在...

提前致謝...

Answer 1

const brand = e.dataset.brand.split(".").reduce((obj,id) => obj[id] || {}, data.results);

這確實會支撐支架，所以：

type.0.whatever.keys

要為不存在的鍵（而不是空對象）返回undefined：

const brand = e.dataset.brand.split(".").reduce((obj,id) => (obj || {} )[id], data.results);

Answer 2

您可以先檢查data.result是否具有該屬性，然后才能設置變量品牌：

if(data.result.hasOwnProperty(e.dataset.brand)){
    let brand = data.result[e.dataset.brand];
}

Answer 3

您可以使用String＃match查找所有鍵，然后使用Array＃reduce迭代鍵，並從對象獲取鍵值：

 const obj = {"data":{"results":{"type":[{"cars":{"brands":{"ford":{"name":"ford"},"honda":{"name":"honda"}}}}]}}}; const brand = 'data.results.type[0].cars.brands.ford'; const getPathValue = (src, path) => path.match(/[^.\\[\\]]+/g) .reduce((p, k) => typeof p === 'object' ? p[k] : p, src); const brandOBj = getPathValue(obj, brand); console.log(brandOBj); 

Answer 4

您可以檢查lodash get方法，該方法允許您使用路徑訪問對象的值。

如果lodash對您來說太大了，請查看其實現。