객체 배열에서 객체를 꺼내는 for 반복문
(in 배열) 경우에는 인덱스가 나오기 때문에 주의합시다!
for(let i in persons){ // i는 index입니다! 주의하세요.
// alert(i);
persons[i].info();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var person = {
'name' : '홍길동',
'phone' : '010-1111-2222',
'name' : '홍길동',
'phone' : '010-1111-2222'
}
var person2 = {
'name' : '윤길동',
'phone' : '010-3333-4444',
'addr' : '서울시 서초구'
}
var persons = [person, person2];
for(let index in persons) {
let p = persons[index]
for(let key in p){
//document.write(`name : ${ p.name }, phone : ${ p.phone }<br>`)
document.write(`${key} : ${p[key]} <br>`)
}
}
////////////////////////////////////////////////////
// persons는 배열이다. 배열의 요소가 객체다 : {}, {}
var persons = [{
'name' : '홍길동',
'phone' : '010-1111-2222'
}, {
'name' : '윤길동',
'phone' : '010-3333-4444',
'addr' : '서울시 서초구'
}]
alert(typeof persons); // 왜 타입이 object로 뜰까?
// 배열은 스택 명령어와 동일하다. push, pop으로 추가 제거한다.
// 배열에 객체를 하나 추가한다.
persons.push({
'name' : '임길동',
'phone' : '010-6666-7777'
})
/* 이렇게 내용부를 쓸 필요가 없지. stack은 가장 마지막에 들어온 것이 무조건 먼저 삭제될테니까!!
persons.pop({
'name' : '임길동',
'phone' : '010-6666-7777'
});
*/
persons.pop();
for(let index in persons) {
let p = persons[index]
for(let key in p){
//document.write(`name : ${ p.name }, phone : ${ p.phone }<br>`)
document.write(`${key} : ${p[key]} <br>`)
}
}
for(var i = 1; i <= 2; i++){
var one = 10;
let two = 20;
const three = 30;
alert(one);
}
alert('one 나올까요 <br>')
alert(one); // 나옵니다. 호이스팅 되기 때문입니다. 즉, 지역변수로 선언해도 전역변수로 쓰일 수 있지요.
alert('two 나올까요 <br>')
alert(two); // 안나옵니다.
alert('three 나올까요 <br>')
alert(three); // 안나옵니다.
/* var one = 10;
var one = 20;
let two = 10;
two = 20;
let two = 30;
const three = 10;
three = 20; */
</script>
</head>
<body>
</body>
</html>
객체 내의 요소를 꺼내는 for 반복문
key가 '속성명' 형태로 나온다.
따라서 객체명.속성명 형태를 사용할 수 없고, 객체명['속성명'] 형태로 활용해야한다.
for(let key in p){
alert(`${key} : ${p[key]} <br>`)
}진짜 객체명.속성명 형태로 못써?
네 못씁니다.
alert("시작됩니다========");
for(let index in persons) {
let p = persons[index]
for(let key in p){
alert("p.속성명 형태 가능한가");
alert(`${key} : ${ p.key } <br>`);
//document.write(`name : ${ p.name }, phone : ${ p.phone }<br>`);
alert("p[속성명] 형태 가능한가");
alert(`${key} : ${p[key]} <br>`);
//document.write(`${key} : ${p[key]} <br>`);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function makePerson(name, phone, addr) {
var p = {
'name' : name, // 콜론왼쪽에 있으면 속성명으로 인식하기때문에, 인자와 이름이 같더라도 똑똑하게 받아들인다.
phone : phone,
addr : addr,
info : function() {
var msg = ''; //호이스팅이 일어나기때문에, 함수가 끝난 후에도 document.write(msg) 처럼 사용 가능.
for(let key in this){
if(key != 'info')
msg += key + ' : ' + this[key] + '<br>';
}
document.write(msg);
}
}
return p;
}
// var person = makePerson('홍길동', '010-1111-2222', '경기도 광명시');
let persons = [];
persons.push(makePerson('홍길동', '010-1111-2222' , '경기도 광명시'))
persons.push(makePerson('강홍길동', '010-2222-3333' , '서울시 서초구'))
for(let i in persons){ // i는 index입니다! 주의하세요.
// alert(i);
persons[i].info();
}
</script>
</head>
<body>
</body>
</html>'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 객체(Object)깊은 복사(deep copy) 편하게 하기 (1) | 2020.06.17 |
|---|---|
| [JS] 배열(Array)깊은 복사(deep copy) 편하게 하기 (0) | 2020.06.17 |
| [JS] 객체(Object) 기초 및 활용 : 객체 배열, 객체 생성함수, 깊은 복사 등 (0) | 2020.06.17 |
| [JS] 전개연산자 : array 요소를 하나씩 보내기(1:1 매핑) apply, ...array (0) | 2020.06.17 |
| [JS] 전개연산자 : 매개변수(parameter)로 받을 때 사용법 (0) | 2020.06.17 |
