Cách sao chép (clone) đối tượng bằng spread operator trong JavaScript

Sao chép (Cloning) là sao chép đối tượng từ biến này sang biến khác. Sao chép đơn giản bằng toán tử gán (=) không hoạt động như mong đợi. Khi sao chép, thay đổi biến này không nên ảnh hưởng biến kia. Nhưng với toán tử gán, thay đổi biến này chắc chắn phản ánh sang biến kia. ES6 cung cấp spread operator (...) để khắc phục.

Ví dụ

Sao chép bằng toán tử gán, thay đổi một biến phản ánh sang biến kia.

<html> <body> <script> 
    var org = {org1: "Serveneedy", org2: "Praveenlatha", org3: "Redcross"}; 
    document.write(JSON.stringify("without change org: " + " " + JSON.stringify(org))); 
    var neworg = org; 
    org.org1 = "gatesfoundation"; 
    document.write("</br>"); 
    document.write(JSON.stringify("with change org: " + " " + JSON.stringify(org))); 
    document.write("</br>"); 
    document.write(JSON.stringify("change also reflected in neworg: " + " " + JSON.stringify(neworg))); 
</script> </body> </html>

Kết quả

"without change org: {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross"}" "with change org: {\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross"}" "change also reflected in neworg: {\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross"}"

Ví dụ

Dùng spread operator, thay đổi object gốc không ảnh hưởng object đã clone.

<html> <body> <script> 
    var org = {org1: "Serveneedy", org2: "Praveenlatha", org3: "Redcross"}; 
    document.write(JSON.stringify("without change org: " + " " + JSON.stringify(org))); 
    var neworg = {...org}; 
    org.org1 = "gatesfoundation"; 
    document.write("</br>"); 
    document.write(JSON.stringify("with change org: " + " " + JSON.stringify(org))); 
    document.write("</br>"); 
    document.write(JSON.stringify("change also reflected in neworg: " + " " + JSON.stringify(neworg))); 
</script> </body> </html>

Kết quả

"without change org: {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross"}" "with change org: {\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross"}" "change also reflected in neworg: {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross"}"