友人がオブジェクトを配列に変換する方法を尋ねました。なぜそれを変換したいのかと尋ねたところ、配列は js ループを使用して走査できるが、オブジェクトは走査できないと言いました。実際、オブジェクトはループ内で走査することもできます。変換なしでループできる!これは、js または jquery の一部の操作にあまり習熟していないことを意味します。ここで簡単に紹介していきます!
ケース
次のオブジェクトを見てみましょう:
var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99 }
上記がバックグラウンドから返されるキーと値のオブジェクトであると仮定します (この種のオブジェクトはよくあると思います!)。次に、このコンテンツをループ内のテーブルにバインドする必要があります。オブジェクトループの操作方法を知らない友達もいます。今日は2つの方法を紹介します!
方法 1:
ループするには $.each を使用してください!
$.each がわからない場合は、オンラインで検索することをお勧めします。もちろん、「jquery の $().each と $.each の違い」を検索することもできます。ここでは違いについて詳しく説明しません。友達の中には $().each をよく使う人もいるかもしれません。今日は主に $.each を紹介します。
$.each() は配列とオブジェクトを走査できます。その方法は次のとおりです:
$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n) { alert(“索引:”+i,”对应值为:”+n.name); });
次のようにトラバースすることもできます:
var arr1 = [ “one”, “two”, “three”, “four”, “five” ]; $.each(arr1, function(){ alert(this); });
出力: 1 2 3 4 5
最も良い点は、配列を走査できることです:
var obj =data;//上面复制的data $.each(obj, function(key, val) { alert(obj[key]);//可以输出成绩 console.log(key);//可以输出姓名 });
方法 2:
for in ループを使用して obj を走査します
上記のオブジェクトの場合、ループするには次のように記述できます。
for(var i in data){ console.dir(i);//输出姓名 console.dir(data[i]);//输出分数 }
for in ループについては誰もがよく知っているはずです。最も一般的に使用される for ループは for(var i=0;i さらに、次のオブジェクトに遭遇した場合: data.haorooms を使用すると 98 を取得できますが、「data.Front-end Blog」を使用するとエラーが報告されるため、キー値として漢字を使用する場合は data[" を使用する必要があります。フロントエンド ブログ] を選択するとき、この方法で選択すると、ドットは使用されなくなります。 上記は、jquery でオブジェクトをループする方法です。皆さんの学習に役立つことを願っています。
var data={
张三:69,
李四:72,
王五:90,
二麻子:88,
前端博客:100,
haorooms : 98,
王大壮:99
}