遍历对象和for of 遍历对象

92 阅读1分钟
//怎么遍历一个对象
      let obj = {
        name: "小明",
        age: 13,
        sex: "男",
      };
      //获取指定对象属性的描述对象
      //   configurable: true;
      //   enumerable: true;  是否是可枚举属性  true 是 false 否
      //   value: "小明";
      //   writable: true;
      console.log(Object.getOwnPropertyDescriptor(obj, "name"));

      //1、for...in  会遍历属性prototype上的值
      for (let key in obj) {
        console.log(key, obj[key]);
      }

      //2、Object.keys 遍历可枚举属性
      Object.keys(obj).forEach((el) => {
        console.log(el, obj[el]);
      });

      //3、Object.getOwnPropertyNames   也返回不可枚举的属性
      Object.getOwnPropertyNames(obj).forEach((key) => {
        console.log(key, obj[key]);
      });

      //4、Object.entries 返回一个二维数组
      Object.entries(obj).forEach(([key, value]) => {
        console.log(key, value);
      });
      console.log(Object.entries(obj));

      //5、Reflect.ownKeys  也返回不可枚举的属性
      Reflect.ownKeys(obj).forEach((key) => {
        console.log(key, obj[key]);
      });

      //使用for of 遍历一个对象
      //对象 默认是不可迭代的  而for of 只遍历可迭代属性
      //ES6 提出了一个 Iterator  接口 ,为各种不同的数据结构提供了一个统一的访问机制,只要部署了该iterator 接口 ,都可以完成遍历操作

      //Tterator
      //返回一个有next方法的 对象
      //next()方法 ,返回对象中存在value 和 done 两个属性
      //value:当前迭代的值;done:是否迭代完成

      obj[Symbol.iterator] = function () {
        let keys = Object.keys(this);
        console.log(keys);

        let index = 0;
        return {
          next: () => {
            if (index < keys.length) {
              let res = {
                value: [keys[index], this[keys[index]]],
                done: false,
              };
              index++;
              return res;
            } else {
              let res = {
                value: undefined,
                done: true,
              };
              return res;
            }
          },
        };
      };

      for (let [key, value] of obj) {
        console.log(key, value, "for...of");
      }