[React] 이중리스트 이차원리스트 이차원 배열 병합, 정렬, 중복 제거 하기

현재 진행하는 개인 프로젝트에서 이차원 리스트를 합쳐야했다.

 

그런데 그냥 합치는게 아니라 각각의 행들끼리 합치고싶었다.

합쳐도 그대로 이차원 리스트가 나오도록!

---

✏️병합 : concat()

두 개 이상의 배열을 병합할 때 사용한다.

기존의 배열을 변경하지 않고, 새로운 배열을 return한다.

 

✔️사용법

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

 

=> 결과로 Array ["a", "b", "c", "d", "e", "f"] 가 도출된다.

---

✏️행끼리 병합 : map() 사용하기

이럴때 map을 사용해야한다.

  let newlist = list3.map((arr, index) => arr.concat(list4[index]));

• newlist : 새로운 리스트
• arr은 list3의 요소들이고, 이를 list4와 concat한다.

결과는 아래와 같이 출력된다.

---

그런데 중복되는 숫자도 있고, 정렬도 안되어있어서 답답했다.

중복 제거를 하고 정렬을 해야겠다 생각했다.

✏️중복제거 및 정렬 : set과 sort((a,b)=>a-b)사용하기

그냥 set을 적용시키면 아무런 변화가 없다. (당연함 이차원 리스트임)

그래서 그냥 for문을 돌려서 모든 리스트에 접근하여 set을 사용해 중복을 제거하고

push로 새로운 리스트에 넣어주었다.

  const newlist2 = []
  for (let i=0; i < newlist.length; i++){
    let r1 = [...new Set(newlist[i])];
    newlist2.push(r1) 
  };

 

결과

 

한번에 하자 싶어서 그냥 정렬하는 코드도 집어넣었다.

주의해야할것이 숫자는 그냥 sort()를 쓰면 안된다.

[1,100,8,9] 와 같은 엉뚱한 결과가 나온다.

(나도 그래서 어리둥절했다.)

 

숫자를 오름차순 정렬할때는 반드시 sort안에 (a, b) => a - b를 넣을것.

 

✔️sort((a, b) => a - b)

  const newlist2 = []
  for (let i=0; i < newlist.length; i++){
    let r1 = [...new Set(newlist[i])].sort((a, b) => a - b);
    newlist2.push(r1) 
  };

 

결과

 

너무 노가다인가 싶지만 리스트가 7개밖에 안되므로 괜찮을것 같아 사용했다.

 

추후 속도에 문제가 있으면,, 수정할 예정ㅎㅎ..