JavaScript中克隆对象数组并将新增元素属性置为null的实现方法

问题描述 #

需要克隆对象数组的同时，将新增元素的所有属性值设为null（或空值）。当前使用的代码可以完成数组克隆，但会原样保留原有元素的属性值：

this.userDetails = [this.userDetails[0], ...this.userDetails];

执行后返回结果：

0: Proxy {reference: 'b2c00', start_date: '1989-01-22'…}
1: Proxy {reference: 'b2c00', start_date: '1989-01-22'…}

预期实现的效果是新增元素属性全部重置为空：

0: Proxy {reference: 'b2c00', start_date: '1989-01-22'…}
1: Proxy {reference: '', start_date: ''…}

实现方案 #

通过遍历原有对象的所有属性，给新生成的空对象对应属性统一赋值为空值即可，示例代码如下：

const orig = this.userDetails[0];
const copy = {};
// 遍历原有对象的所有属性，给新对象对应属性赋值为null
Object.keys(orig).forEach(prop => copy[prop] = null);
// 将新对象追加到原数组中
this.userDetails.push(copy);

如果需要将属性值设为空字符串而非null，将上述代码中null替换为''即可。

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