본문 바로가기
Vue.js

javascript json object 복사

by 캡틴노랑이 2023. 2. 9.
반응형

간만에  vue.js에서 트리구조(?)를 구현해 보려고 했는데.. 

아무리 해도 예상대로 나오지 않아서.. 

알아보니... json object가 단순히 복사하면... 안되는 것 같다. 

물론 상황에 따라서는 맞을 수 있는데.. 내가 원하는 상황에서는 맞지 않았다. 

 

내가 원하는 형태는 다음과 같은 형태이다. 

0, 1, 2, 3, 4를 경우의 수 만큼 나열 하는 것이다. 

예를 들어 기준을 0으로 잡고, 

01234

01324

01423

01432

 

02134

02143 

 

기준 점을 잡고 재귀함수로 구현을 했는데.. 

아래와 같이 나왔다. 

 

 

코드 문제 인가 여러가지로 고민을 했지만, 

재귀함수에서 기본이 되는 상위 json  데이터를 복사를 해서 코딩을 하였는데... 이 부분이 문제였다. 

다음과 같이

    , recursionRoot(data, depthLevel)
    {
                var rData = data
                var level = depthLevel + 1

 

 

상위에서 받은   data를 rData에 복사를 해서 진행을 했더니 저리 되었다. 

data는 json object 이다.

 

이 부분을 다음과 같이 변경하였더니 정상적으로 예상한 대로 작동을 한다.

    , recursionRoot(data, depthLevel)
            {
                var rData = JSON.parse(JSON.stringify(data))
                var level = depthLevel + 1

 

 java나 c# 같이 참조냐, 복사냐의 차이 같은데... 자바스크립트도 그런게 있을 것이라는 생각을 하지 못하였다. 

 

 

원하는 결과는 다음과 같다.

 

*위와 같은 재귀 함수 소스가 필요하면, 댓글 남겨 놓으시면 추가 해놓겠음.

 

참고 사이트 

https://remocon33.tistory.com/681?category=863023 

 

Node.js 객체 복사 방식에 따른 수행시간 간단 비교

개요 JS에서 각 객체의 깊은 복사 방식에 따른 수행시간을 간단하게 비교한다. 원본 객체 const obj1 = { a: 1, b: "string", c: { name: "Leon", age: "29" } }; JSON 복사 function jsonCopy(obj){ return JSON.parse(JSON.stringify(o

remocon33.tistory.com

json 방식이 느리다고 한다.

하지만, 일단, 재귀를 사용하고 있는 상태라서, 또 다른 재귀를 쓴다면, 코드 복잡도가 높아지고, 유지보수도 귀찮고...

중요한 것은, 업무용이 아닌 개인용이라, 많은 데이터를 사용할 목적이 아니기에 json 방식도 상관이 없었음.

 

반응형

댓글