表单中编辑时，表格数据同步更新的原因分析

在构建表单时，我们经常需要将表格数据与表单控件关联起来，以方便用户对数据的编辑和更新。然而，有时我们会遇到这样的情况：当我们在表单中对数据进行编辑时，表格中的数据也会随之发生变化，这显然不是我们想要的。这种问题的出现往往是因为使用了不恰当的赋值方式，导致了对象之间的引用关系，而不是我们预期的独立副本。

为了理解这个问题的根源，让我们深入了解一下JavaScript中的赋值行为。在JavaScript中，赋值操作符（=）并不是简单的值复制，而是引用传递。这意味着当我们为一个变量赋值时，实际上是将另一个变量的引用地址赋给了它。

举个例子，让我们考虑以下代码：

let a = { name: 'John Doe' };
let b = a;
b.name = 'Jane Doe';
console.log(a); // 输出：{ name: 'Jane Doe' }

在这个例子中，我们首先创建了一个对象a，并将其赋给变量b。当我们更改b.name的值时，实际上更改的是a对象中name属性的值。这是因为b并不是a的副本，而只是指向a对象的另一个引用。

回到表单编辑的问题，我们很可能会在以下代码中遇到类似的问题：

let form = document.getElementById('form');
let table = document.getElementById('table');

// 将表格数据绑定到表单
form.elements.namedItem('name').value = table.rows[0].cells[0].innerHTML;

// 编辑表单数据
form.elements.namedItem('name').value = 'New Name';

// 表格数据也随之更新
table.rows[0].cells[0].innerHTML = 'New Name';

在这个例子中，我们从表格中提取数据并将其绑定到表单控件。当我们编辑表单中的数据时，由于引用关系，表格中的数据也会受到影响。

为了解决这个问题，我们需要创建表格数据的独立副本，而不是简单的引用传递。我们可以使用Object.assign()方法或展开运算符（...）来实现这一点。

// 使用 Object.assign() 方法
let formData = Object.assign({}, table.rows[0].cells[0].innerHTML);

// 使用展开运算符
let formData = {...table.rows[0].cells[0].innerHTML};

// 编辑表单数据
formData.name = 'New Name';

// 表格数据不会受到影响
table.rows[0].cells[0].innerHTML; // 仍然是旧值

通过创建独立副本，我们确保了表单数据和表格数据的更改不会相互影响。