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

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>