如何在JavaScript中使用传播算子克隆对象?
克隆 不过是将对象从一个变量复制到另一个变量而已。按照我们的意图,使用赋值运算符进行 简单的克隆无法正常工作。进行克隆时,任何变量的更改都不应反映另一个变量的任何更改。但是对于赋值运算符,任何变量的变化肯定会反映在另一个变量中。因此,为减少此缺陷,ES6提供了 扩展运算符。
示例
在以下示例中,使用传播算子完成克隆 。因此,一个变量的变化反映在另一个变量中。
<html> <body> <script> var org = {org1 : "Serveneedy", org2 : "Praveenlatha", org3 : "Redcross" }; document.write(JSON.stringify("无需更改org:" + " "+ JSON.stringify(org))); var neworg = org; org.org1 = "gatesfoundation"; document.write("</br>"); document.write(JSON.stringify("与更改组织:" + " "+ JSON.stringify(org))); document.write("</br>"); document.write(JSON.stringify("变化也反映在neworg中:" +" "+JSON.stringify(neworg))); </script> </body> </html>
输出结果
"无需更改org: {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}" "与更改组织: {\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}" "变化也反映在neworg中:{\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"
示例
在下面的示例中,使用了传播运算符,因此原始对象中的更改不会反映在克隆的对象中。
<html> <body> <script> var org = {org1 : "Serveneedy", org2 : "Praveenlatha", org3 : "Redcross" }; document.write(JSON.stringify("无需更改org:" + " "+ JSON.stringify(org))); var neworg = {...org}; org.org1 = "gatesfoundation"; document.write("</br>"); document.write(JSON.stringify("与更改组织:" + " "+ JSON.stringify(org))); document.write("</br>"); document.write(JSON.stringify("change also reflected in neworg" +" "+JSON.stringify(neworg))); </script> </body> </html>
输出结果
"无需更改org: {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}" "与更改组织: {\"org1\":\"gatesfoundation\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}" "变化也反映在neworg中: {\"org1\":\"Serveneedy\",\"org2\":\"Praveenlatha\",\"org3\":\"Redcross\"}"