배열 내장함수 - 2

최현호·2022년 5월 9일
0

JavaScript

목록 보기
25/38
post-thumbnail

배열 내장함수 - 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(" ") : 공백
const arr = ["홍길동", "님", "안녕하세요", "오랜만입니다"];

console.log(arr.join()); // 홍길동,님,안녕하세요,오랜만입니다
console.log(arr.join(" ")); // 홍길동 님 안녕하세요 오랜만입니다

참고

profile
현재 블로그 : https://choi-hyunho.com/

0개의 댓글