Question

想象一下，用户操作正在创建，填充和更改的对象。创建零件就是我遇到问题;）。除非我事先为对象准备了密钥，否则JS将不会分配属性，因为密钥尚未实际创建。

预先准备好

dataObj.run1，因此function saveSelection();填写时没有任何问题。

当我增加到下一次运行时（使用function goNext();） - run2没有被填充，因为它不存在。

怎么办？根据构造函数创建新对象并继续推送它？还有其他想法吗？

我的代码：

var dataObj = {
  run1 : {
    sel1 : {
      id : "",
      text : ""
    },
    sel2 : {
      id : "",
      text : ""
    }
  },
  run2 : {
    // how to fill it in automatically...
  }
};

var realCount = 1;
var runCount = "run1"; // any preetier version of the incremeant here - see function goNext();?

function saveSelection(that) {
 var selectId = that.id;
 var selectedOptionId = that.selectedIndex;
 var selectedOptionText = that.selectedOptions[0].text;
 
  dataObj[runCount][selectId].id = selectedOptionId;
  dataObj[runCount][selectId].text = selectedOptionText;
  
  console.log(dataObj);
};


function goNext () {
  // Reset selections:
  document.getElementsByClassName("select")[0].selectedIndex = 0;
  document.getElementsByClassName("select")[1].selectedIndex = 0;
  
  // Increase count:
  realCount++;
  
  var runCountTemp = runCount.slice(0,3);
  
  runCount = runCountTemp + realCount;
  
  console.log(runCount);
    
};

<div id="app">

  <select class="select" name="city" id="sel1" onchange="saveSelection(this);">
    
    <option value="0">London</option>
    <option value="1">New York</option>
    <option value="2">San Francisco</option>

  </select>

  <select class="select" name="color" id="sel2" onchange="saveSelection(this);">

    <option value="0">Blue</option>
    <option value="1">Red</option>
    <option value="2">Green</option>
    
  </select>
<!-- Commented out as immaterial to this question
<button onclick="goBack();" class="buttonBack">BACK</button>
-->  

<button onclick="goNext();" class="buttonNext">NEXT</button> 
   
</div>

Answer 1

如果容器对象尚未存在，则必须创建容器对象，然后才能分配容器对象。

＆＃13;

var dataObj = {
  run1 : {
    sel1 : {
      id : "",
      text : ""
    },
    sel2 : {
      id : "",
      text : ""
    }
  },
  run2 : {
    // how to fill it in automatically...
  }
};

var realCount = 1;
var runCount = "run1"; // any preetier version of the incremeant here - see function goNext();?

function saveSelection(that) {
 var selectId = that.id;
 var selectedOptionId = that.selectedIndex;
 var selectedOptionText = that.selectedOptions[0].text;
 
  dataObj[runCount] = dataObj[runCount] || {};
  dataObj[runCount][selectId] = dataObj[runCount][selectId] || {};
  dataObj[runCount][selectId].id = selectedOptionId;
  dataObj[runCount][selectId].text = selectedOptionText;
  
  console.log(dataObj);
};


function goNext () {
  // Reset selections:
  document.getElementsByClassName("select")[0].selectedIndex = 0;
  document.getElementsByClassName("select")[1].selectedIndex = 0;
  
  // Increase count:
  realCount++;
  
  var runCountTemp = runCount.slice(0,3);
  
  runCount = runCountTemp + realCount;
  
  console.log(runCount);
    
};

＆＃13;

<div id="app">

  <select class="select" name="city" id="sel1" onchange="saveSelection(this);">
    
    <option value="0">London</option>
    <option value="1">New York</option>
    <option value="2">San Francisco</option>

  </select>

  <select class="select" name="color" id="sel2" onchange="saveSelection(this);">

    <option value="0">Blue</option>
    <option value="1">Red</option>
    <option value="2">Green</option>
    
  </select>
<!-- Commented out as immaterial to this question
<button onclick="goBack();" class="buttonBack">BACK</button>
-->  

<button onclick="goNext();" class="buttonNext">NEXT</button> 
   
</div>

＆＃13;

Answer 2

首先尝试创建属性，然后填充它。

dataObj[runCount] = {};
dataObj[runCount][selectId] = {
    id: selectedOptionId,
    text: selectedOptionText
};

如何根据[值]创建对象的新键和属性？ - JavaScript

2 个答案: