空函数更改数组

Question

我的代码做了很多奇怪的事情，我不知道为什么。首先，它在没有任何代码告诉他这样做的情况下改变列表，第二，当它应该只改变一个时，它改变了列表中的每个副本。让我尽我所能地解释这个问题。

下面显示的代码用于在数组中添加、编辑和删除项，以及更新页面上的html。添加和删除项目以及更新html可以很好地工作，但删除却很奇怪。

index.js

import UnitsForm from "./lib/UnitsForm.js";

const unitsForm = new UnitsForm();
unitsForm.init();

UnitsForm.js

import AddEditUnitForm from "./AddEditUnitForm.js";

class UnitsForm {
    formAreaWrap;
    formArea;

    previousForm;
    form;
    nextForm;
    formAfter;

    previousCard;
    card;

    list = [];

    table;

    unitName;

    duplicateButton;
    editButton;
    removeButton;

    nextButton;
    backButton;
    addNewButton;

    addEditUnitForm;

    onSubmit() { }

    constructor() {
        this.formAreaWrap = document.querySelector(".form-area-wrap");
        this.formArea = document.querySelector(".form-area");

        this.previousForm = document.querySelector(".form-2");
        this.form = document.querySelector(".form-3");
        this.nextForm = document.querySelector(".form-4");
        this.formAfter = document.querySelector(".form-5");

        this.previousCard = document.getElementById("businesscard");
        this.card = document.getElementById("unitscard");

        this.table = document.getElementById("unitstable");

        this.nextButton = document.getElementById("unext");
        this.backButton = document.getElementById("uback");
        this.addNewButton = document.getElementById("unew");
    }

    init() {
        this.unitName = document.querySelectorAll(".unit-name")

        this.duplicateButton = document.querySelectorAll(".duplicate");
        this.editButton = document.querySelectorAll(".edit");
        this.removeButton = document.querySelectorAll(".remove");

        this.card.classList.remove("unfocused");
        this.card.classList.add("focused");

        this.duplicateButton.forEach((element, index) => element.onclick = () => this.duplicateHandler(element, index));
        this.editButton.forEach((element, index) => element.onclick = () => this.editHandler(index));
        this.removeButton.forEach((element, index) => element.onclick = () => this.removeHandler(element, index));

        this.nextButton.onclick = this.nextHandler.bind(this);
        this.backButton.onclick = this.backHandler.bind(this);
        this.addNewButton.onclick = this.addNewHandler.bind(this);
    }

    duplicateHandler(element, index) {
        const el = element.parentNode.parentNode;
        el.parentNode.appendChild(el.cloneNode(true));

        this.list.push(this.list[index]);

        this.init();
    }

    editHandler(index) {
        this.addEditUnitForm = new AddEditUnitForm(this.list[index], this, index);

        this.form.style.transform = "translateY(-150%)";
        this.formArea.style.height = this.nextForm.offsetHeight + "px";
        this.nextForm.style.transform = "translateY(0)";
    }

    removeHandler(element, index) {
        const el = element.parentNode.parentNode;

        this.list.splice(index, 1);

        el.remove();

        this.init();
    }

    nextHandler() {
        this.form.style.transform = "translateX(-110%)";
        this.formArea.style.height = this.formAfter.offsetHeight + "px";
        this.formAfter.style.transform = "translateX(0)";

        this.onSubmit();
    }

    backHandler() {
        this.card.classList.remove("focused");
        this.card.classList.add("unfocused");

        this.previousCard.classList.remove("valid");
        this.previousCard.classList.add("focused");

        this.form.style.transform = "translateX(110%)";
        this.formArea.style.height = this.previousForm.offsetHeight + "px";
        this.previousForm.style.transform = "translateY(0)";
    }

    addNewHandler() {
        this.addEditUnitForm = new AddEditUnitForm(null, this, null);

        this.form.style.transform = "translateY(-150%)";
        this.formArea.style.height = this.nextForm.offsetHeight + "px";
        this.nextForm.style.transform = "translateY(0)";
    }

    addUnit(values, element) {
        this.table.append(element);

        this.list.push(values);

        this.init();
    }

    editUnit(values, index) { }

    log() {
        this.list.forEach((value) => console.table(value));
    }
}

export default UnitsForm;

AddEditUnitForm.js

class AddEditUnitForm {
    formAreaWrap;
    formArea;

    previousForm;
    form;

    values;
    index;

    unitNameInput;
    shortNameInput;
    unitTypeInput;
    numberOfUnitsInput;
    standardPriceInput;
    guestsNumberInput;
    areaInput;
    numberOfBathroomInput;
    selectAmenitiesInput;
    pricePerPersonCheckbox;
    descriptionTextarea;
    images = [];

    cancelButton;
    submitButton;

    unitsForm;

    onSubmit() { }

