Javascript 배열 값 순서 바꾸기, 변경하기

자바스크립트 배열의 값 순서 바꾸기

1. splice 메소드 설명

• 자바스크립트의 배열의 값을 변경할 때는 Array.prototype.splice() 를 사용하면 됩니다.

Array.prototype.splice() 설명 링크 : Array.prototype.splice()

• 위 링크 접속으로 자세한 메소드 정보를 확인 가능합니다. 하단의 간단한 메소드 사용법입니다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

splice 배열 변경 방법

1. from 으로 부터 1개 삭제합니다. splice의 return 값은 삭제한 값 array입니다.

const item = arr.splice(from, 1);

2. item[0]를 to위치로 이동. 아무것도 삭제하지 않기때문에 두번째 argument는 0입니다.

arr.splice(to, 0, item[0]);

해당 내용 정리 이유

• 회사에서 메뉴 관리 기능을 개발을 했는데 트리 순서 변경 기능을 개발해야하는데 splice 함수를 몰라서 고생을 했습니다. 트리 하위에 하위에 하위가 포함해서 순서를 변경을 해야하는데

const nextState = {
  ...state,
  posts: state.posts.map(post =>
    post.id === 1
      ? {
          ...post,
          comments: post.comments.concat({
            id: 3,
            text: '새로운 댓글'
          })
        }
      : post
  )
};

• 예를 들어 이런식으로 변경을 하려고 하니 미치버리겠더라구요. 결국 제가 해결 못하고 다른 개발자분이 해결을 하셨는데 해결하신 것 보니 간단하게 splice 함수를 사용해서 한줄로 처리 하셨더라구요. 좀 충격을 받고 허무했습니다. 해당 부분때문에 많은 시간과 스트레스를 받았었거든요.

• 다른 분들도 이 글 보니고 배열 순서 변경시 도움이 되시길 바랍니다. 감사합니다.

#배열순서변경 #splice #메뉴관리 #메뉴순서변경