Array.prototype 메소드들은 Array를 핸들링할 때 매우 유용하다.
1. Array.prototype.filter(CALLBACK(ELEMENT, INDEX));
ELEMENT : Array 객체의 요소
INDEX : Array 객체의 인덱스
CALLBACK 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환한다.
const ARR = [1,2,'',3,4]; //필터 전
console.log(ARR);
const NUMBER_ARR = ARR.filter(function(E, I){
return typeof E === "number";
}); //필터 후
console.log(NUMBER_ARR);
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
2. Array.prototype.findIndex(CALLBACK(E, I));
E : Array 객체의 요소
I : Array 객체의 인덱스
CALLBACK 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다. 그렇지 않으면 -1을 반환한다.
const ARR = []; //값 셋팅
ARR[0] = 'zero';
ARR[1] = 1;
ARR[3] = 3;
const UNDEFINED_INDEX = ARR.findIndex(function(E, I){
return E === undefined;
}); //undefined인 요소의 인덱스를 출력 console.log(UNDEFINED_INDEX);
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
3. Array.prototype.forEach(CALLBACK(E, I));
E : Array 객체의 요소
I : Array 객체의 인덱스
CALLBACK 함수의 로직을 각 E, I를 가지고 수행한다.
const ARR = [1, 2, 5, 6];
ARR.forEach(function(E, I){
if(E > 4){
console.log("# E : " + E);
}
});
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
4. Array.prototype.map(CALLBACK(E, I));
E : Array 객체의 요소
I : Array 객체의 인덱스
배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
forEach랑 비슷하지만 람다식을 쓸 수 있다.
const STRING_ARRAY = ["1","2","3","4","5"]; //E만 사용
const NUMBER_ARRAY = STRING_ARRAY.map(E => Number(E));
console.log(NUMBER_ARRAY); //E,I 사용
STRING_ARRAY.map(
(E, I) => console.log(E + " " + I)
);
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
'[개발] Front-End' 카테고리의 다른 글
[Javascript] Object 객체 활용하기 (0) | 2021.06.05 |
---|---|
[javascript] Object name 변경하기 (0) | 2021.06.04 |
[Javascript] Blob객체로 CSV 파일 다운로드 (0) | 2021.06.02 |
[Javascript] FileReader 객체로 파일 읽기 (0) | 2021.06.01 |
How to use Highcharts.js in front-end (0) | 2019.07.25 |