如何在JS中检查对象值是否为null并过滤空值以遍历对象

问题描述 #

我的对象部分值不在定义域内，因此为null值。遍历该对象时如何过滤掉这些null值？以下是我编写的代码，但并未生效：

function enLanguage(){
    let value1 = Object.values(dicEnglish);
    let key1 = Object.keys(dicEnglish);
    for (let y=0; y<50; y++){
      if ((typeof key1[y] === "object") || (typeof value1[y] ==="object")){
        continue;
      }else{
        let text1 = value1[y];
        document.getElementById(key1[y]).textContent = text1;
        key1[y].textContent=value1[y]}}}

问题分析 #

你的代码存在几个核心问题导致失效：

• 循环范围不合理：固定循环50次，但dicEnglish的键值对数量未必是50，会遍历到不存在的索引，引发undefined相关问题。
• 判断逻辑错误：key1[y]是字符串，typeof结果永远是string，这个判断完全多余；而null的typeof确实是object，但你的后续代码存在错误操作，导致过滤逻辑没起作用。
• 无效DOM操作：key1[y].textContent=value1[y]这一行完全错误——key1[y]是字符串，不存在textContent属性，这会直接抛出错误中断代码执行。

解决方案 #

推荐使用Object.entries()同时获取键和值，遍历过程中直接过滤null值，再安全执行DOM操作：

写法一：for...of循环 #

function enLanguage() {
  // 遍历对象的所有键值对
  for (const [key, value] of Object.entries(dicEnglish)) {
    // 过滤null和undefined值
    if (value === null || value === undefined) {
      continue;
    }
    // 先获取DOM元素，存在时再赋值
    const targetElement = document.getElementById(key);
    if (targetElement) {
      targetElement.textContent = value;
    }
  }
}

写法二：forEach遍历 #

function enLanguage() {
  Object.entries(dicEnglish).forEach(([key, value]) => {
    // 仅处理非null/undefined的值
    if (value !== null && value !== undefined) {
      const targetElement = document.getElementById(key);
      if (targetElement) {
        targetElement.textContent = value;
      }
    }
  });
}

关键说明 #

• Object.entries()能直接获取键值对数组，避免分开取keys和values后索引不一致的问题。
• 直接判断value === null比用typeof更精准，不会误判其他对象类型的值。
• 操作DOM前先检查元素是否存在，避免因元素未找到导致的报错。

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