我使用递归编写了一个不同的解决方案。我正在使用它来命名输入元素的名称属性。举个例子:
<input type="number" name="testGroup.person.age" />
假设我们将该输入的值设置为“25”。我们的代码中还有一个对象:
var data = {
testGroup: {
person: {
name: null,
age: null,
salary: null
}
}
};
所以这里的目标是自动将输入元素中的值放入该数据结构中的正确位置。
我编写了这个小函数来根据您传递给它的命名空间数组创建一个嵌套对象:
var buildObject = function ( obj, namespaceArray, pos ) {
var output = {};
output[namespaceArray[pos]] = obj;
if ( pos > 0 ) {
output = buildObject(output, namespaceArray, pos-1);
}
return output;
};
它是如何工作的? 它从namespaceArray 数组的末尾开始,并创建一个具有一个属性的对象,该对象的名称是namespaceArray 中最后一个槽中的任何内容,其值为obj。然后它递归,将该对象包装在其他对象中,直到它用完 namespaceArray 中的名称。 pos 是 namespaceArray 数组的长度。你可以在第一个函数调用中解决它,比如if ( typeof(pos) === "undefined" ) pos = namespaceArray.length - 1,但是每次函数递归时你都会有一个额外的语句来评估。
首先,我们将input的name属性拆分成一个围绕命名空间分隔符的数组,并获取输入的值:
var namespaceArray = inputElement.name.split("."),
obj = inputElement.value;
// Usually you'll want to do some undefined checks and whatnot as well
然后我们只需调用我们的函数并将结果分配给某个变量:
var myObj = buildObject(obj, namespaceArray, namespaceArray.length - 1);
myObj 现在看起来像这样:
{
testGroup: {
person: {
age: 25
}
}
}
此时我使用 jQuery 的扩展函数将该结构合并回原始数据对象:
data = $.extend(true, data, myObj);
然而,在无框架的 JavaScript 中合并两个对象并不是很困难,并且有很多 existing code 可以很好地完成这项工作。
我确信有更有效的方法来完成这项工作,但这种方法很好地满足了我的需求。