如何从对象中过滤undefined？MySQL查询生成的jQuery代码报错求助

1. 如何从对象中过滤掉undefined值？ #

咱们有几种简单可靠的方法来清理对象中的undefined属性，按需选择就行：

方法1：用Object.entries() + reduce()组合 #

通过遍历对象的键值对，只保留值不为undefined的项，逻辑清晰易懂：

const obj = { name: "Alice", age: undefined, city: "New York", job: undefined };

const filteredObj = Object.entries(obj).reduce((acc, [key, value]) => {
  if (value !== undefined) {
    acc[key] = value;
  }
  return acc;
}, {});

console.log(filteredObj); // { name: "Alice", city: "New York" }

方法2：用Object.fromEntries()简化代码 #

ES2019引入的Object.fromEntries可以直接把过滤后的键值对数组转回对象，写法更简洁：

const obj = { name: "Bob", email: undefined, country: "Canada", hobby: undefined };

const filteredObj = Object.fromEntries(
  Object.entries(obj).filter(([_, value]) => value !== undefined)
);

console.log(filteredObj); // { name: "Bob", country: "Canada" }

方法3：传统for...in循环（兼容旧环境） #

如果需要兼容低版本浏览器，这种基础方法也很实用：

const obj = { id: 123, status: undefined, type: "user", notes: undefined };
const filteredObj = {};

for (const key in obj) {
  // 记得加hasOwnProperty判断，避免遍历到原型链上的属性
  if (obj.hasOwnProperty(key) && obj[key] !== undefined) {
    filteredObj[key] = obj[key];
  }
}

console.log(filteredObj); // { id: 123, type: "user" }

2. 解决filterFunnel函数中的"dom is not defined"与循环问题 #

先帮你拆解问题根源：你用Object.keys(filterLists)来遍历jQuery对象，但jQuery对象的内部结构藏了不少额外属性（比如length、各种原型方法），所以Object.keys(filterLists)会把这些非元素的键也返回出来，循环到这些键的时候，filterLists[i]自然就是undefined，这就触发了那个错误。

另外直接用普通for循环遍历jQuery对象也不是最佳实践，下面是修复后的完整方案：

修复步骤1：改用jQuery的.each()遍历元素 #

jQuery自带的.each()会自动遍历所有匹配的DOM元素，完全避开内部属性，代码更安全：

function filterFunnel(filterid){ 
    let filterLists = $("#funnel-filters").children().filter(".filter"); 
    let queryParts = []; // 用数组存查询条件，最后拼接更灵活

    // 使用jQuery.each遍历每个.filter元素
    filterLists.each(function() {
        const $dom = $(this); // 转为jQuery对象，方便调用val()、attr()方法
        const value = $dom.val();
        const id = $dom.attr("id");

        if (value !== "Select" && value !== "") {
            queryParts.push(`${id} = '${value}'`); // 给值加单引号，避免SQL语法错误
        }
    });

    // 拼接最终SQL语句
    let query = "SELECT * FROM funnel";
    if (queryParts.length > 0) {
        query += " WHERE " + queryParts.join(" AND ");
    }

    console.log(query);
}

修复步骤2：解决你提到的"异步"疑问 #

你说循环内console.log正常、外部不行？其实原代码里的循环是同步的，问题出在循环拿到了undefined的dom，导致query拼接出错。修复循环后这个问题会自动解决。如果确实涉及DOM未加载完成的情况，可以把函数调用放在$(document).ready()里：

$(document).ready(function() {
    // 确保DOM完全加载后再执行函数
    filterFunnel("your-filter-id");
});

重要提醒：避免SQL注入风险 #

上面的代码解决了DOM问题，但直接把用户输入拼到SQL里有SQL注入的风险。如果你的后端支持参数化查询，一定要改成参数化方式（以Node.js的mysql2库为例）：

// 后端示例（Node.js + mysql2）
const query = "SELECT * FROM funnel WHERE ?";
const conditions = {};

// 前端收集条件后传给后端
filterLists.each(function() {
    const $dom = $(this);
    const value = $dom.val();
    const id = $dom.attr("id");
    if (value !== "Select" && value !== "") {
        conditions[id] = value;
    }
});

// 后端用参数化查询执行
connection.query(query, [conditions], function(err, results) {
    // 处理查询结果
});

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