배열 내장함수 - 2

배열을 필터링 하기

filter

• 전달한 콜백 함수가 True를 반환하는 모든 요소를 새로운 배열로 반환
• 배열에서 어떠한 특정한 조건을 만족하는 요소들을 다시금 새로운 배열로 반환 받고 싶을 때
  사용 합니다.

const arr = [ { num: 1, color : "red" }, 
            { num: 2, color : "black" }, 
            { num: 3, color : "blue" }, 
            { num: 4, color : "green" }, 
            { num: 5, color : "blue" } ] 

            // color = blue 만 가져오기 
            const.log(arr.filter((elm) => elm.color === "blue")); // 3번과 5번을 배열로 반환

 

배열 자르기

slice(시작지점, 마지막지점)

• 인자를 전달하지 않으면 원본이 나옵니다.
• 시작지점에서 ~ 마지막지점 - 1 까지만 반환 합니다.

const arr = [
  { num: 1, color : "red" },
  { num: 2, color : "black" },
  { num: 3, color : "blue" },
  { num: 4, color : "green" },
  { num: 5, color : "blue" }
]

console.log(arr.slice(0, 2)); // 인덱스 0번과 1번 두개를 반환 합니다.
console.log(arr.slice(0, 4)); // 인덱스 0변 부터 3번 까지 -> green 까지

 

배열 붙이기

concat

const arr1 = [
  { num: 1, color : "red" },
  { num: 2, color : "black" },
  { num: 3, color : "blue" }
]

const arr2 = [
  { num: 4, color : "green" },
  { num: 5, color : "blue" }
]

// arr1 뒤로 arr2 를 붙입니다. 
// 그리고 하나의 배열로 반환 받습니다.
console.log(arr1.concat(arr2));

 

배열 정렬하기

sort

• 문자를 사전 순서대로 정렬
• 새롭게 정렬된 배열을 반환하는 것이 아니라, 원본 배열을 정렬 합니다.
• 즉, chars.sort() 을 console 에 출력하지 않고, sort 를 한 번 해주고, 원본 배열을 출력 한 것입니다.

let chars = ['나', '다', '가']
chars.sort();

console.log(chars) // \['가', '나', '다'\]

 

숫자 배열에 sort 를 사용하면 ?

• sort 는 숫자가 아니라 문자를 기준으로 정렬 합니다.
• 사전순으로 정렬을 하여 아래와 같은 결과가 나오게 됩니다.
• 이럴 때는 sort() 메서드에 인자로 비교 함수를 만들어서 넣어야 합니다.

let numbers = [0, 1, 3, 2, 10, 30, 20];
number.sort()
console.log(numbers); // [0, 1, 10, 2, 20, 3, 30]

 

sort 메서드 비교 함수 ( 오름차순 )

let numbers = [0, 1, 3, 2, 10, 30, 20];

const compare = (a, b) => {
  // 1. 크다 : 큰 값이 뒤로 가야 한다.
  if(a > b){
       return 1;
  }

  // 2. 작다 : 작은 값이 앞으로 가야 한다.
  if(a < b){
    return -1;
  }

  // 3. 같다 : 자리를 바꾸지 않는다.
  return 0;
}

number.sort(compare);

console.log(numbers); // [0, 1, 2, 3, 10, 20, 30]

 

sort 메서드 비교 함수 ( 내림차순 )

let numbers = [0, 1, 3, 2, 10, 30, 20];

const compare = (a, b) => {
  // 1. 크다 : 큰 값이 뒤로 가야 한다.
  if(a > b){
       return -1;
  }

  // 2. 작다 : 작은 값이 앞으로 가야 한다.
  if(a < b){
    return 1;
  }

  // 3. 같다 : 자리를 바꾸지 않는다.
  return 0;
}

number.sort(compare);

console.log(numbers); // [30, 20, 10, 3, 2, 1, 0]

 

배열의 모든 요소를 문자로 합치기

join

• join() : () 안에는 구분자가 됩니다.
• join() : ,
• join(" ") : 공백

// color = blue 만 가져오기
const.log(arr.filter((elm) => elm.color === "blue")); // 3번과 5번을 배열

 

참고

• 인프런