<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 순환</title>
</head>
<body>
<h1>
배열의 순환할 수 있는 구조를 이용하여 특정 기능을 할 수 있는 메서드가 제공됨
</h1>
<h4>
array.forEach(callback function) : 일반 반복문과 유사한 형태
array.map(callback function) : (forEach 수행) + 연산결과를 리턴하여 새로운 배열을 만들어줌
array.filter(callback function) : map처럼 수행하면서 연산결과를 리턴하는데,
비교연산의 결과에서 true에 해당하는 값만 필터링해서 리턴함
</h4>
<script>
const numArr = [3, 2, 1, 5, 10, 13, 12];
const strArr = ['a', 'f', 'g', 'k', 'm'];
// 문자와 숫자가 섞여있어도 상관없이 사용 가능
// elem_value, index, array 출력
console.log('---(elem, index, array)---');
numArr.forEach(function(elem_value, index, self){
// 요소의 값, 인덱스, 배열의 요소값 (배열 자신= self) // 값은 항상 value, index, 배열순으로 입력
console.log(index, elem_value, self[index]);
// 보통 index와 elem_value만 사용 (값이 동일하니까!)
}) ;
strArr.forEach(function(elem_value, index, self){
console.log(index, elem_value, self[index]);
});
// elem_value, index만 출력
console.log('---(elem, index)---');
strArr.forEach(function(elem_value, index){
console.log(index, elem_value);
});
// elem_value만 출력
console.log('---(elem)---');
strArr.forEach(function(elem_value){
console.log(elem_value);
});
// 함수를 만들고 forEach(함수명)을 넣어 출력하는 경우
console.log('---invoke callback function---');
function printNumber(el, i, arr){
console.log(i, el, arr[i]);
}
numArr.forEach(printNumber);
//map : 배열을 리턴
console.log('---map() invoke callback function---');
function printNumberMap(el, i, arr){
return `${i} : ${el} : ${arr[i]}`;
}
const newArr = strArr.map(printNumberMap);
console.log(newArr);
const newStrArr = strArr.map(function(el, i){
return `${i} : ${el}`;
});
console.log(newStrArr);
const newStrArr2 = strArr.forEach(function(el,i){
return `${i} : ${el}`; //forEach의 경우) 처리만 가능
});
console.log(newStrArr2); // undefined
console.log('---filter()---');
const newNumArr = numArr.filter(function(el,i,arr){
return !isNaN(el); //el의 값중에 number가 아닌 것
// return isNaN(el); //el의 값중에 number인것
});
console.log(newNumArr);
</script>
</body>
</html>
'JS > JS 수업분' 카테고리의 다른 글
| [JS] day10_regular_expression_정규표현식 (파일명검색) (0) | 2023.04.18 |
|---|---|
| [JS] day10_array_Method_배열순환탐색 메서드 (0) | 2023.04.18 |
| [JS] day10_Json (0) | 2023.04.18 |
| [JS] day10_array_Sort (0) | 2023.04.18 |
| [JS] day10_arrayMethod (0) | 2023.04.18 |