代码改变世界

遍历对象的几种方式

  WEB前端小菜鸟  阅读(147)  评论(0编辑  收藏  举报
复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
        /* 
        
        当初面试的时候紧张了还是咋了,只回答了for in 其他两种我也知道为啥当时没答上呢 我擦 巩固一下
        
        */


      //对象在几种遍历
      const objA = {
        id: 1,
        name: "作业帮",
        age: 30,
        sex: "",
      };
      // 总结第一种for in 第二种 1、Object.keys(obj) 2、Object.values(obj) 第三种:使用Object.getOwnPropertyNames(obj)

      /* 
        
        @1.第一种for in
        */
      /* *************************************** */
      // 注释1
      // for (let key in objA){
      //     console.log(key,'------------',objA[key])
      // }
      // 打印如下
      //  id ------------ 1
      //  name ------------ 作业帮
      //  age ------------ 30
      //  sex ------------ 牛

      /* *************************************** */
      // 注释2
      // 使用for in会遍历对象的所有属性,还可以遍历到原型上的属性和方法
      // Object.prototype.baby = '小宝贝'
      // Object.prototype.get = function() {
      //     console.log('这是原型上的方法');
      // }
      // for (let key in objA){
      //     console.log(key,'------------',objA[key])
      // }
      // 打印如下
      //  id ------------ 1
      //  name ------------ 作业帮
      //  age ------------ 30
      //  sex ------------ 牛
      //  baby ------------ 小宝贝
      //  get ------------ ƒ () {
      //     console.log('这是原型上的方法');
      // }
      /* *************************************** */
      // 注释3 如果不想遍历原型上的属性或方法则 使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性。
      // Object.prototype.baby = '小宝贝'
      // Object.prototype.get = function() {
      //     console.log('这是原型上的方法');
      // }
      // for (let key in objA){
      //     if(objA.hasOwnProperty(key)){
      //         console.log(key,'------------',objA[key])
      //     }

      // }
      // 打印如下
      //  id ------------ 1
      //  name ------------ 作业帮
      //  age ------------ 30
      //  sex ------------ 牛

      /* *************************************** */

      /* 
        
        @2.第二种:

        1)、Object.keys(obj) 参数obj:要返回其枚举自身属性的对象

        2)、Object.values(obj)
        */
        // console.log(Object.keys(objA)) //objA对象的key组成的数组 ['id', 'name', 'age', 'sex']

        // console.log(Object.values(objA))//objA对象的value组成的数组[1, '作业帮', 30, '牛']
        /* 
        
        @3.第三种:使用Object.getOwnPropertyNames(obj)


        */
        console.log(Object.getOwnPropertyNames(objA))//['id', 'name', 'age', 'sex']
        // 在通过循环这个数组去找到对应的值
        Object.getOwnPropertyNames(objA).forEach((item)=>{
            console.log(item,'-----------',objA[item])
        })
        // 打印如下
        //  id ------------ 1
        //  name ------------ 作业帮
        //  age ------------ 30
        //  sex ------------ 牛

    </script>
  </body>
</html>
复制代码

 

相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示