js遍历对象(js遍历对象的所有属性)

Love The Way You Lie 2023-09-26 14:53 91阅读 0赞

###  ###

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)][js_js_js_js]

### js 遍历对象的3种方法 ###

第一种： for......in

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_02][js_js_js_js_02]

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_03][js_js_js_js_03]

const obj = {
              
                id:1,
                name:'zhangsan',
                age:18

}
    
     for(let key  in obj){
              
            console.log(key + '---' + obj[key])
      }

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_04][js_js_js_js_04]

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_05][js_js_js_js_05]

输出结果：

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_06][js_js_js_js_06]

第二种：

1)、Object.keys(obj)

2)、Object.values(obj)

参数：

obj：要返回其枚举自身属性的对象

返回值：

一个表示给定对象的所有可枚举属性的字符串数组。

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_07][js_js_js_js_07]

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_08][js_js_js_js_08]

const obj = \{

id:1,

name:'zhangsan',

age:18

console.log(Object.keys(obj))

console.log(Object.values(obj))

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_09][js_js_js_js_09]

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_10][js_js_js_js_10]

输出结果： obj对象的key组成的数组

\['id','name','age'\]

输出结果：obj对象的value组成的数组

\['1','zhangsan','18'\]

第三种：使用Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有属性(包含不可枚举属性)

遍历可以获取key和value

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_11][js_js_js_js_11]

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_12][js_js_js_js_12]

const obj = {
              
                id:1,
                name:'zhangsan',
                age:18
        }
        Object.getOwnPropertyNames(obj).forEach(function(key){
              
            console.log(key+ '---'+obj[key])
        })

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_13][js_js_js_js_13]

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_14][js_js_js_js_14]

输出结果：

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)\_15][js_js_js_js_15]

js遍历对象用for in比较好。

[js_js_js_js]: https://img-blog.csdnimg.cn/img_convert/4fbf607ada059621c011cf4f6f43c9d8.png
[js_js_js_js_02]: https://img-blog.csdnimg.cn/img_convert/a0facb0d4fac39b7d9395bd88683b5cc.gif
[js_js_js_js_03]: https://img-blog.csdnimg.cn/img_convert/d2bdcfd91b70fcc0c213910ba1970604.gif
[js_js_js_js_04]: https://img-blog.csdnimg.cn/img_convert/4d8d1f856be1428bcb7f9177845d08ae.gif
[js_js_js_js_05]: https://img-blog.csdnimg.cn/img_convert/f1e0268ba789ee0d142db1956a39dcd4.gif
[js_js_js_js_06]: https://img-blog.csdnimg.cn/img_convert/9eee53aec025bc122479b57bdb3a8063.png
[js_js_js_js_07]: https://img-blog.csdnimg.cn/img_convert/8c550a8b93fe06a86131d81822b894d3.gif
[js_js_js_js_08]: https://img-blog.csdnimg.cn/img_convert/50adcaa2e86f746745babed215bbd7d4.gif
[js_js_js_js_09]: https://img-blog.csdnimg.cn/img_convert/e86396a48fc6db11d540afd5e41bb467.gif
[js_js_js_js_10]: https://img-blog.csdnimg.cn/img_convert/ed8dc41f19f14a6ada7be462226e2a5e.gif
[js_js_js_js_11]: https://img-blog.csdnimg.cn/img_convert/f30cd6427faf25a25eddb1f609265d2e.gif
[js_js_js_js_12]: https://img-blog.csdnimg.cn/img_convert/dabffbda77540590ed45d84a5883122a.gif
[js_js_js_js_13]: https://img-blog.csdnimg.cn/img_convert/99fbc4e8f91d610cebaf4e8e9b3231dd.gif
[js_js_js_js_14]: https://img-blog.csdnimg.cn/img_convert/afc28733487580fed77ade756f056e56.gif
[js_js_js_js_15]: https://img-blog.csdnimg.cn/img_convert/150ac0f07f0ccadf43fffa22d170202b.png