[Javascript] 배열의 값 순서 바꾸기

배열의 요소들에 대해서 순서를 바꿔야 할 때가 있다.

간단한 es6문법으로 변경하다가 또 다른 방법이 무엇이 있는지 정리 해 보았다.

 

let arr = ['black', 'red', 'blue', 'white'];

위의 배열에서 black과 blue의 위치를 바꾸어보자.

 

1. splice 사용

[배열명].splice([삭제위치], [삭제갯수], [추가할 항목])

splice의 return값은 삭제한 요소들의 array이다.

 

let arr = ['black', 'red', 'blue', 'white'];

let item = arr.splice(2, 1, arr[0]);
arr.splice(0, 1, item[0])

console.log(arr)
//['blue', 'red', 'black', 'white']

let item = arr.splice(2, 1, arr[0]);

arr의 2번째 위치부터 1개를 삭제한 값을 array형식으로 담고 arr[0]인 black을 추가해준다.

 

arr.splice(0, 1, item[0])

0번째 위치부터 1개의 값을 삭제해주고 (black삭제) blue를 담은 item[0]을 추가해준다.

 

 

2. index번호를 이용한 위치 변경

 let arr = ['black', 'red', 'blue', 'white'];

let item = arr[2]
arr[2] = arr[0];
arr[0] = item;

console.log(arr);
//['blue', 'red', 'black', 'white']

 

item에 blue를 담아주고

arr[2] (blue)를 arr[0] (black)으로 변경해준다.  ==> ['black', 'red', 'black', 'white']

그리고 arr[0] (black)을 item (blue)으로 변경해준다. ==> ['blue', 'red', 'black', 'white']

 

 

3. ES6 문법 사용 (Array destructuring)

let arr = ['black', 'red', 'blue', 'white'];

[arr[0], arr[2]] = [arr[2], arr[0]];

console.log(arr);
//['blue', 'red', 'black', 'white']

es6의 array destructuring으로 추출하여 할당 해주면 간단하게 위치 변경이 가능하다.