將對象的層次結構作爲參數傳遞給它的父函數

Question

我在名爲tpl()的函數內部有一個名爲html的對象。

html = { 
    intro: ['intro', 'html'], 
    common: { header: ['common', 'header', 'html'] }, 
    more:{ header: { link: ['hello', 'world'] } } 
}; 

我試圖通過將它的層次結構作爲參數傳遞給tpl()訪問html的價值觀;

我將字符串common.header作爲參數傳遞，以獲取內部對象的內容。

【示例】：

​​

的問題是，當我需要針對更深層嵌套對象：

var b = tpl('more.header.link'); // how can i make this work ? 

---

這是我寫的功能，不過，我想使其更具動感（可以使用更深的物體）。

var tpl = function(path){ 

    if(!path){ return false; } 

    var that = this; 

    that.html = { 
    intro: ['intro', 'html'], 
    common: { header: ['common', 'header', 'html'] }, 
    more: { header: { link: ['hello', 'world'] } } 
    }; 

    path = path.split('.'); 

    return (!!path[1] ? that.html[path[0]][path[1]] : that.html[path[0]]).join(''); 

    /* 
    // Here is where I am stuck 
    for(var i = 0; i < path.length; i++){ 
    if(path[i][ path[i+1] ]){} 
    } 
    */ 

}; 

Answer 1

如果我正確理解你的問題，那麼如何保持一個指向當前子結構的指針？就像這樣：

for(var tmp = that.html, i = 0; i < path.length; i++){ 
    tmp = tmp[path[i]]; 
    if (!tmp) return false; 
} 
return tmp; 

Answer 2

這是一個很難回答的問題，因爲我不知道你未來的想法是這個功能是根本。目前它在我看來，好像你真的在複雜化你從對象中提取數據的方法。例如，

var tpl = function(path){ 

    if(!path){ return false; } 

    var that = this; 

    that.html = { 
     intro: ['intro', 'html'], 
     common: { header: ['common', 'header', 'html'] }, 
     more:{ header: { link: ['hello', 'world'] } } 
    }; 

    return eval("that.html."+path); 
}; 


console.log(tpl("common.header")); 

參考：http://jsfiddle.net/8z4mC/

這將做什麼，我想你想，但此代碼完全相同的方式，當你想想看

html = { 
    intro: ['intro', 'html'], 
    common: { header: ['common', 'header', 'html'] }, 
    more:{ header: { link: ['hello', 'world'] } } 
}; 


console.log(html.common.header); 

參考：http://jsfiddle.net/jPLD5/

也許你需要解釋未來的目的是爲了讓別人做出更好的答案？

Answer 3

試試這個

var tpl = function(path){ 

    if(!path){ return false; } 

    var that = this; 

    that.html = { 
     intro: ['intro', 'html'], 
     common: { header: ['common', 'header', 'html'], 
        footer: { text2: 'text2' } }, 
     more:{ header: { link: ['hello', 'world'] } } 
    }; 

    path = path.split('.'); 

    var val = that.html; 
    for(var i = 0; i < path.length; i++){ 
     val = val[path[i]]; 
    } 
    return val; 
}; 

Demo

Answer 4

我喜歡@ori」的解決方案。下面是另一個遞歸選項：

function resolvePath(object, path){ 
    if (!path || !path.length || path[0] === "") { 
     return object; 
    } else if (typeof path === 'string'){ 
     path = path.split('.'); 
    } 
    var pathComponent = path.shift(); 
    if (pathComponent in object){ 
     return resolvePath(object[pathComponent], path); 
    } else { 
     throw new Error("Key does not exist."); 
    } 
}