요소 목록을 반복하여 각 항목을 지정함수로 반환합니다.
사용 형식 : _each(Collection, 반복함수, [Context])
아래의 예제를 통해 자세히 알아보도록 하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html lang="ko">
<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>UnderScore.js 연습</title>
<script src="https://unpkg.com/jquery@3.6.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>
<style type="text/css">
div { border: 1px solid gray; padding: 5px; margin: 5px; }
</style>
<script type="text/javascript">
$(function(){
// 요소 목록을 반복하여 각 항목을 반복 함수로 반환합니다.
// _.each(배열, 함수, [context])
let array = [11, 22, 33, 44, 55, 66, 77, 88, 99];
// 두번째 매개변수인 함수의 매개변수는 값,순서,객체자신이다. 필요한것만 기술한다.
// =>는 화살표 함수 이다.
_.each(array,(value) => {
$("#result").append(value + " ");
});
$("#result").append("<hr>");
// each : _.each(객체, 함수, [context])
let object = {"one":1,"two":2,"three":3};
_.each(object,(value, key) => {
$("#result").append(key + " : " + value + "<br>");
});
$("#result").append("<hr>");
// 두번째 매개변수인 함수의 매개변수는 값, 키, 객체자신이다. 필요한것만 기술한다.
// 익명 함수 가능하다.
_.each(object, function(value, key, obj) {
$("#result").append(key + " : " + value +" : " + JSON.stringify(obj) + "<br>");
});
$("#result").append("<hr>");
// 별도의 함수를 만들고 함수명으로도 전달 가능
_.each(array,fn);
});
function fn(value, index, ar){
$("#result").append(value + " : " + index + " : " + ar[index] + "<br>");
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
1. UnderScore.js를 사용하기 위해서는 CDN을 이용하여 파일을 추가해야 합니다. jQuery도 같이 추가 하였습니다.(8~9행)
2. 실행결과를 보기위에 body안에 result라는 div태그를 추가 했습니다. (47행)
3. 페이지가 모두 로드된 후에 스크립트가 실행되라고 $(function(){} 안에 코드를 적습니다.
4. 17행에 배열을 선언했습니다.
| let array = [11, 22, 33, 44, 55, 66, 77, 88, 99]; |
5. _.each의 사용 형식은 _.each(배열, 각요소를 반목해서 실행할 함수) 입니다. 여기서는 화살표 함수를 이용하여 지정했습니다. 함수의 몸체를 보면 id속성 값이 result인 요소를 찾아 값을 추가합니다. 실행화면의 첫번째 항목이 처리 결과 입니다. 23행은 구분을 위해 선을 하나 추가한것 것입니다. 결국 배열의 요소가 1개씩 함수의 value값으로 전달되어 출력이 됩니다. (20행~23행 )
|
_.each(array,(value) => {
$("#result").append(value + " ");
});
$("#result").append("<hr>");
|
| let object = {"one":1,"two":2,"three":3}; |
7. 객체의 속성들을 반복해 보겠습니다. 반복함수의 첫번째 매개변수는 객체이고 두번째는 각각의 속성을 반복할 반복함수입니다. 반복함수의 매개변수는 3개까지 사용할수 있는데 첫번째 매개변수가 "속성값"이고 두번째 매개변수는 "키" 즉 "속성이름"입니다. 세번째 매개변수는 반복되는 객체 자신입니다. 다음은 매개변수를 2개만 지정하여 키와 값을 출력하였습니다. 실행결과는 실행화면의 두번째 항목입니다. (27행~29행)
| _.each(object,(value, key) => {
$("#result").append(key + " : " + value + "<br>");
});
|
|
_.each(object, function(value, key, obj) {
$("#result").append(key + " : " + value +" : " + JSON.stringify(obj) + "<br>");
});
|
| _.each(array,fn); |
별도의 함수(41행~43행)
|
function fn(value, index, ar){
$("#result").append(value + " : " + index + " : " + ar[index] + "<br>");
}
|
'JavaScript > underscore.js' 카테고리의 다른 글
| _.find()함수 사용법 (0) | 2023.02.24 |
|---|---|
| _.reduce() 함수 사용법 (0) | 2023.02.24 |
| _.map() 함수 사용법 (0) | 2023.02.24 |
| Underscore 함수들의 세 번째 매개변수 Context 사용하기 (0) | 2023.02.24 |
| underscore.js? (0) | 2023.02.23 |
