Javascript 将对象添加到对象内部的数组

下面是我的数据对象

我想向path_数据添加一些数据

但这似乎并没有给path_数据添加任何内容

如何将对象添加到路径_数据

编辑：这里给出了完整的代码

您可以这样做：

---

data.path_data={x:canvasX，y:canvasY}

实际上，您发布的代码应该很好。此代码没有问题，请在其他地方查找错误，您是否在其范围之外更改了引用数据？canvasX/Y不应该是可变的。但在ES6中，您也可以使用类似于[variable]@loadaverage的变量：如果canvasX/Y是变量，这是绝对正确的。如果x和y是包含属性名的变量，而不是实际的属性名，则需要使用计算形式。我看不出有任何迹象表明这是事实，不过。@t.J.Crowder omg我是说如果他们是财产访问者。我需要一些休息：这不会向路径_数据添加任何内容，它会将路径_数据设置为具有x和y属性的对象。这样做会使data.path_数据成为对象而不是数组

data = {
    user: loggedInUser,
    shape: 4,
    width: currentThickness,
    color: currentColor,
    start_x: canvasX,
    start_y: canvasY,
    end_x: -1,
    end_y: -1,
    path_data: []
};

data.path_data.push({
     x: canvasX,
     y: canvasY
});

var canvas;
var ctx;
var canvasWidth = 490;
var canvasHeight = 220;

var currentThickness;
var currentColor;
var data;
var message;
var webSocket;
var loggedInUser = "user";

var mouseDown = false;

window.onload = function() {
    $(document).mousedown(function() {
        mouseDown = true;
    });

    $(document).mouseup(function() {
        mouseDown = false;
    });

    canvas = document.getElementById("canvas");
    currentColor = $('#selectColor option:selected').val();
    currentThickness = parseInt($('#selectThickness option:selected').val());
    var canvasX;
    var canvasY;
    if (canvas) {
        ctx = canvas.getContext("2d");
        ctx.lineWidth = currentThickness;

        $(canvas)
            .mousedown(function(e) {
                prepareStartPointPath(e);
            })
            .mousemove(function(e) {
                if (mouseDown != false) {
                    canvasX = e.pageX - canvas.offsetLeft;
                    canvasY = e.pageY - canvas.offsetTop;
                    ctx.lineTo(canvasX, canvasY);
                    ctx.lineWidth = currentThickness;
                    ctx.strokeStyle = currentColor;
                    ctx.stroke();
                    data.path_data.push({
                        x: canvasX,
                        y: canvasY
                    });
                }
            })
            .mouseup(function(e) {
                prepareEndPointPath(e);
            })
            .mouseleave(function(e) {
                if (mouseDown) {
                    prepareEndPointPath(e);
                }
            })
            .mouseenter(function(e) {
                if (mouseDown) {
                    prepareStartPointPath();
                }
            });
    }

    $('#selectColor').change(function() {
        currentColor = $('#selectColor option:selected').val();
    });

    $('#selectThickness').change(function() {
        currentThickness = parseInt($('#selectThickness option:selected').val());
    });

};

function prepareWebSocket() {
    console.log("preparing web socket");
    webSocket = new WebSocket("ws://192.168.99.70:2012");
    webSocket.onopen = function(evt) {
        onOpen(evt)
    };
    webSocket.onclose = function(evt) {
        onClose(evt)
    };
    webSocket.onmessage = function(evt) {
        onMessage(evt)
    };
    webSocket.onerror = function(evt) {
        onError(evt)
    };
}

function onOpen(evt) {
    console.log("Open");
}

function onClose(evt) {
    console.log("Close");
}

function onMessage(evt) {
    console.log("received: " + evt.data);
    re(JSON.parse(evt.data));
}

function onError(evt) {
    console.log(evt.data);
}

function prepareStartPointPath(e) {
    var canvasX;
    var canvasY;
    ctx.beginPath();
    canvasX = e.pageX - canvas.offsetLeft;
    canvasY = e.pageY - canvas.offsetTop;0
    data = {
        user: loggedInUser,
        shape: 4,
        width: currentThickness,
        color: currentColor,
        start_x: canvasX,
        start_y: canvasY,
        end_x: -1,
        end_y: -1,
        path_data: []
    };
    ctx.moveTo(canvasX, canvasY);
    ctx.lineWidth = currentThickness;
    ctx.strokeStyle = currentColor;
}

function prepareEndPointPath(e) {
    var canvasX;
    var canvasY;
    ctx.closePath();
    canvasX = e.pageX - canvas.offsetLeft;
    canvasY = e.pageY - canvas.offsetTop;
    data.end_x = canvasX;
    data.end_y = canvasY;
    console.log(JSON.stringify(data));
}