javascript - 如何使用循环将 key 对添加到对象文字中——而不覆盖现有条目？

Question

我正在从 ul 列表中读取输入字段“名称”和“值”属性。没有两个列表具有相同数量的输入，并且“名称”和“值”属性在读取之前是未知的。

<ul id="options_set1">
    <li><input name="width" value="10" /></li>
    <li><input name="height" value="20" /></li>
    <li><input name="depth" value="5" /></li>
</ul>
<ul id="options_set2">
    <li><input name="finish" value="printed" /></li>
    <li><input name="mounting" value="spacer" /></li>
</ul>

我迭代所有输入，收集 ul id 'options_set_X' 作为我的对象的文字，以及名称:值对:

var signState = {}; //My object to be populated

var optionSet = '';
var optionName = '';
var optionValue = '';

$("ul li input").each(function() {
  var optionSet = $(this).parent().parent().attr('id');
  signState[optionSet] = {};
  optionName = $(this).attr('name');
  optionValue = $(this).val();
  signState[optionSet][optionName] = optionValue;
});

我无法理解的是如何防止此循环替换对象中每个“optionSet”文字中的任何现有名称:值对？

我怀疑这是因为我重新启动了signState[optionSet] = {};文字。

我需要一种方法来为给定的文字添加名称:值对，而不干扰任何现有的关联。

我在网上读到的任何内容都没有涉及这种特定情况，因为我使用变量作为键名称和键值 - 这使问题变得复杂。

Answer 1

试试这个:

var signState = {};

$("ul li input").each(function() {
    var set, name, value;
    set    = $(this).parent().parent().attr('id');
    name   = $(this).attr('name');
    value  = $(this).val();

    /* Create a fresh object if it doesn't exist, 
     * otherwise assign it the existing one. */
    signState[set] = signState[set] || {};

    /* Again, assign a fresh value if it was undefined or empty 
     * otherwise assign it the existing one. */
    signState[set][name] = signState[set][name] || value;

});

现在，如果您设置的值为false或0，那么它将被覆盖。如果您不希望这样，则必须使用三级运算符来确保正确:

signState[set][name] = typeof signState[set][name] !== "undefined"
    ? signState[set][name]
    : value;

三级运算符语法如下:definition = when is true ? this : else this; - 这对此非常有用。