JS 数组嵌套循环与对象浅拷贝、深拷贝

2023-11-30 17:47:51

浅拷贝与深拷贝

在 JavaScript 中，对象是一种复杂数据类型，它可以存储一组键值对。当我们对对象进行赋值操作时，默认情况下会进行浅拷贝。这意味着只复制对象本身的属性，而不会复制对象的嵌套属性。

const obj1 = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    state: "NY",
  },
};

const obj2 = obj1;

obj2.address.city = "Los Angeles";

console.log(obj1); // { name: "John", age: 30, address: { city: "Los Angeles", state: "NY" } }

在上面的示例中，我们创建了两个对象 obj1 和 obj2，并将 obj1 赋值给 obj2。然后我们修改了 obj2.address.city 的值。这时我们发现 obj1.address.city 的值也随之改变了。这是因为浅拷贝只复制了 obj1 的属性，而没有复制 obj1 的嵌套属性。当我们修改 obj2.address.city 的值时，实际上是在修改 obj1 的嵌套属性。

要解决这个问题，我们需要使用深拷贝。深拷贝会复制对象及其所有嵌套属性。我们可以使用一些第三方库来实现深拷贝，也可以自己编写深拷贝函数。

const deepCopy = (obj) => {
  const newObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      if (typeof value === "object") {
        newObj[key] = deepCopy(value);
      } else {
        newObj[key] = value;
      }
    }
  }
  return newObj;
};

const obj1 = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    state: "NY",
  },
};

const obj2 = deepCopy(obj1);

obj2.address.city = "Los Angeles";

console.log(obj1); // { name: "John", age: 30, address: { city: "New York", state: "NY" } }

在上面的示例中，我们使用了 deepCopy 函数来创建 obj1 的深拷贝。然后我们修改了 obj2.address.city 的值。这时我们发现 obj1.address.city 的值没有改变。这是因为深拷贝复制了 obj1 的所有属性，包括嵌套属性。当我们修改 obj2.address.city 的值时，我们实际上是在修改 obj2 的副本，而不是 obj1 的原对象。

在 React.js 中使用浅拷贝和深拷贝

在 React.js 中，我们经常需要在组件之间传递数据。如果我们使用浅拷贝，可能会导致在子组件中修改数据时，父组件中的数据也会随之改变。这可能会导致一些意想不到的问题。

为了避免这个问题，我们应该在组件之间传递数据的深拷贝。我们可以使用一些第三方库来实现深拷贝，也可以自己编写深拷贝函数。

const deepCopy = (obj) => {
  const newObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      if (typeof value === "object") {
        newObj[key] = deepCopy(value);
      } else {
        newObj[key] = value;
      }
    }
  }
  return newObj;
};

const ParentComponent = () => {
  const state = {
    data: {
      name: "John",
      age: 30,
    },
  };

  const handleChildComponentUpdate = (updatedData) => {
    const newData = deepCopy(state.data);
    newData.name = updatedData.name;
    newData.age = updatedData.age;

    this.setState({ data: newData });
  };

  return (
    <ChildComponent
      data={deepCopy(state.data)}
      onDataUpdate={handleChildComponentUpdate}
    />
  );
};

const ChildComponent = (props) => {
  const { data, onDataUpdate } = props;

  const handleDataUpdate = () => {
    data.name = "Jane";
    data.age = 31;

    onDataUpdate(data);
  };

  return (
    <button onClick={handleDataUpdate}>Update Data</button>
  );
};

在上面的示例中，我们在父组件 ParentComponent 中使用 deepCopy 函数来创建 state.data 的深拷贝，然后将深拷贝传递给子组件 ChildComponent。当子组件 ChildComponent 中调用 handleDataUpdate 函数时，我们再次使用 deepCopy 函数来创建 data 的深拷贝，然后将深拷贝传递给父组件 ParentComponent。这样就可以确保在子组件中修改数据时，父组件中的数据不会随之改变。