Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript에서 스프레드 연산자를 사용하여 객체를 복제하는 방법은 무엇입니까?


복제 한 변수에서 다른 변수로 개체를 복사하는 것 외에는 아무것도 아닙니다. 할당 연산자 를 사용한 단순 복제 우리의 의도대로 작동하지 않습니다. 복제가 발생할 때 변수의 변경 사항은 다른 변수의 변경 사항을 반영하지 않아야 합니다. 하지만 할당 연산자의 경우 , 변수의 변경 사항은 분명히 다른 변수에 반영됩니다. 따라서 이 단점을 줄이기 위해 ES6은확산 연산자를 제공했습니다. .

예시

다음 예에서 복제 확산 연산자를 사용하여 수행됩니다. . 따라서 한 변수의 변경 사항은 다른 변수에 반영됩니다.

<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>

출력

"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\"}"


예시

다음 예에서 확산 연산자 원본 개체가 변경되도록 사용됩니다. 복제된 개체에는 반영되지 않습니다.

<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>

출력

"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\"}"