Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- visibility : hidden
- for..of
- display : none
- 범용 선택자
- innerhtml
- disabled
- Sort
- 가상 요소 선택자
- 일반 형제 선택자 결합
- 단방향 연결리스트
- 배열과 연결리스트의 차이
- 등차수열의 항 찾기
- 양방향 연결리스트
- map()
- 쌍방향 연결리스트
- classList.contains(string)
- indexOf
- 배열의 오름차순
- Em
- 배열의 내림차순
- CSS
- 인접 형제 선택자 결합
- 고차함수
- Array.from()
- filter()
- Link
- 백준알고리즘
- 객체
- invalid assignment left-hand side
- nth-child()
Archives
- Today
- Total
프론트엔드 센트럴파크 (☞゚ヮ゚)☞
map(), filter() 본문
map()
내가 가진 배열을 새롭게 조작을해서 새로운 배열로 반환을 할 때 사용
const langs = ['JS', 'HTML', 'CSS'];
const newLangs = langs.map(function(lang) {
return lang + ' 언어';
});
console.log(newLangs);
langs가 한번 실행되면서 JS에 function이 실행되고 HTML에 function이 실행되고 CSS에 function이 실행된다.
그리고 return된 것들이 매 요소마다 새로운 배열로 들어간다.
filter()
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
const langs = ['JS', 'HTML', 'CSS', 0, 1, 2, 3];
const numbers = langs.filter(function(el) {
if(typeof el == 'number') {
return el;
}
});
console.log(numbers);
const strings = langs.filter(function(el) {
if(typeof el == 'string') {
return el;
}
});
console.log(strings);
화살표 함수를 이용하여 간단하게 만들기
const langs = ['JS', 'HTML', 'CSS', 0, 1, 2, 3];
const isNumber = function (el) {
if(typeof el == 'number') {
return true;
};
};
const isString = (el) => typeof el == 'string';
const numbers = langs.filter(isNumber);
const strings = langs.filter(isString);
'Javascript' 카테고리의 다른 글
JSON (0) | 2022.07.03 |
---|---|
findIndex() - 배열의 값 검색 (0) | 2022.06.11 |
객체 속성 배열로 꺼내기 - Object.keys() , Object.values(), Object.entries() (0) | 2022.06.08 |
프로퍼티 조작 (0) | 2022.06.08 |
프로퍼티 열거 (0) | 2022.06.08 |
Comments