Array（push-object）不能按预期工作

Question

我在将对象推入数组时遇到问题。 我用值设置一个对象并将其推到数组中。 然后，我更改对象的某些值，然后将对象再次推入数组。 但是，在检查时，两个被推入数组的对象都是相同的，两个对象的值都与被推入数组的最后一个对象相同。

let ProductPosition = function (x, y) {
    this.x = x;
    this.y = y;
}

let PalletType = (function () {
    function PalletType() {
        this.PatternType = '';
        this.ProductWidth = 0;
        this.PalletWidth = 0;
        this.ProductPositions = [];
    }
});

function getPalletPositions(pallet, pattern) {
    pal.ProductPositions = [];
    let posn = new ProductPosition();
    switch (pattern) {
        case '1U1':
            posn = [];
            posn.y = pal.PalletWidth / 2;
            posn.angle = 0;
            posn.apprDir = 0;
            pallet.ProductPositions.push(posn);
            break;
        case '2U1':
            posn = [];
            posn.y = pal.PalletWidth / 2 + pal.ProductWidth / 2;
            console.log('y pos 0 ' + posn.y);
            pal.ProductPositions.push(posn);//first push

            posn.y = pal.PalletWidth / 2 - pal.ProductWidth / 2;
            console.log('y pos 1 ' + posn.y);
            pallet.ProductPositions.push(posn);//first push
            break;
    }
}
let pal = new PalletType();

pal.PalletWidth = 1165;
pal.ProductWidth = 400
let pat = '2U1';

getPalletPositions(pal, pat);

pal.ProductPositions.forEach(function (pos) {
    console.log("pos.y:" + pos.y);
});

实际输出：

y pos 0 782.5 <-value of y of first push
y pos 1 382.5 <-value of y of second push
pos.y:382.5   <-should be 782.5
pos.y:382.5

我期望：

y pos 0 782.5 <-value of y of first push
y pos 1 382.5 <-value of y of second push
pos.y:782.5
pos.y:382.5

我完全困惑，尝试了几件事，但无济于事。

Answer 1

您正在突变该对象，可以使用spread运算符或Object.assign

检查下面

let ProductPosition = function (x, y) {
    this.x = x;
    this.y = y;
}

let PalletType = (function () {
    function PalletType() {
        this.PatternType = '';
        this.ProductWidth = 0;
        this.PalletWidth = 0;
        this.ProductPositions = [];
    }
});

function getPalletPositions(pallet, pattern) {
    pal.ProductPositions = [];
    let posn = new ProductPosition();
    debugger;
    switch (pattern) {
        case '1U1':
            posn = [];
            posn.y = pal.PalletWidth / 2;
            posn.angle = 0;
            posn.apprDir = 0;
            pallet.ProductPositions.push(posn);
            break;
        case '2U1':
            posn = [];
            posn.y = pal.PalletWidth / 2 + pal.ProductWidth / 2;
            console.log('y pos 0 ' + posn.y);
            pal.ProductPositions.push({...posn});//first push

            posn.y = pal.PalletWidth / 2 - pal.ProductWidth / 2;
            console.log('y pos 1 ' + posn.y);
            pallet.ProductPositions.push({...posn});//first push
            break;
    }
}
let pal = new PalletType();

pal.PalletWidth = 1165;
pal.ProductWidth = 400
let pat = '2U1';

getPalletPositions(pal, pat);

pal.ProductPositions.forEach(function (pos) {
    console.log("pos.y:" + pos.y);
});

Answer 2

这是因为“ posn”是一个对象，因此实际上是在推动对该对象的引用，而不是原始值。 例如，您可以复制对象：

pallet.ProductPositions.push({...posn});

Spread运算符将创建一个浅表副本。 如果需要深拷贝，请使用以下命令：

pallet.ProductPositions.push(JSON.Parse(JSON.Stringify(posn)));

请注意，JSON方法无法复制函数。

Answer 3

您尝试将同一对象在同一数组中推送2次。 第一次带有某个值，下次则是在同一对象中修改该值，然后将其压入数组。 因此，总的来说，同一对象引用正在被修改。 结果，该数组将同一对象添加了2次。

另一种方法是，可以对数组使用切片运算符来创建数组的新实例，然后进行第二次推送。 或创建2个不同的变量，然后将其推送。

Answer 4

谢谢大家的及时答复，非常感谢。

通过使用以下方法解决：

let x;
let y;
let angle;
let apprDir;

并直接分配这些。 然后：

pallet.ProductPositions.push(new ProductPosition(x, y, angle, apprDir));

工作对待并简化了代码。