更改数组值更改此数组的上一个克隆

Question

函数 f3 接受简单对象数组 a 作为参数，并返回一个数组，其项是数组 a

为什么当我执行此语句b[0].a = 2;时a[0].a;的值更改为

  

这是我的代码

<script type="text/javascript">
    function f3(obj= [{a: 1, b: 'str'}]) {
        let r = [];
        for (let prop of Object.values(obj)){
            r.push(prop);
        }
        return(r);
    }


    const a = [{a: 1, b: 'str'}];
    console.log(a[0]);// output {a: 1, b: "str"}

    const b = f3(a); 
    console.log(b[0]);// output {a: 1, b: "str"}
    console.log(b[0].a);// output 1 

    b[0].a = 2;

    console.log(a[0]);// output {a: 2, b: "str"}
    console.log(b[0]);// output {a: 2, b: "str"}
    console.log(a[0].a);// output 2
    console.log(b[0].a);// output 2

</script>

Answer 1

数组和对象通过引用存储。因此，当您更改对象的任何键或数组的任何索引时，由于引用相同，这将对两个变量都起作用。

在您的情况下，常量a = [{a: 1, b: 'str'}];和const b = f3(a);访问相同的引用。您正在传递一个对象并返回相同的引用对象。尝试返回新对象。

您可以通过Object.assign（）或新的ES6功能Rest操作符来完成此操作。

在下面检查此链接-Rest Operator，Object.assign()

谢谢。

Answer 2

假设数组中的对象是JSON兼容的（所有属性值都是基元或嵌套的数组和对象），则可以使用json stringify / parse克隆数组：

function f3(obj){
    return JSON.parse(JSON.stringify(obj));
}

简短。简单。就像魅力一样。