步行并为复杂的Javascript对象设置值

Question

我注意到这篇文章有以下相似之处： Dynamic deep setting for a JavaScript object

但是，上面的帖子是基于 javascript 对象的已知结构和深度，而不是真正动态的。真正的动态意味着您对结构没有任何先验知识，只是一个路径和一个替换它的值。我在 JSFiddle 上创建了一个相当不错的用例：

http://jsfiddle.net/kstubs/nJrLp/1/

function Message(message) {
$('result').insert('<div>' + message + '</div>');
}

var obj = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {
    "a": "b",
    "c": "d",
    "e": "f",
    "complex_array1": [{
        "g": "h"
    }, {
        "bingo": "bongo"
    }, {
        "x": {
            "complex_array2": [{
                "h": "i"
            }, {
                "j": "k"
            }, {
                "bingo": "bongo"
            }, {
                "bango": "jango"
            }]
        }
    }]
},
"string": "Hello World"
};

var list = [{
"h": "i"
}, {
"j": "k"
}];

function walk(path,value) {
var a = path.split('.');
var context = obj;

for (i = 0; i < a.size(); i++) {
    context = context[a[i]];
}

}

用例：

1. 查找 complex_array2
2. 将其列表更新为新列表（新数组）

新数组是应该替换complex_array2 列表的数组列表。 javascript 函数 walk 就是这样做的，遍历 javascript 对象直到满足路径条件，然后将值设置为传递给 walk 函数的任何值，但是新值不会保留。

我知道为什么它不会粘住，因为当你走过一个数组类型的对象时，你会丢失指向原始对象的指针。因此，挑战在于 walk javascript 对象，并且不丢失原始对象的上下文。

感谢您的帮助。

卡尔..

Answer 1

我使用了一个辅助函数来读取复杂的 json 对象。 (http://jsfiddle.net/JBBAJ/)

var object = {
    data: {
        users: [
            {
                firstName: "White"
            },
            {
                firstName: "Black"
            }
        ]
    }
}
var read = function(path, obj) {
    var path = path.split(".");
    var item = path.shift();
    if(item.indexOf("]") == item.length-1) {
        // array
        item = item.split("[");
        var arrayName = item.shift();
        var arrayIndex = parseInt(item.shift().replace("]", ""));
        var arr = obj[arrayName || ""];
        if(arr && arr[arrayIndex]) {
            return read(path.join("."), arr[arrayIndex]);
        } else {
            return null;
        }
    } else {
        // object
        if(obj[item]) {
            if(path.length === 0) {
                return obj[item];
            } else {
                return read(path.join("."), obj[item]);
            }
        } else {
            return null;
        }
    }

}
console.log(read("data.users[0].firstName", object)); // White
console.log(read("data.users[1].firstName", object)); // Black
console.log(read("data.test.users[0]", object)); // null

read 函数接受路径和对象。

Answer 2

只需遍历路径中除最后一个元素之外的所有元素。然后最后一个元素用于循环后的赋值。

var i = 0;

for (; i < a.size() - 1; i++) {
    context = context[a[i]];
}

context[a[i]] = value;

从技术上讲，您可以将i 的声明留在for 中。我只是觉得这更清楚。

http://jsfiddle.net/nJrLp/2/

Answer 3

您的代码在编写时无法正常工作的原因是，您实际上是在更改局部变量指向的对象，而不是更改您引用的对象的属性。

context = context[a[i]];

context 是一个指向对象的指针，它是一个局部变量。当您分配给它时，您正在分配一个新的指针值，它会丢失对前一个对象的引用。如果要替换它，则必须从其父对象中引用它。假设parent 就是这样一个对象；一旦找到目标对象的键名（假设您已将其放在变量 key 中），您就可以像这样覆盖现有值：

parent[key] = new_value;

这将取消引用parent，找到以key命名的属性，并将其值（即指针）替换为new_value的内存地址。你目前的工作是这样的：

var context = parent[key];
context = new_value;

在这种情况下，您只是更改了局部变量 context 的指针值，而不是 parent[key] 指向的对象。