为何for-of循环中元素prev操作style时提示undefined？

我需要根据用户搜索框的输入内容，过滤数组中对象对应的DOM元素显示状态（判断依据是对象的prev.author属性），于是用for-of循环遍历数组。代码里特意加了两次检查确认prev变量已定义，运行时这两次检查都输出"defined"，value也能正确获取用户输入，但执行prev.style.display时却报错：

Uncaught TypeError: Cannot set properties of undefined (reading 'style')

明明循环里已经定义了prev，实在找不到问题所在，求指点。

我的代码： #

for (const prev of displayedPrevs) {
     console.log(prev);
     console.log(prev.author);
     console.log(typeof prev.author);
     
     // 第一次检查：输出"defined"
     if (typeof prev === 'undefined') {
          console.log('undefined');
     } else {
          console.log('defined')
     }

     if (prev.author.toLowerCase().trim().includes(value)) {
          // 第二次检查：输出"defined"
          if (typeof prev === 'undefined') {
               console.log('undefined');
          } else {
               console.log('defined');
          }

          console.log('yes');
          prev.style.display = 'block'; // 报错位置
     } else {
          console.log('no');
          prev.style.display = 'none'; // 报错位置
     }
}

问题根源与解决方法 #

你完全误解了报错的意思：prev变量本身是定义过的，但它不是DOM元素对象，所以没有style属性。

• 从你能正常打印prev.author可以看出，displayedPrevs数组里的元素是业务数据对象（比如从后端接口拿到的作者信息），而不是页面上的DOM节点。你把数据对象当成DOM元素来操作style，自然会触发"无法读取undefined的style属性"的错误——因为数据对象根本没有style这个属性。
• 你加的typeof prev === 'undefined'检查毫无意义，它只能判断变量有没有值，但没法判断变量的类型是不是DOM元素。

正确的处理方式：

你需要把数据对象和对应的DOM元素关联起来，再操作DOM的样式：

1. 给页面上每个需要控制的DOM元素添加自定义属性，比如data-author，值对应数据对象的author字段；
2. 遍历数据数组时，根据author值找到对应的DOM元素，再修改它的style。

示例代码：

// 遍历数据数组
for (const data of displayedPrevs) {
  // 根据author值查找对应的DOM元素
  const targetElement = document.querySelector(`[data-author="${data.author}"]`);
  if (!targetElement) continue; // 找不到对应DOM就跳过

  // 根据搜索值控制显示状态
  if (data.author.toLowerCase().trim().includes(value)) {
    targetElement.style.display = 'block';
  } else {
    targetElement.style.display = 'none';
  }
}

内容的提问来源于stack exchange，提问作者Ethan G.