객체 및 프로토타입 상속 및 for...in 루프를 통한 루프
술어
__proto__ : 객체에는 프로토타입 상속을 통해 다른 속성과 기능에 액세스할 수 있는 __proto__ 속성이 있습니다. 프로토타입 상속: 객체 프로토타입을 통해 기능을 상속합니다.
예
Object.keys()를 사용하여 속성 반복
const adaKeys = Object.keys(mathematician);
let adaString = ""
adaKeys.forEach(function(key) {
adaString = adaString.concat(key + ": " + mathematician[key] + "\n");
});
for...in을 사용하여 속성 반복
for (const key in mathematician) {
if (contact.hasOwnProperty(key)) {
console.log(mathematician[key]);
}
}
참고: 객체 자체의 속성만 반복하려면 Object.prototype.hasOwnProperty()를 사용하세요.
모범 사례
const adaKeys = Object.keys(mathematician);
let adaString = ""
adaKeys.forEach(function(key) {
adaString = adaString.concat(key + ": " + mathematician[key] + "\n");
});
for...in을 사용하여 속성 반복
for (const key in mathematician) {
if (contact.hasOwnProperty(key)) {
console.log(mathematician[key]);
}
}
참고: 객체 자체의 속성만 반복하려면 Object.prototype.hasOwnProperty()를 사용하세요.
모범 사례
for (const key in mathematician) {
if (contact.hasOwnProperty(key)) {
console.log(mathematician[key]);
}
}
변수 안에 jQuery 선택기를 저장합니다. 그렇게 하면 선택기를 여러 번 사용해야 하는 경우 jQuery가 DOM을 한 번만 쿼리하면 되므로 코드가 더 빠르고 효율적입니다.
예
주소록에 연락처를 표시하는 UI 함수 만들기:
function displayContactDetails(addressBookToDisplay) {
let contactsList = $("ul#contacts");
let htmlForContactInfo = "";
Object.keys(addressBookToDisplay.contacts).forEach(function(key) {
const contact = addressBookToDisplay.findContact(key);
htmlForContactInfo += "<li id=" + contact.id + ">" + contact.firstName + " " + contact.lastName + "</li>";
});
contactsList.html(htmlForContactInfo);
};
술어
function displayContactDetails(addressBookToDisplay) {
let contactsList = $("ul#contacts");
let htmlForContactInfo = "";
Object.keys(addressBookToDisplay.contacts).forEach(function(key) {
const contact = addressBookToDisplay.findContact(key);
htmlForContactInfo += "<li id=" + contact.id + ">" + contact.firstName + " " + contact.lastName + "</li>";
});
contactsList.html(htmlForContactInfo);
};
이벤트 버블링: 이벤트가 DOM에서 트리거될 때 이벤트가 위로 버블링되는 프로세스입니다.
이벤트 위임: 지정된 모든 하위 요소에 대해 발생하는 상위 요소에 대한 이벤트 리스너를 만드는 프로세스입니다.
예
다음은 예입니다.
<div id="top-level">
<ul id="contacts">
<li id=1>Contact 1</li>
<li id=2>Contact 2</li>
<li id=3>Contact 3</li>
</ul>
</div>
위의 샘플 HTML에서 li를 클릭하면 먼저 li 에서 리스너를 트리거한 다음 #contacts 에서 리스너를 트리거한 다음 #top-level 에서 리스너를 트리거합니다.
function attachContactListeners() {
$("ul#contacts").on("click", "li", function() {
console.log("The id of this <li> is" + this.id + ".");
});
}
"ul#contacts" 상위 요소입니다. 상위 요소 내의 모든 li 요소가 트리거됩니다. on "click" .
예
DOM에 연락처를 표시하는 UI 함수를 만듭니다.
function showContact(id) {
const contact = addressBook.findContact(id);
$("#show-contact").show();
$(".first-name").html(contact.firstName);
$(".last-name").html(contact.lastName);
$(".address").html(contact.phoneNumber);
let buttons = $("#buttons");
buttons.empty();
buttons.append("<button class='deleteButton' id=" + + contact.id + ">Delete</button>");
}
Reference
이 문제에 관하여(객체 및 프로토타입 상속 및 for...in 루프를 통한 루프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/saoud/looping-through-objects-and-prototypal-inheritance-and-for-in-loops-398j
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div id="top-level">
<ul id="contacts">
<li id=1>Contact 1</li>
<li id=2>Contact 2</li>
<li id=3>Contact 3</li>
</ul>
</div>
function attachContactListeners() {
$("ul#contacts").on("click", "li", function() {
console.log("The id of this <li> is" + this.id + ".");
});
}
DOM에 연락처를 표시하는 UI 함수를 만듭니다.
function showContact(id) {
const contact = addressBook.findContact(id);
$("#show-contact").show();
$(".first-name").html(contact.firstName);
$(".last-name").html(contact.lastName);
$(".address").html(contact.phoneNumber);
let buttons = $("#buttons");
buttons.empty();
buttons.append("<button class='deleteButton' id=" + + contact.id + ">Delete</button>");
}
Reference
이 문제에 관하여(객체 및 프로토타입 상속 및 for...in 루프를 통한 루프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/saoud/looping-through-objects-and-prototypal-inheritance-and-for-in-loops-398j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
