[Javascript] 배열 변형 메서드

filter메서드

 

 

기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

배열이름.filter(콜백함수);

 

let arr1 = [

  { name: "스마트폰", color: "blue" },
  { name: "책", color: "blue" },
  { name: "아이패드", color: "red" },

];

 

const colorBlue = arr1.filter((item) => item.hobby === "blue");
console.log(colorBlue);

→결괏값: (2) [{…}, {…}]
                0 :  { name: "스마트폰", color: "blue" },
               1 : { name: "책", color: "blue" },
              length : 2

 

 

 

 

map메서드

 

 

배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값을 모아서 새로운 배열로 반환

배열이름.map(콜백함수);

 

arr1 = [

  { name: "스마트폰", color: "blue" },
  { name: "책", color: "blue" },
  { name: "아이패드", color: "red" },

];

 

const colors = arr1.map((item) => item.color);
console.log(colors);

→결괏값: (3) ['blue', 'blue', 'red']

 

 

 

sort메서드

 

 

배열을 사전순으로 정렬하는 메서드(원본 배열을 정렬)

배열이름.sort();

 

let arr3 =  [ 'g', 'r', 'b' ];

 

arr3.sort();
console.log(arr3);

→결괏값: (3) ['b', 'g', 'r']

 

숫자값으로 이루어진 배열이면 제대로 작동되지 않음 → 숫자의 대소관계로 배열하고 싶으면 콜백함수 추가

 

오름차순	내림차순
let arr3_ = [23, 3, 13, 5]; arr3_.sort((a, b) => {   if (a > b) {     return 1;   } else if (a < b) {     return -1;   } else {     return 0;   } }); console.log(arr3_); →결괏값: (4) [3, 5, 13, 23]	let arr3__ = [23, 3, 13, 5]; arr3__.sort((a, b) => {   if (a > b) {     return -1;   } else if (a < b) {     return 1;   } else {     return 0;   } }); console.log(arr3__); →결괏값: (4) [23 ,13, 5, 3]

 

 

 

 

toSorted메서드

 

 

사전순으로 정렬하는데 원본 배열을 그대로 두고 정렬된 새로운 배열을 반환하는 메서드

배열이름. toSorted();

 

let arr4 =  [ 'g', 'r', 'b' ];

 

const sorted = arr4.toSorted();

console.log(arr4);

→ 결괏값: (3) [ 'g', 'r', 'b' ];

console.log(sorted);
→결괏값: (3) ['b', 'g', 'r']

 

 

 

 

join메서드

 

 

배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드

 

let arr5 = ["Hello", "I'm", "mm_스터디", "nice to meet you"];

 

const joined = arr5.join();
console.log(joined);

→ 결괏값: Hello,I'm,mm_스터디,nice to meet you

 

문자열 사이 구분값 기본값은 : ,

구분값을 바꾸고 싶으면 ()안에 넣기

 

const joined2 = arr5.join("-");
console.log(joined2);

→ 결괏값: Hello-I'm-mm_스터디-nice to meet you

 

const joined3 = arr5.join(" ");
console.log(joined3);

→ 결괏값: Hello I'm mm_스터디 nice to meet you