위로
아래
배열 메소드 기본형
기본형
/* 배열 메소드 */
$.inArray(찾을 데이터, arr, 찾기 시작할 위치) // 배열 안에서 찾을 데이터의 인덱스 번호를 반환하고, 찾지 못하면 -1을 반환.
$.isArray(object) // 객체가 배열이면 true, 아니면 false 반환
$.merge(arr1, arr2) // 배열 arr1과 배열 arr2를 하나로 합친다
$("div").index("h1") //
/* 배열 반복 메소드 */
$("h1").each(function(){}) // 배열의 인덱스 순서대로 하나씩 메서드를 반복 실행
$.each($("h1"), function(){})
$.map(arr, function) // 배열에 저장된 데이터 수만큼 메서드 반복 실행 후, 반환된 데이터를 인덱스 오름차순으로 새 배열에 저장.
$.grep(arr, function) // 배열에 저장된 데이터 수만큼 메서드 반복 실행 후, 반환값이 true일 때만 반환된 데이터를 새 배열에 저장.
배열 메소드
inArray()
지정한 데이터가 배열의 몇 번 인덱스에 있는지 찾아서 반환
isArray()
배열인지 아닌지 확인하여 true / false로 반환
merge ()
두 배열 객체를 합친다
inArray(), isArray(), merge () 예시
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
let arr1=["서울","대전","부산","전주"];
let arr2=["한국","미국","일본","중국"];
let obj={
"name":"정부장",
"area":"서울"
}
let idxNum = $.inArray("부산",arr1); // 결과 2 (인덱스 번호니까 0부터해서 세 번째다)
console.log(idxNum);
let okArray1 = $.isArray(arr1);
let okArray2 = $.isArray(obj);
console.log(okArray1); // 결과 true
console.log(okArray2); // 결과 false
$.merge(arr2,arr1);
console.log(arr2); // 결과 두 배열 합
})
</script>
index()
지정 선택 요소의 인덱스 번호를 반환
index() 예시
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
let idxNum=$("li").index($("#list3"));
console.log(idxNum); // 결과 2
})
</script>
</head>
<body>
<h1>배열 관련 함수</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li id="list3">내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
배열 반복문 메소드 : each()
인덱스 순서대로 한 개 한 개 접근해서, 요소 개수만큼 메서드를 반복 실행
each () 기본형
// li 태그로 이루어진 배열을 li 개수만큼 반복하면서, 인덱스 값을 매개변수 i에, 결과값을 o에 반환한다.
$("li").each(function(i,o){console.log(i+o});
$.each($("li"), function(i,o){console.log(i+o});
// obj 배열을 인덱스 횟수만큼 반복해서 자기 자신의 값을 콘솔창에 띄운다.
$(obj).each(function(){console.log($(this)})
each () 예시
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
let obj = [{"area":"서울"},{"area":"부산"},{"aera":"전주"}]
$(obj).each(function(i,o) {
console.log(i+":",o);
});
console.log("==the End1==");
$.each($("#menu1 li"), function(i,o){
console.log(i+":", o);
})
console.log("==the End2==");
$.each($("#menu2 li"), function(i){
console.log(i+":", $(this));
})
})
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>
</html>
배열 반복문 메소드 : map()
map ()
배열에 저장된 데이터 수만큼 메서드 반복해서 결과를 새 배열에 인덱스 오름차순으로 대입.
map () 기본형
// 배열에 저장된 데이터 수만큼 메서드 반복 실행 후, 반환된 데이터를 새 배열에 저장.
$.map(arr, function)map () 예시
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
let arr1=[
{"area" : "서울", "name" : "무대리"},
{"area" : "부산", "name" : "홍과장"},
{"area" : "대전", "name" : "박사장"},
{"area" : "서울", "name" : "빅마마"}
]
let arr2=$.map(arr1,function(a,b){
if(a.area == "서울") return a;
});
console.log(arr2);
//결과 0 : {area:"서울",name:"무대리"}, 1: {area:"서울",name:"홍과장"}
</script>
배열 반복문 메소드 : grep()
grep()
배열에[ 저장된 데이터 수만큼 메서드를 반복실행하며 인덱스 오름차순으로 배열의 데이터를 불러옴.반환값이 true면 데이터를 새 배열에 저장하고 배열을 반환.
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
let arr1=[
{"area" : "서울", "name" : "무대리"},
{"area" : "부산", "name" : "홍과장"},
{"area" : "대전", "name" : "박사장"},
{"area" : "서울", "name" : "빅마마"}
]
let arr2=$.grep(arr1, function(a,b){
if(a.area == "서울"){
return true;
} else {
return false;
}
});
console.log(arr2);
})
</script>