拓展运算符创建新数组

 
   const originData: Item[] = [];
    for (let i = 0; i < 100; i++) {
      originData.push({
        key: i.toString(),
        name: `Edward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
      });
    }

 const save = async (key: React.Key) => {
    try {
      const row = (await form.validateFields()) as Item;

      const newData = [...originData];
      const index = newData.findIndex((item) => key === item.key);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        setData(newData);
        setEditingKey('');
      } else {
        newData.push(row);
        setData(newData);
        setEditingKey('');
      }
    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }
  };

 const newData = originData;不能达到创建副本的效果，因为这样只是将 originData的引用赋值给了 newData，两者实际上指向同一个数组。如果你对 newData 进行任何修改，实际上也会修改 originData，这就违背了你想要创建副本的初衷。

解释

• 引用传递: 在 JavaScript 中，数组和对象是通过引用传递的。如果你直接将一个数组赋值给另一个变量，两个变量都会指向同一个内存地址。任何对其中一个变量的修改都会影响另一个变量。

• 副本与引用的区别:

  • const newData = originData; 这只是引用传递，newData 和 originData指向同一个数组。
  • const newData = [...originData]; 这是通过扩展运算符 ... 创建了一个新数组，并将 originData中的元素复制到这个新数组中。这样 newData 就是一个独立的数组，你对 newData 的操作不会影响 originData。