    constructor(...args) {
        this.values = args[0] === null ? {} : args[0];
        this.unitsForm = args[1];
        this.index = args[2];

        this.formAreaWrap = document.querySelector(".form-area-wrap");
        this.formArea = document.querySelector(".form-area");

        this.previousForm = document.querySelector(".form-3");
        this.form = document.querySelector(".form-4");

        this.unitNameInput = document.getElementById("uname");
        this.shortNameInput = document.getElementById("sname");
        this.unitTypeInput = document.getElementById("utype");
        this.numberOfUnitsInput = document.getElementById("noou");
        this.standardPriceInput = document.getElementById("sprice");
        this.guestsNumberInput = document.getElementById("gno");
        this.areaInput = document.getElementById("area");
        this.numberOfBathroomInput = document.getElementById("noob");
        this.selectAmenitiesInput = document.getElementById("sela");
        this.pricePerPersonCheckbox = document.getElementById("ppp");
        this.descriptionTextarea = document.getElementById("desc");

        if (this.index != null) {
            this.unitNameInput.value = this.values["unit-name"];
            this.shortNameInput.value = this.values["short-name"];
            this.unitTypeInput.value = this.values["unit-type"];
            this.numberOfUnitsInput.value = this.values["number-of-units"];
            this.standardPriceInput.value = this.values["standard-price"];
            this.guestsNumberInput.value = this.values["guests-number"];
            this.areaInput.value = this.values["area"];
            this.numberOfBathroomInput.value = this.values["number-of-bathrooms"];
            this.selectAmenitiesInput.value = this.values["select-amenities"];
            this.pricePerPersonCheckbox.checked = this.values["price-per-person"];
            this.descriptionTextarea.value = this.values["description"];
            this.images = this.values["images"];
        }

        this.cancelButton = document.getElementById("aecancel");
        this.submitButton = document.getElementById("aesubmit");

        this.cancelButton.onclick = this.cancelHandler.bind(this);
        this.submitButton.onclick = this.submitHandler.bind(this);
    }

    submitHandler() {
        if (this.index != null) {
            this.values["unit-name"] = this.unitNameInput.value;
            this.values["short-name"] = this.shortNameInput.value;
            this.values["unit-type"] = this.unitTypeInput.value;
            this.values["number-of-units"] = this.numberOfUnitsInput.value;
            this.values["standard-price"] = this.standardPriceInput.value;
            this.values["guests-number"] = this.guestsNumberInput.value;
            this.values["area"] = this.areaInput.value;
            this.values["number-of-bathrooms"] = this.numberOfBathroomInput.value;
            this.values["select-amenities"] = this.selectAmenitiesInput.value;
            this.values["price-per-person"] = this.pricePerPersonCheckbox.checked;
            this.values["description"] = this.descriptionTextarea.value;
            this.values["images"] = this.images;

            this.unitsForm.editUnit(this.values, this.index);
        }
        else {
            this.values["unit-name"] = this.unitNameInput.value;
            this.values["short-name"] = this.shortNameInput.value;
            this.values["unit-type"] = this.unitTypeInput.value;
            this.values["number-of-units"] = this.numberOfUnitsInput.value;
            this.values["standard-price"] = this.standardPriceInput.value;
            this.values["guests-number"] = this.guestsNumberInput.value;
            this.values["area"] = this.areaInput.value;
            this.values["number-of-bathrooms"] = this.numberOfBathroomInput.value;
            this.values["select-amenities"] = this.selectAmenitiesInput.value;
            this.values["price-per-person"] = this.pricePerPersonCheckbox.checked;
            this.values["description"] = this.descriptionTextarea.value;
            this.values["images"] = this.images;

            const element = document.createElement("tr");
            element.innerHTML = `
            <th class="unit-name">${this.values["unit-name"]}</th>
            <th>
                <button class="duplicate">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        version="1.1" x="0px" y="0px" viewBox="0 0 488.3 488.3"
                        style="enable-background:new 0 0 488.3 488.3;" xml:space="preserve">
                        <g>
                            <g>
                                <path
                                    d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" />
                                <path
                                    d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z" />
                            </g>
                        </g>
                    </svg>
                </button>
            </th>
            <th>
                <button class="edit">
                    <svg xmlns="http://www.w3.org/2000/svg" height="492pt" viewBox="0 0 492.49284 492"
                        width="492pt">
                        <path
                            d="m304.140625 82.472656-270.976563 270.996094c-1.363281 1.367188-2.347656 3.09375-2.816406 4.949219l-30.035156 120.554687c-.898438 3.628906.167969 7.488282 2.816406 10.136719 2.003906 2.003906 4.734375 3.113281 7.527344 3.113281.855469 0 1.730469-.105468 2.582031-.320312l120.554688-30.039063c1.878906-.46875 3.585937-1.449219 4.949219-2.8125l271-270.976562zm0 0" />
                        <path
                            d="m476.875 45.523438-30.164062-30.164063c-20.160157-20.160156-55.296876-20.140625-75.433594 0l-36.949219 36.949219 105.597656 105.597656 36.949219-36.949219c10.070312-10.066406 15.617188-23.464843 15.617188-37.714843s-5.546876-27.648438-15.617188-37.71875zm0 0" />
                    </svg>
                </button>
            </th>
            <th>
                <button class="remove">
                    <svg xmlns="http://www.w3.org/2000/svg" height="427pt" viewBox="-40 0 427 427.00131"
                        width="427pt">
                        <path
                            d="m232.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0" />
                        <path
                            d="m114.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0" />
                        <path
                            d="m28.398438 127.121094v246.378906c0 14.5625 5.339843 28.238281 14.667968 38.050781 9.285156 9.839844 22.207032 15.425781 35.730469 15.449219h189.203125c13.527344-.023438 26.449219-5.609375 35.730469-15.449219 9.328125-9.8125 14.667969-23.488281 14.667969-38.050781v-246.378906c18.542968-4.921875 30.558593-22.835938 28.078124-41.863282-2.484374-19.023437-18.691406-33.253906-37.878906-33.257812h-51.199218v-12.5c.058593-10.511719-4.097657-20.605469-11.539063-28.03125-7.441406-7.421875-17.550781-11.5546875-28.0625-11.46875h-88.796875c-10.511719-.0859375-20.621094 4.046875-28.0625 11.46875-7.441406 7.425781-11.597656 17.519531-11.539062 28.03125v12.5h-51.199219c-19.1875.003906-35.394531 14.234375-37.878907 33.257812-2.480468 19.027344 9.535157 36.941407 28.078126 41.863282zm239.601562 279.878906h-189.203125c-17.097656 0-30.398437-14.6875-30.398437-33.5v-245.5h250v245.5c0 18.8125-13.300782 33.5-30.398438 33.5zm-158.601562-367.5c-.066407-5.207031 1.980468-10.21875 5.675781-13.894531 3.691406-3.675781 8.714843-5.695313 13.925781-5.605469h88.796875c5.210937-.089844 10.234375 1.929688 13.925781 5.605469 3.695313 3.671875 5.742188 8.6875 5.675782 13.894531v12.5h-128zm-71.199219 32.5h270.398437c9.941406 0 18 8.058594 18 18s-8.058594 18-18 18h-270.398437c-9.941407 0-18-8.058594-18-18s8.058593-18 18-18zm0 0" />
                        <path
                            d="m173.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0" />
                    </svg>
                </button>
            </th>`

            this.unitsForm.addUnit(this.values, element)
        }

        this.unitNameInput.value = "";
        this.shortNameInput.value = "";
        this.unitTypeInput.value = "";
        this.numberOfUnitsInput.value = "";
        this.standardPriceInput.value = "";
        this.guestsNumberInput.value = "";
        this.areaInput.value = "";
        this.numberOfBathroomInput.value = "";
        this.selectAmenitiesInput.value = "";
        this.pricePerPersonCheckbox.checked = false;
        this.descriptionTextarea.value = "";
        this.images = [];

        this.form.style.transform = "translateY(150%)";
        this.formArea.style.height = this.previousForm.offsetHeight + "px";
        this.previousForm.style.transform = "translateY(0)";

        this.onSubmit();
    }

