代码改变世界

遍历对象的几种方式

2022-09-01 10:47  WEB前端小菜鸟  阅读(158)  评论(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>