[JavaScript] 💪 Array관련 Method 완전정복 1탄
글 작성자: 택시 운전사
반응형
💪 Day4 - Array관련 Method 완전정복
JavaScript 30의 네 번째 프로젝트는 프로젝트는 아니고, 잠시 공부시간이다. Array와 관련된 Method에는 무엇이 있는 지, 예제를 통하여 확인해보자
😃 HTML & JavaScript 코드
콘솔에 결과 값들이 출력 되어있다. 💁
💪 Array 관련 Method
1. filter()
1 2 3 | const arr = [1,2,3,4,5] arr.filter( el => el < 3 ) // [1,2] arr // [1,2,3,4,5] 원본이 바뀌지 않음 | cs |
filter
는 Array
에서 인자로 제공된 함수의 특정 조건을 만족하는 요소만 거를 수 있게 만들어줍니다.
2. map()
1 2 3 | const arr = [1,2,3] arr.map( el => el * 2 ) // [2,4,6] arr // [1,2,3] 원본이 바뀌지 않음 | cs |
map
은 모든 요소를 특정 조작을 가한 데이터로 수정하여 새로운 배열을 만들어줍니다.
3. sort()
1 2 3 | const arr = [3,20,12,1,4] arr.sort() // [1, 12, 20, 3, 4] arr // [1, 12, 20, 3, 4] 원본이 바뀜 | cs |
sort
는 이름에서 알 수 있듯이 인자로 넣은 함수의 특정 조건에 맞게 Array
를 정렬해줍니다. 인자를 넣지 않으면, 기본적으로 유니코드의 코드 포인트에 따라 정렬이 된다.
1 2 3 | const arr = [3,20,12,1,4] arr.sort( (a,b) => a-b ) // 오름차순 [1, 3, 4, 12, 20] arr.sort( (a,b) => b-a ) // 내림차순 [20, 12, 4, 3, 1] | cs |
4. reduce()
1 2 3 4 | const arr = [1,2,3,4] arr.reduce( (a,b) => a+b ) // 10 arr.reduce( (a,b) => a+b, 10) // 20 arr // [1,2,3,4] 원본이 바뀌지 않음 | cs |
reduce
는 모든 요소에 대한 특정연산을 계속하여 하나의 결과값을 도출해냅니다.
반응형
'Web > JavaScript' 카테고리의 다른 글
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기 (0) | 2019.02.10 |
---|---|
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기 (0) | 2019.02.05 |
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기 (0) | 2019.02.04 |
[JavaScript] ⌚ JavaScript로 시계만들기 (0) | 2019.02.03 |
[JavaScript] 🎹 JavaScript로 악기 만들기 (0) | 2019.02.02 |
댓글
이 글 공유하기
다른 글
-
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기
2019.02.10 -
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
2019.02.05 -
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
2019.02.04 -
[JavaScript] ⌚ JavaScript로 시계만들기
[JavaScript] ⌚ JavaScript로 시계만들기
2019.02.03