컴퓨터는 잘못이 없다..
[JavaScript]splice()함수, length로 배열 비우기, forEach() 로 배열 출력하기 본문
[기본 개념]
>> splice()함수
└splice(n,m) : 인덱스 n으로 부터 m 개를 배열에서 삭제해라
>> length로 배열 비우기
└배열명.length = 0; : 배열명.length에 강제로 0을 넣으면 배열이 비워진다.
>> forEach로 배열 출력하기
-forEach()?
forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용한다.
하지만 for문처럼 index와 조건식, increase를 정의하지 않아도
함수를 호출하지 않아도 자동으로 처음에 자기자신 호출해주는 함수를 통해 기능을 수행할 수 있다.
-forEach() 내의 function()
script 내에 썼으니.. 페이지가 로딩되는 시점에
함수를 호출하지 않아도 알아서 호출된다.
함수 값을 전달하는 것이 아닌, 함수의 기능을 전달해준다.
-forEach()내의 function()의 매개변수
callback 함수 인자에는 배열의 요소, index, 전체 배열을
인자로 사용한다.
-배열명.forEach(function(매개변수1, 매개변수2, 매개변수3){});
여기서 매개변수1은 배열의 요소 매개변수2는 배열의 index, 매개변수3은 배열 자체를 의미한다.
[예제코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step06_example.html</title>
</head>
<body>
<h1>array type 테스트 중...</h1>
<script>
let nums = [1,2,3,4,5,6,7,8,9,10];
let names = ["김구라","해골","원숭이","주뎅이","덩어리"];
//nums 배열의 4번째 인덱스로 부터 1개 삭제
nums.splice(4,1);
//nums 배열 비우기(모두 삭제)
names.length = 0;
let nums2 = [10, 20, 30, 40, 50];
//자바스크립트의 중요한 패턴 ★★★★★
//.forEach() : 호출하면서 전달된 함수는 배열의 size 만큼 즉시 반복 호출된다.
nums2.forEach(function(item,index){ //콘솔에 "오잉"이 nums 크기만큼 반복되서 출력된다.
console.log("오잉?");
//배열에 저장된 item과 index가 함수의 인자로 전달된다.
console.log("item : " + item); //배열 값
console.log("index : " + index); //배열의 인덱스
});
</script>
</body>
</html>
[forEach문 작성 요령]
step01) 배열명.forEach(function((1)){ (2) }); ----먼저 적어놓기
step02) 배열명.forEach(function(item,index,arr){ ----(1)에 쓸 매개변수 적기, (2)에서 엔터친 후 함수 내용 넣기
});
[참고]
콘솔에서 아래와 같이 뜬다면 똑같은 출력문이 5개 있다는 뜻!
'공부 > JavaScript' 카테고리의 다른 글
| [JavaScript]즉시 실행 함수란? (0) | 2020.11.06 |
|---|---|
| [JavaScript]for문, for each문 퀴즈, 화면에 동적으로 요소 추가해보기 (0) | 2020.11.05 |
| [JavaScript]반복문 For, For을 이용한 배열 출력 방법 (0) | 2020.11.05 |
