這是使用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>