JavaScript 结构化克隆：精通深层对象复制

            function structuredClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = ev => resolve(ev.data);
    port2.postMessage(obj);
  });
}

// Example Usage
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

async function deepCopyExample() {
  const clonedObject = await structuredClone(originalObject);

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Modify the cloned object
  clonedObject.address.city = "Los Angeles";

  console.log("Original Object (after modification):", originalObject); // Unchanged
  console.log("Cloned Object (after modification):", clonedObject); // Modified
}

deepCopyExample();

            

              
                Copy
              
            
          

            // Check if structuredClone is supported
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Original Object:", originalObject);
  console.log("Cloned Object:", clonedObject);

  // Modify the cloned object
  clonedObject.address.city = "Paris";

  console.log("Original Object (after modification):", originalObject); // Unchanged
  console.log("Cloned Object (after modification):", clonedObject); // Modified
}
else {
  console.log("structuredClone is not supported in this environment. Use the postMessage polyfill.");
}

            

              
                Copy
              
            
          

            let userData = {
  id: 12345,
  name: "Carlos Rodriguez",
  email: "carlos.rodriguez@example.com",
  preferences: {
    language: "es",
    theme: "dark"
  }
};

async function editUser(newPreferences) {
  // Create a deep copy of the original data
  const originalUserData = await structuredClone(userData);

  try {
    // Update the user data with the new preferences
    userData.preferences = newPreferences;

    // ... Save the updated data to the server ...

    console.log("User data updated successfully!");
  } catch (error) {
    console.error("Error updating user data. Reverting to original data.", error);
    // Revert to the original data
    userData = originalUserData;
  }
}

// Example usage
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

            // Main thread
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Process this data in the worker."
};

worker.postMessage(dataToSend);

worker.onmessage = (event) => {
  console.log("Received from worker:", event.data);
};

// worker.js (Web Worker)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Worker received data:", data);

  // ... Perform some processing on the data ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy