js에서 객체의 속성과 값을 순회하는 인스턴스

오늘 프로젝트를 최적화하면서 "js에 있는 객체의 속성과 값을 순회"해야 한다는 필요성을 느꼈습니다. 이 요구사항이 필요한 이유는 테이블 내용을 부분적으로 새로 고치는 js 플러그인을 만들기 위해서입니다. 처음에는 js 페이징 플러그인을 만들려고 온라인에 접속했는데, 너무 조급해서 한참이 지나도 못 나오더라구요! 나중에 나는 화가 나서 직접 글을 쓰기로 결정했습니다. 그러다 보니 이런 문제가 발생했습니다!

문제: 속성 이름 배열을 순회하여 개체의 속성 값을 가져오지 못했습니다.

초기 오류 코드는 다음과 같습니다.

for(var i=0;i<dataList.length;i++)
{
  var dataLine="<tr>";  
  for(var j=0;j<filedList.length;j++){
    dataLine+="<td>"+dataList[i].filedList[j]+"</td>";
  }
  dataLine+="</tr>";
  $("#"+tableName).append(dataLine);
}

우선, dataList에는 객체 배열이 포함되어 있고, fileList에는 객체의 속성 필드 이름 배열이 포함되어 있습니다. 처음에는 이렇게 생각해서 dataList를 순회하고 매번 객체를 얻은 다음 for 루프를 중첩하고 fileList를 순회하고 매번 해당 속성 값 중 하나를 가져온 다음 테이블로 함께 조각냅니다. .

예: dataList[0]은 Emp 개체이고 Emp에는 id 및 name과 같은 속성이 있습니다. 일반적으로 dataList[0].id를 통해 현재 Emp 객체의 id 값을 얻을 수 있습니다. 하지만 속성 필드 배열을 순회하면 dataList[0].filedList[0]을 이런 방식으로 사용할 수 없습니다. 이는 이미 Alert(filedList[0])를 통해 id 값 1을 얻었기 때문에 fileList[0]에서 값을 얻지 못했다는 의미는 아닙니다. 그렇다면 인수는 왜 실패하는 걸까요? Emp 객체에서 fileList[0]이라는 속성을 찾고 있기 때문입니다! 물론 Emp 객체에는 그러한 속성이 없으므로 획득이 실패합니다. 그러면 객체의 속성 값을 어떻게 얻을 수 있습니까?

------------------------------- ------ -

해결책: "향상된 for 루프"를 사용하여

을 탐색합니다. 올바른 코드는 다음과 같습니다.

for(var i=0;i<dataList.length;i++)
{
  var dataLine="<tr>";  
  for(var filedName in dataList[i]){
    dataLine+="<td>"+dataList[i][filedName]+"</td>";
  }
  dataLine+="</tr>";
  $("#"+tableName).append(dataLine);
}

해결 방법: dataList[i]는 객체이므로 매번 이 객체의 속성 이름을 얻은 다음 dataList[i][filedName]을 통해 이 속성의 속성 값을 얻을 수 있습니다. 즉, 개체 [속성 이름]입니다.

참고: JS는 객체의 모든 속성과 메서드를 얻습니다.

function displayProp(obj){ 
  var names="";   
  for(var name in obj){   
    names+=name+": "+obj[name]+", ";
  }
  alert(names);
}

이러한 관점에서 보면 js의 기능은 여전히 매우 강력합니다!