2015-03-08 50 views
1

我想知道如果其可以檢索一個javascript對象包含的所有路徑檢索的對象項路徑

實施例:

obj = { 
    prop1 : { 
    x: 19 
    y: 43 
    } 
    prop2 : { 
    another: { 
     here: 1 
    } 
    } 
    prop3: "hello" 
} 

凡其結果將是具有下列元素的數組:

Result: ["prop1.x", "prop1.y", "prop2.another.here", "prop3"] 

這可能嗎?

謝謝!

+0

遞歸迭代? – 2015-03-08 17:56:05

+0

[遞歸循環一個對象以構建屬性列表]的可能的重複(http://stackoverflow.com/questions/15690706/recursively-looping-through-an-object-to-build-a-property-list) – 2015-03-08 17:57:31

回答

3
function flattenKeys(obj, delimiter) { 
    delimiter = delimiter || '.'; 

    return recurse(obj, '', []); 

    function recurse(obj, path, result) { 
     if (typeof obj === "object") { 
      Object.keys(obj).forEach(function (key) { 
       recurse(obj[key], path + delimiter + key, result); 
      }); 
     } else { 
      result.push(path.slice(delimiter.length)); 
     } 
     return result; 
    } 
} 

用作

var obj = { 
    prop1 : { 
    x: 19, 
    y: 43 
    }, 
    prop2 : { 
    another: { 
     here: 1 
    } 
    }, 
    prop3: "hello" 
}; 

flattenKeys(obj); 

// -> ["prop1.x", "prop1.y", "prop2.another.here", "prop3"] 

替代實現無字符串操作:

function flattenKeys(obj, delimiter) { 
    delimiter = delimiter || '.'; 

    return recurse(obj, [], []); 

    function recurse(obj, path, result) { 
     if (typeof obj === "object") { 
      Object.keys(obj).forEach(function (key) { 
       path.push(key); 
       recurse(obj[key], path, result); 
       path.pop(); 
      }); 
     } else { 
      result.push(path.join(delimiter)); 
     } 
     return result; 
    } 
} 
+0

做得好! 一些「基準」:http://jsfiddle.net/jkoudys/w49rcp40/ (可能是錯誤的:) :) – 2015-03-08 20:52:14

+0

你粘貼了錯誤的鏈接?這只是我的jsfiddle。 – 2015-03-08 21:17:50

+0

你是對的,錯誤的鏈接:http://jsfiddle.net/w49rcp40/2/。看起來像它的瀏覽器依賴。他們都很優秀;) – 2015-03-08 21:57:41

2

寫到這同時託默勒格在這裏放在一起。遞歸是做這件事的明顯方法。

var inputObject = { 
    prop1: { 
     x: 19, 
     y: 43 
    }, 
    prop2: { 
     another: { 
      here: 1 
     } 
    }, 
    prop3: "hello" 
}; 

function getProps(obj) { 
    var props = []; 

    var findPropsRecursive = function (robj, str) { 
    robj = robj || {}; 
    var keys = Object.keys(robj); 
    if (keys.length > 0 && (robj instanceof Object)) { 
     return keys.map(function (key) { 
     return findPropsRecursive(robj[key], str + (str ? '.' : '') + key); 
     }); 
    } else { 
     props.push(str); 
     return ''; 
    } 
    }; 

    findPropsRecursive(obj, ''); 

    return props; 
} 

console.log(getProps(inputObject)); 

上的jsfiddle:http://jsfiddle.net/jkoudys/w49rcp40/

+0

您的代碼中存在一個錯誤,Internet Explorer會顯示它:TypeError:Object.keys:參數不是Object。 – Tomalak 2015-03-09 07:19:30

+1

2015-03-09 15:28:28

+0

這就是polyfills的用途。順便說一句,如果你想要遵循他們的例子,Google應用程序只能爲IE提供n-1支持聲明,並且由於最新的穩定版本是IE11,所以即使9也不支持。我個人傾向於使用n-2,但是IE8的尺寸已經足夠n-3,可以放置'您的瀏覽器不支持'頁面,儘管我通常會等到n-4。 n-3通常只是盡力而爲。 – 2015-03-10 01:12:42