JavaScript字符串场景对象判空及元素属性检测报错问题

在处理字符串（比如接口返回的JSON转成的对象）这类场景时，判断对象是否为空有几种实用的方法，我给你梳理一下：

• 用Object.keys()快速判断
  这个方法会返回对象自身可枚举属性的数组，只要数组长度为0，就说明对象是空的。代码非常简洁：

  const isEmptyObject = obj => Object.keys(obj).length === 0;
  // 示例：
  const strObj = JSON.parse('{}'); // 从字符串解析来的空对象
  console.log(isEmptyObject(strObj)); // 输出 true
  

  这种方法性能不错，而且对于大多数从字符串转换来的对象（比如JSON）完全适用，因为JSON对象的属性都是可枚举的。

• 用JSON.stringify()对比字符串
  如果对象是从字符串来的，反过来把对象转成字符串对比"{}"也能判断：

  const isEmptyObject = obj => JSON.stringify(obj) === "{}";
  

  不过要注意，如果对象里有不可枚举属性或者函数，这个方法会忽略它们，但在纯字符串转换的场景下基本没问题，只是性能比Object.keys()稍差一点。

• 兼容老浏览器的for...in遍历
  如果你需要兼容很老的浏览器（比如IE8及以下），可以用for...in循环结合hasOwnProperty来检查：

  function isEmptyObject(obj) {
    for (let key in obj) {
      // 只检查对象自身的属性，排除原型链上的
      if (obj.hasOwnProperty(key)) {
        return false;
      }
    }
    return true;
  }
  

  这个方法兼容性拉满，就是代码稍微长一点。

你遇到的Uncaught TypeError: Cannot convert undefined or null to object错误，根本原因不是getAttribute的判断逻辑，而是你调用getAttribute的files[i]本身是undefined或者null。

举个常见的场景：比如你用document.querySelectorAll('.files')获取了元素列表，然后循环的时候写了for (let i = 0; i <= files.length; i++)——这里的<=会让i取到files.length，而files是类数组对象，索引从0到length-1，这时候files[i]就是undefined，调用undefined.getAttribute()自然就会抛出这个错误。

要解决这个问题，分两步走：

1. 先确保files[i]是有效的DOM元素
   在检测属性之前，先判断files[i]是否存在：

   for (let i = 0; i < files.length; i++) {
     // 先确认元素存在，再检测属性
     if (files[i] && files[i].getAttribute('data-docid') !== null) {
       // 处理带有data-docid属性的元素
     } else {
       // 处理元素不存在或者没有该属性的情况
     }
   }
   

2. 用更直观的hasAttribute方法判断属性
   其实DOM元素本身有hasAttribute方法，可以直接判断是否存在某个属性，比getAttribute !== null更清晰：

   if (files[i] && files[i].hasAttribute('data-docid')) {
     // 元素存在且带有data-docid属性
   } else {
     // 元素不存在或者没有该属性
   }
   

另外，一定要检查你的循环条件，确保i的范围是0 <= i < files.length，避免超出索引导致files[i]无效。

内容的提问来源于stack exchange，提问作者DMC19