javascript for in 循环遍历对象，对后台返回的对象进行操作取值

﹏ヽ暗。殇╰゛Y 2022-05-13 13:18 182阅读 0赞

最近在写一个商城，商品详情页出现选择商品规格属性的功能，我们的后台就给我返回来object（对象），我又能怎么办。。。这个时候想到了JavaScript中使用for in可以循环遍历对象，可以轻松的取到后台返回来的一堆值，哈哈。。。话不多说给大家看看我们的需求：

![70][]![70 1][]

以上就是前端取到值展示的数据，以及后台接口中返回的对象 。

下面我先给说一下什么是for... in：

## 1、**`for...in` ** ##

以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。

语法：

<table> 
 <tbody> 
  <tr> 
   <td> <p><span style="color:#f33b45;">1</span></p> </td> 
   <td> <p><span style="color:#f33b45;"><code>for</code>&nbsp;<code>(variable&nbsp;</code><code>in</code>&nbsp;<code>object) {...}</code></span></p> </td> 
  </tr> 
 </tbody> 
</table>

参数：

`variable`

在每次迭代时,将不同的属性名分配给*变量*。

`object`

被迭代其枚举属性的对象。

最后放上我写的案例：

此时arr数组中返回的是：

![70 2][]

这样就达到了我们想要的效果，即将对象循环遍历push到新的数组中完成取值。

[70]: https://img-blog.csdn.net/20181024150144920?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220504/a9c37ce92c42417ea920c504545b3806.png
[70 2]: /images/20220504/ed1a82abde054ae6b0682ee6c66c057b.png