08. Array랑 놀자 - 거름망편

Judy·2021년 9월 9일
0

JavaScript

목록 보기
9/14
post-thumbnail

Array랑 놀자 시리즈
1. 두둠칫편 ( push, pop, shift, unshift )
2. S편 ( slice 와 splice )
3. 거름망편 ( filter )
4. 옥수수고양이편 ( concat )

1. Array.filter()

✅ 읽기

  let numbers = [11,22,33,44,55];
  let mynum = numbers.filter( (value) => value > 20)
 
  console.log(mynum); // [22, 33, 44, 55] 
  
 배열 [11,22,33,44,55]
 numbers를 순회하면서 20보다 큰 수만 있는 새로운 mynum배열을 반환해줘

- filter 메서드
배열의 모든 요소를 순회하면서 전달받은 콜백함수를 반복 호출한 하고, 그 조건에 맞는 요소들만 모아서 새로운 배열을 반환.
원본배열은 변경 되지 않음.
매개변수 : callbackFunction(element, index, array),
this Arg

  • forEach : undefined 반환
  • map : 콜백함수의 반환값들로 구성된 새로운 배열 반환
  • filter : 콜백함수의 반환값이 true인 요소만 추출하여 새로운 배열 반환

🤔 그럼 혹시 단어도 필터링 할 수 있을까?
👩‍그럼! 밑에 예시를 보자!

let myInfo = [
    '한국에서 태어났습니다.Korea' ,'매운 음식을 좋아합니다.Hot',
    '여행을 좋아합니다.Travel' , '겨울을 좋아합니다.Winter',
    '도마뱀을 키웁니다.Pet' , '콜드브루오트라떼를 좋아합니다.Coffe'
]; 

👩‍ includes 함수를 사용해서 찾을 수 있어. '좋아'와 'Co'가 있는 것을 찾아보자

 let filterLike = myInfo.filter( a=> a.includes('좋아'));
 let filterEng = myInfo.filter( b => b.includes('Co'));
 
console.log(filterLike); // ["매운 음식을 좋아합니다.Hot", "여행을 좋아합니다.Travel", "겨울을 좋아합니다.Winter", "콜드브루오트라떼를 좋아합니다.Coffe"]
console.log(filterEng); // ["콜드브루오트라떼를 좋아합니다.Coffe"]

👩‍ 한 번더 풀어보자. 'ap'가 들어간 과일만 찾아볼래?

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
let result = fruits.filter( a=> a.includes('ap'));

console.log(result); // ["apple", "grapes"]

👩‍ 다음에는 더 응용이 된 문제를 풀어보자!

2. 이미지화

profile
영원히 공부하는 멋진 장선생!!

0개의 댓글