delete方法删除对象数组中元素导致原始数据被修改

news2024/11/17 13:53:26

记录一个自己在码代码过程中遇到的问题。

要求：删除数组对象中每一组对象中的一个属性。

下面是我原始的写法(当然是错误的)。

const { log } = require("console");

//  用于测试delete方法，删除对象中的指定元素
const testForDelete = () => {

    //  定义一个对象数组
    const oraObjInfo = [{ id: 1, name: "小明", sex: "男", age: 12, remark: "小明是个好孩子" }];
    //  重新拷贝数据到新的常量中。
    const copiedObjInfo = [...oraObjInfo];

    // 用来保存修改过后的数据
    const deletedData = [];
    copiedObjInfo.forEach(e => {
        //  这里删除 remark属性 
        delete e.remark;
        deletedData.push(e);
    });

    log("原始数据", oraObjInfo);
    log("结果数据", deletedData);
};

testForDelete();

下面是运行结果

由运行结果可以看出，删除操作后，原始数据（oraObjInfo）的remark属性也被删除了。如果后面要使用原始数据中的remark属性的话，就取不到对应的值了。

以上问题的主要原因在于拷贝数据的时候没有进行深层拷贝。这就需要考虑js中的深层拷贝了。

我代码中用的是ES6扩展运算符（...），但是这个拷贝只能针对单层的数据才能深拷贝，多层的就不行了。因此我又试着用了其他方法。

方法一：在拷贝的时候确定进行深拷贝，再进行操作。

深拷贝方法：JSON.parse( JSON.stringify (需要拷贝的数据) )

具体代码如下：

const { log } = require("console");

//  用于测试delete方法，删除对象中的指定元素
const testForDelete = () => {

    //  定义一个对象数组
    const oraObjInfo = [{ id: 1, name: "小明", sex: "男", age: 12, remark: "小明是个好孩子" }];
    //  重新拷贝数据到新的常量中。（一定要是深拷贝，用 ... 拷贝不行）
    const copiedObjInfo = JSON.parse(JSON.stringify(oraObjInfo));

    // 用来保存修改过后的数据
    const deletedData = [];
    copiedObjInfo.forEach(e => {
        //  这里删除 remark属性 
        delete e.remark;
        deletedData.push(e);
    });

    log("原始数据oraObjInfo", oraObjInfo);
    log("结果数据deletedData", deletedData);
};

testForDelete();

运行结果如下：

这样，原始数据就没有被改变了。

方法二：在删除操作之前做单层的拷贝后再删除。

const { log } = require("console");

//  用于测试delete方法，删除对象中的指定元素
const testForDelete = () => {

    //  定义一个对象数组
    const oraObjInfo = [{ id: 1, name: "小明", sex: "男", age: 12, remark: "小明是个好孩子" }];
 
    // 用来保存修改过后的数据
    const deletedData = [];
    oraObjInfo.forEach(e => {
        //  在这里用 ... 方法进行单层的深度拷贝
        const temp = {...e};
        //  这里删除 remark属性 
        delete temp.remark;
        deletedData.push(temp);
    });

    log("原始数据oraObjInfo", oraObjInfo);
    log("结果数据deletedData", deletedData);
};

testForDelete();

运行结果：