각각 목적어로?

각각 목적어로?

이 질문에는 이미 다음과 같은 답이 있습니다.

개체 리터럴 값을 반복합니다. (8개 답변)

마감됨3년 전에.

JavaScript에 개체가 있습니다.

var object = someobject;

Object { aaa=true, bbb=true, ccc=true }

이걸 어떻게 사용해야 하나요?

 object.each(function(index, value)) {
      console.log(value);
 }

작동하지 않습니다.

Javascript Object에는 표준 .각 함수가 없습니다.jQuery는 함수를 제공합니다.http://api.jquery.com/jQuery.each/ 을 참조하십시오. 아래는 작동해야 합니다.

$.each(object, function(index, value) {
    console.log(value);
}); 

또 다른 옵션은 바닐라 자바스크립트를 사용하는 것입니다.Object.keys()및 배열.map()이와 같은 기능

Object.keys(object).map(function(objectKey, index) {
    var value = object[objectKey];
    console.log(value);
});

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keys 및 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map 을 참조하십시오.

일반적인 for-loop을 사용하는 것의 의미를 제대로 이해하고 속성 체인을 루프하는 것과 같은 특정 특성에 대해 사용하는 것을 보지 않는 한, 일반적으로 이것들은 바닐라 자바스크립트를 루프용으로 사용하는 것보다 더 낫습니다.

하지만 일반적으로, for-loop은 다음보다 더 잘 작동하지 않습니다.jQuery또는Object.keys().map()아래의 일반 for-loop을 사용하여 두 가지 잠재적인 문제를 살펴보겠습니다.

---

맞아요, 그래서 다른 답변에서도 지적했듯이, 간단한 자바스크립트 대안은 다음과 같습니다.

for(var index in object) { 
    var attr = object[index]; 
}

이 문제에는 두 가지 잠재적인 문제가 있습니다.

1. 찾고 있는 속성이 프로토타입 체인의 위쪽이 아닌 개체 자체의 속성인지 확인하려고 합니다.이는 다음을 통해 확인할 수 있습니다.hasOwnProperty그렇게 기능합니다.

for(var index in object) { 
   if (object.hasOwnProperty(index)) {
       var attr = object[index];
   }
}

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty 을 참조하십시오.

그jQuery.each그리고.Object.keys기능은 이 문제를 자동으로 처리합니다.

2. 일반 for-loop과 관련된 또 다른 잠재적인 문제는 범위 및 비폐쇄 문제입니다.이것은 약간 복잡하지만, 다음 코드를 예로 들어 보겠습니다.우리는 button0, button1, button2 등의 ID를 가진 많은 버튼들을 가지고 있고, 우리는 그것들에 온클릭을 설정하고 그것들을 하기를 원합니다.console.log다음과 같이:

<button id='button0'>click</button>
<button id='button1'>click</button>
<button id='button2'>click</button>

var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"];
for(var buttonId in messagesByButtonId ) { 
   if (messagesByButtonId.hasOwnProperty(buttonId)) {
       $('#'+buttonId).click(function() {
           var message = messagesByButtonId[buttonId];
           console.log(message);
       });
   }
}

시간이 지난 후 콘솔에서 항상 "마지막으로 클릭!" 버튼을 클릭하고 "먼저 클릭!" 또는 "가운데를 클릭!"하지 않는 경우.왜냐고요? 온클릭 기능이 실행될 때 표시되기 때문입니다.messagesByButtonId[buttonId]사용buttonId변수입니다.그리고 그 순간 루프가 끝났기 때문에,buttonId "반복 가졌던 값일이고, "button2"("button2"")일 것입니다.messagesByButtonId[buttonId]▁▁be 될 것입니다.messagesByButtonId["button2"] " "마지막으로!"

폐쇄에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 을 참조하십시오.특히 그 페이지의 마지막 부분에서 우리의 예를 다룹니다.

다시.jQuery.each그리고.Object.keys().map()우리를 위해 이 문제를 자동으로 해결합니다, 왜냐하면 그것은 우리에게 제공하기 때문입니다.function(index, value)(폐쇄가 있음) 그래서 우리는 지수와 가치를 모두 사용하는 것이 안전하고 그것들이 우리가 기대하는 가치를 가지고 있다는 것을 확신합니다.

for(var key in object) {
   console.log(object[key]);
}

var object = { "a": 1, "b": 2};
$.each(object, function(key, value){
  console.log(key + ": " + object[key]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

//output
a: 1
b: 2

언급URL : https://stackoverflow.com/questions/11846484/each-for-object