실전 javascript에서 가장중요한 API 딱2개만 선정하라면 저는 개인적으로
String API, Array API 라고 생각합니다. 체감상 70%이상의코딩이 이두가지군을 사용할정도로 많은비중을 차지합니다.
그중 오늘은 실전에서 반드시 알아야할 핵심Array API를 정리해보겠습니다.
1.splice : 삭제
2.slice : 범위추출
3.forEach : 심플for문
4.map : 배열가공
5.find : 값찾기
6.indexOf,lastIndexOf : 인덱스찾기
7.filter : 조건추출
8.some: || ,every:&& : 일부만족,전체만족 체크
9.concat:배열과배열합치기
10.reduce:값누적
11.join:값을스트링
12.sort: 정렬
1. splice
배열을 잘라낼때(몇번째부터 몇개) 사용합니다.
첫번째인자는 몇번째부터
두번째인자는 잘라낼 갯수입니다
아래예제에서는 1번째부터 두개값을 잘라내어 리턴합니다 이때원본은 해당값들이 사라진 새로운배열이 됩니다
독특하게는 사라진자리에 뭔가 새로운값을 원하는만큼 채워서 원본배열을 바꿀수도 있습니다. 아래예제를 보시면 잘려진자리에 새로운값을 채워서 원본을 바꾸고 있습니다.
2.slice
특정index에서 특정index미만까지를 잘라 리턴합니다.
잘라도 splice와 달리 원본은 변화가 없는것이 특징입니다.
3. forEach
일반for문은 인덱스증가를 1보다크게도하여 반복회수를 줄일수있습니다. 하지만 가장많은 사용빈도의 케이스라면 아마도 +1이겠지요 그땐 forEach가 사용법이 간단합니다
3번째인자는 역시 원본배열입니다.
4. map
map은 현재배열을 한번씩 반복하여 가공된 재배열을 리턴합니다.
원본배열은 바뀌지 않습니다.
5. find
find는 현재 배열에서 조건에 맞는 item중 가장 앞에있는 item을 리턴합니다.
6.indexOf,lastIndexOf : 인덱스찾기
indexOf는 조건값이 들어있는 배열에서 앞에서 가장 가까운 인덱스값을 리턴합니다.
lastIndexOf는 조건값이 들어있는 배열에서 뒤에서 가장 가까운 인덱스값을 리턴합니다.
7.filter : 조건추출
filter는 조건에맞는 값들로 재구성된 배열을 리턴합니다.
원본배열은 바뀌지 않습니다.
8. some , every
some은 최소한개값만 만족하면 true를 리턴합니다
every는 모든값이 조건에 만족하면 true 아니면 false를 리턴합니다
콜백함수 원본배열이3번째에 전달됩니다
아래는 실제 프로젝트에서 사용하는 예제를 첨부해보았습니다.
오브젝속에 모든 value값들이 빈문자열인지를 체크하는 함수입니다
9.concat:배열과배열합치기
concat은 배열과 배열을 합쳐서 새로운 배열을 리턴합니다.
기존에 있는 배열들의 값은 변하지 않습니다.
배열을 합칠때에는 concat함수 인자값에 들어가는 배열이 뒤로 합쳐집니다.
10.reduce:값누적
reduce((누적값, 현재값, 인덱스, 원본배열){
return 계산식;
}, 누적값의 초기값);
reduce는 마지막 누적값을 리턴하며 콜백함수 뒤의 누적값의 초기값이 없을경우 초기값은 0부터 시작됩니다.
원본배열의 값은 변함이 없습니다.
11.join:값을스트링
join은 배열값들을 구분자로 연결하여 스트링을 리턴합니다.
이와 비슷한 예제로 JSON.stringify()함수도 있지만, JSON.stringify()는 배열 구조를 통으로 스트링으로 변환하여 리턴합니다.
12. sort
중요한건 문자열!과 숫자형!의 사용방식이 다릅니다. 사용법은 리턴없이 배열원본(origin)을 바꾸어버립니다.
문자열의 경우 아래와 같이하면 역순(내림차순)으로 정렬합니다. a보다b가 크면1을 리턴합니다, 물론-1을 리턴면 오름차순이 됩니다
문자열 오름차순경우만 특별히 인자없이 그냥 .sort()만 호출해도 됩니다. 아래예제는 특별히 오브젝트로 구성된 배열에서 키값을 비교해서 오브젝트배열을 재정렬하는 케이스라 더욱 재미있는 예제가 될거같습니다
숫자형 내림차순은 아래와 같이하면 됩니다
물론 a-b를 리턴하면 오름차순이 됩니다
'IT개발' 카테고리의 다른 글
AWS 무료회원가입하기 (0) | 2023.08.08 |
---|---|
node.js를 이용하여 react설치하기 (0) | 2023.08.06 |
github를 사용하는 git 기본사용법 eclipse사용 spring-boot 예제사용 (0) | 2023.07.20 |
vscode로 github연동하여 spring-boot프로젝트가져오기 (0) | 2023.07.19 |
vscode(VisualStudioCode)에 gitHub연동하여 repository생성하기 (0) | 2023.07.15 |