    cancelHandler() {
        this.unitNameInput.value = "";
        this.shortNameInput.value = "";
        this.unitTypeInput.value = "";
        this.numberOfUnitsInput.value = "";
        this.standardPriceInput.value = "";
        this.guestsNumberInput.value = "";
        this.areaInput.value = "";
        this.numberOfBathroomInput.value = "";
        this.selectAmenitiesInput.value = "";
        this.pricePerPersonCheckbox.checked = false;
        this.descriptionTextarea.value = "";
        this.images = [];

        this.form.style.transform = "translateY(150%)";
        this.formArea.style.height = this.previousForm.offsetHeight + "px";
        this.previousForm.style.transform = "translateY(0)";
    }
}

export default AddEditUnitForm;

首先，我遇到了editUnit(values, index)函数更改使用duplicateHandler(element, index)添加的列表中的每个项的问题，这很奇怪，因为它应该只更改数组中的一个特定项：

editUnit(values, index) { 
    this.list[index] = values;
}

所以我完全删除了函数中的代码来解决这个问题，我忘记了它，因为我认为这可能是duplicateHandler(element, index)函数中的问题，做了一些调整，但没有任何改变。然后我确定这是editUnit(values, index)的问题所在，回来后才意识到它是空的，我很惊讶，就像为什么他妈的要空函数改变数组，它应该什么都不做-它是空的。我尝试在浏览器中清除缓存，尝试不同的浏览器做同样的事情，再次尝试调整AddEditUnitForm.js nothing。我筋疲力尽了，我花了几个小时试图找出是什么导致了数组的变化。非常感谢您的每一次帮助！

Answer 1

更新:我修复了它！

第一个问题:改变数组的函数是AddEditUnitForm.js中的submitHandler()。我直接通过构造函数来更新item的值。

第二个问题:显然，当你像这样在数组中复制项目时，它们是相同的，所以当你改变一个项目时，它会改变所有的项目。