KnockoutJS Observable Array深拷贝问题：取消操作时如何还原数组

嘿，这个坑我之前踩过好几次！Knockout里的observable数组和带observable属性的对象，直接做浅拷贝肯定不行——你说的dataCopy只是复制了数组的引用，里面的对象还是和原数组共享的，所以原数组改了副本也跟着变。下面给你几个靠谱的解决办法：

方案一：用Knockout内置方法实现深拷贝 #

Knockout自带的ko.toJS()方法可以把整个observable结构转换成普通的JavaScript对象（自动把所有observable属性解包成原始值）。我们可以结合JSON的序列化/反序列化来做深拷贝，最后再把普通对象转回带observable的结构：

保存初始状态 #

// 把observable数组转成普通JS数组，每个对象的observable都变成原始值
const initialData = ko.toJS(data);

取消操作时还原 #

// 先清空原数组
data.removeAll();
// 把普通对象逐个转成带observable属性的对象并加入数组
initialData.forEach(item => {
  // 这里假设你的数据对象有对应的构造函数（比如ItemModel），能把普通对象转成带observable的实例
  data.push(new ItemModel(item));
});

如果没有自定义构造函数，也可以手动创建observable属性：

initialData.forEach(item => {
  const newItem = {
    name: ko.observable(item.name),
    value: ko.observable(item.value)
    // 其他属性依此类推
  };
  data.push(newItem);
});

方案二：用knockout.mapping插件（更省心） #

如果你的项目已经引入了knockout.mapping插件，那这个方法会更高效——它能自动处理带observable的对象和数组的深拷贝与还原，不用手动处理每个属性：

保存初始状态 #

// 把observable数组转成普通JS结构
const initialMapping = ko.mapping.toJS(data);

取消操作时还原 #

// 直接把普通JS结构映射回原observable数组
ko.mapping.fromJS(initialMapping, {}, data);

避坑提醒 #

• 千万别用data.slice()或者展开运算符[...data()]来拷贝，这些都是浅拷贝，只会复制数组的引用，里面的对象还是和原数组共享的，根本达不到还原的目的。
• 如果你的对象里包含函数、Date对象这类不可直接序列化的内容，用JSON方法拷贝时要额外处理（比如把Date字符串转回Date对象），这种情况下用knockout.mapping插件会更稳妥。

内容的提问来源于stack exchange，提问作者Colonel Mustard