通過屬性名稱數組訪問嵌套對象

Question

假設我有一個這樣的對象（簡化）：

var options = {
    boxes: {
        size: {
            x: 15,
            y: 18
        },
    shadow: {
        [...]
    }
};

我有一系列名字：

var names = ['boxes', 'size', 'x'];

根據數組在對象內獲取/設置值的簡單方法是什么，在本例中它將是：

options.boxes.size.x = somevalue;

有任何想法嗎？

Answer 1

這樣做沒有簡單的內置方法。 你必須編寫自己的方法：

function getPath(obj, props) {
    for(var i = 0; i < props.length; i++) {
        if (props[i] in obj) {
            obj = obj[props[i]];
        } else {
            return; // not found
        }
    }

    return obj;
}

function setPath(obj, value, props) {
    for(var i = 0; i < props.length - 1; i++) {
        if (props[i] in obj) {
            obj = obj[props[i]];
        } else {
            return; // not found
        }
    }

    obj[props[i]] = value;
}

alert(getPath(options, names)); // 15
setPath(options, 25, names);  
alert(getPath(options, names)); // 25

Answer 2

只需使用循環來迭代names並抓取當前名稱的下一個嵌套對象。 假值或數組的結尾都應該停止循環。

var obj = options;
var i = 0;

while (obj && i < names.length)
    obj = obj[names[i++]];

---

或者只是使用.reduce()

names.reduce(function(obj, name) {
    return obj && obj[name];
}, options);

---

當然，如果您願意，可以命名並重用該功能。

function toPropertyIn(obj, name) {
    return obj && obj[name];
}

names.reduce(toPropertyIn, options);

---

制作一個getter / setter：

function nestedProp(obj, names, value) {
    if (arguments.length > 1)
        var setProp = names.pop();

    var res = names.reduce(function(obj, name) {
        return obj && obj[name];
    }, options);

    if (res && setProp !== undefined)
        res[setProp] = value;
    else
        return res;
}


nestedProp(options, names, "foo"); // to set

var val = nestedProp(options, names); // to get