Question

function addjsUserData(xAxiz, xTextArea, yAxiz, yTextArea) {

        var xlines = xTextArea.split('\n');
        var ylines = yTextArea.split('\n');
        jsdata = [];
        for (var i = 0; i < xlines.length; i++) {
            for (var j = 0; j < ylines.length; j++) {
                var jsUserObject = new Object();
                Object.defineProperty(jsUserObject, xAxiz, {
                    value: xlines[i],
                    writable: true
                });
                Object.defineProperty(jsUserObject, yAxiz, {
                    value: parseFloat(ylines[i]),
                    writable: true
                });


            }
            jsdata.push(jsUserObject)

        }
        console.log(jsdata);
        console.log(Object.keys(jsdata)[0]);

我有两个循环。然后，我在循环内创建一个对象。我希望用户为我的条形图设置x轴和y轴。 x轴和y轴的值也在文本区域中设置。我希望用户定义我的jsuserdata数组的属性以及值。但是，在用户定义属性后，我似乎无法访问它。我可以知道解决此问题的正确方法是什么？顺便说一句，Object.keys（jsdata）[0]仅显示0而不是xAxiz变量。

Answer 1

我认为您不需要使用Object.defineProperty。您可以使用[]符号设置动态属性名称：

 var propName = "hello";
 var obj = {};
 obj[propName] = "world";
 console.log(obj.hello); // Logs "world"

在一个示例中（我想像）与您尝试执行的操作类似：

function createDataPoints(xAxisLabel, xAxisValues, yAxisLabel, yAxisValues) {
  var dataPoints = [];
  var nrOfValidPoints = Math.min(xAxisValues.length, yAxisValues.length);
  
  for (var i = 0; i < nrOfValidPoints; i += 1) {
    var newDataPoint = {};
    newDataPoint[xAxisLabel] = xAxisValues[i];
    newDataPoint[yAxisLabel] = yAxisValues[i];
    
    dataPoints.push(newDataPoint);
  }
  
  return dataPoints;
};

function onImportClick() {
  var xAxisLabel = document.getElementById("xAxisLabel").value;
  var yAxisLabel = document.getElementById("yAxisLabel").value;
  var xValues = document.getElementById("xValues").value.trim().split("\n");
  var yValues = document.getElementById("yValues").value.trim().split("\n");
  
  console.log(createDataPoints(xAxisLabel, xValues, yAxisLabel, yValues));
}

document.getElementById("calculate").addEventListener("click", onImportClick);

<div style="display: flex">
  <div>
    <div>
      <label> x-axis label
        <input type="text" id="xAxisLabel" value="orders">
      </label>
    </div>
    <label>
      x-values<br/>
      <textarea id="xValues" rows="10">
1
2
3
      </textarea>
    </label>
  </div>
  <div>
    <div>
      <label> y-axis label
        <input type="text" id="yAxisLabel" value="cost">
      </label>
    </div>
    <label>
      y-values<br/>
      <textarea id="yValues" rows="10">
2
4
9
      </textarea>
    </label>
  </div>
</div>
<button id="calculate">import</button>

这是使用Object.defineProperty（）的正确方法吗？

1 个答案: