프론트엔드/JavaScript
[JavaScript] 배열선언, 배열출력, $.each
비전공개미
2022. 10. 5. 16:55
반응형
SMALL
배열선언
<!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>Array배열</title>
</head>
<body>
<script>
let cities = ["Seoul", "Daejeon", "Daegu", "Busan"];
cities[0] = "Jeju";
for(let i=0; i<cities.length; i++){
document.write(cities[i] + "<br>");
}
//빈배열 추가할때마다 증가
let wee = new Array();
wee[15] = "15번째이다";
document.write(wee);
//Array 초기값과 함께 배열생성
let week = new Array("월","화","수","목","금","토","일");
document.write(week[6]+"<br>");
//()갯수만큼의 배열생성 초기화x
let weeks = new Array(7);
weeks[0] = "월";
weeks[3] = "목";
weeks[4] = "금";
document.write(weeks);
document.write("<br>");
//여러타입을 섞어서도 저장가능
let every = new Array(4);
every[0] = 5;
every[1] = "문자";
every[2] = new Date();
every[3] = 10.99;
document.write(every);
</script>
</body>
</html>
배열출력, $.each문
<!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">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>testArray1.html</title>
</head>
<body>
<div id="demo">
</div>
<script>
var fruits = ["banana","orange","apple","mango"];
var emp = [
{"name": "Google", "age": 56},
{"name": "홍길동", "age": 36},
{"name": "우영우", "age": 25}
];
//for반복문으로 위쪽 id=demo영역출력
let data = "";
var msg = "";
for(let i=0; i<emp.length; i++){
msg += emp[i].name + " " + emp[i].age + "<br>";
}
//document.getElementById("demo").innerHTML = msg;
//$.each문
$.each(emp, function(index, item){
//data += (index + ":" + item.name + " " + item.age + "<br>");
data += item.name + " " + item.age + "<br>";
})
//document.getElementById("demo").innerHTML = data;
$("#demo").html(data);
</script>
</body>
</html>반응형
LIST