form 和 {...form}区别主要体现在对象的引用和解构

form 和 {...form} 在 JS 中是有区别的，主要体现在对象的引用和解构。

1. form：直接引用 form 对象。如果你更改 form，那么所有引用 form 的地方都会得到更新。这是因为在 JavaScript 中，对象是通过引用来传递的，所以修改对象的属性，会影响到所有引用这个对象的地方。

2. {...form}：这是使用了 ES6 的新特性，叫做对象的解构赋值，或者叫作对象的扩展运算符。它创建了 form 的一个浅拷贝，也就是新生成了一个新的对象，对象的属性和 form 一样。但是新对象和 form 的内存地址是不一样的，也就是说新对象和 form 是完全独立的。所以，当你更改这个新对象的时候，原来的 form 不会受到影响。

举个例子：

let form = { a: 1, b: 2 };
let form_copy = { ...form };
form_copy.a = 3;
console.log(form);     // 输出 { a: 1, b: 2 }
console.log(form_copy); // 输出 { a: 3, b: 2 }

如上所示，在修改 form_copy 对象后，form 对象的内容并未改变。

需要注意的是 {...form} 是一种浅拷贝，如果 form 的属性值也是对象，那么这些属性值对象并没有被复制，而仍然是通过引用连接的：

let form = { a: 1, b: 2, c: { d: 4 }};
let form_copy = { ...form };
form_copy.c.d = 5;
console.log(form);     // 输出 { a: 1, b: 2, c: { d: 5 }}

如上所示，当我们修改 form_copy 对象中的 c.d 属性时，原对象 form 中的 c.d 也发生了改变，因为 {...form} 只进行了浅拷贝。