ホームページ > ウェブフロントエンド > jsチュートリアル > js内のオブジェクトのプロパティと値を走査するインスタンス

js内のオブジェクトのプロパティと値を走査するインスタンス

高洛峰
リリース: 2016-12-06 13:16:16
オリジナル
1175 人が閲覧しました

今日プロジェクトを最適化しているときに、「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 にはオブジェクトの配列が含まれています。属性フィールド名の配列が含まれます。最初は次のように考えて、dataList を走査して毎回オブジェクトを取得し、次に for ループをネストして filedList を走査し、毎回その属性値の 1 つを取得して、それをテーブルにつなぎ合わせます。 。

例: dataList[0] は Emp オブジェクトであり、Emp には id や name などの属性があります。通常、現在の Emp オブジェクトの ID 値は dataList[0].id を通じて取得できます。ただし、属性フィールド配列をトラバースする場合は、この方法で dataList[0].filedList[0] を使用することはできません。これは、filedList[0] で値が取得されていないという意味ではありません。alert(filedList[0]) を通じて id 値 1 を既に取得しているためです。では、なぜ買収は失敗するのでしょうか?それは、Emp オブジェクトで filedList[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の機能は非常に強力です!


関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート