js如何判空?

在 JavaScript 中,判空(检查变量是否为"空"值)需要针对不同数据类型进行区分。根据你的需求,"空"包括:空数组、空对象、空字符串、0、undefined、null、空 Map、空 Set。

1. 严格判空(仅 null 或 undefined)

javascript 复制代码
if (value == null) { // 等价于 value === null || value === undefined
    console.log("值为 null 或 undefined");
}

2. 宽松判空(包括空字符串、空数组、空对象等)

方法 1:自定义 isEmpty 函数

javascript 复制代码
function isEmpty(value) {
    return (
        value == null || // null 或 undefined
        (typeof value === "string" && value.trim() === "") || // 空字符串或全空格
        (Array.isArray(value) && value.length === 0) || // 空数组
        (typeof value === "object" && Object.keys(value).length === 0) || // 空对象
        (value instanceof Map && value.size === 0) || // 空 Map
        (value instanceof Set && value.size === 0) // 空 Set
        // 注意:0 不算空,除非额外处理
    );
}

// 测试
console.log(isEmpty(null)); // true
console.log(isEmpty(undefined)); // true
console.log(isEmpty("")); // true
console.log(isEmpty("   ")); // true
console.log(isEmpty([])); // true
console.log(isEmpty({})); // true
console.log(isEmpty(new Map())); // true
console.log(isEmpty(new Set())); // true
console.log(isEmpty(0)); // false(默认不算空,除非修改逻辑)

方法 2:如果 0 也算空

javascript 复制代码
function isEmpty(value) {
    return (
        value == null ||
        (typeof value === "string" && value.trim() === "") ||
        (Array.isArray(value) && value.length === 0) ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (value instanceof Map && value.size === 0) ||
        (value instanceof Set && value.size === 0) ||
        value === 0 // 0 也算空
    );
}

console.log(isEmpty(0)); // true

3. 特殊情况处理

(1)0 是否算空?

  • 默认情况下,0 是一个有效的数字,不算空。
  • 如果业务上需要 0 也算空,可以在 isEmpty 里加上 value === 0。

(2)false 是否算空?

  • false 是布尔值,通常不算空,除非特别处理。

(3)NaN 是否算空?

  • NaN 是无效数字,可以额外判断:
javascript 复制代码
Number.isNaN(value)

4. 完整判空方案(推荐)

javascript 复制代码
function isEmpty(value, treatZeroAsEmpty = false) {
    return (
        value == null ||
        (typeof value === "string" && value.trim() === "") ||
        (Array.isArray(value) && value.length === 0) ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (value instanceof Map && value.size === 0) ||
        (value instanceof Set && value.size === 0) ||
        (treatZeroAsEmpty && value === 0) // 可选:0 是否算空
    );
}

// 使用
console.log(isEmpty(0)); // false
console.log(isEmpty(0, true)); // true(0 算空)

5. 总结

数据类型 判空方式
null / undefined value == null
空字符串 "" value === "" 或 value.trim() === ""
空数组 [] Array.isArray(value) && value.length === 0
空对象 {} Object.keys(value).length === 0
空 Map value instanceof Map && value.size === 0
空 Set value instanceof Set && value.size === 0
0 默认不算空,除非额外处理
false 通常不算空
NaN Number.isNaN(value)

6. 最终推荐

javascript 复制代码
function isEmpty(value, options = { treatZeroAsEmpty: false }) {
    return (
        value == null ||
        (typeof value === "string" && value.trim() === "") ||
        (Array.isArray(value) && value.length === 0) ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (value instanceof Map && value.size === 0) ||
        (value instanceof Set && value.size === 0) ||
        (options.treatZeroAsEmpty && value === 0)
    );
}
相关推荐
心中无石马1 小时前
uniapp引入tailwindcss4.x
前端·css·uni-app
焰火19991 小时前
[Vue]可重置的响应式状态reactive
前端·vue.js
陆枫Larry1 小时前
CSS transform scale:图片放大效果背后的原理
前端
昇腾CANN2 小时前
TileLang-Ascend 算子性能优化方法与实操
开发语言·javascript·性能优化·昇腾·cann
老王以为2 小时前
为什么 React 和 Vue 不一样?
前端·vue.js·react.js
web打印社区2 小时前
2026最新Web静默打印解决方案,无插件无预览,完美替代Lodop
前端·javascript·vue.js·electron·pdf
这个DBA有点耶2 小时前
分组排名不用窗口函数?那你还在写几十行的子查询
前端·代码规范
ZhiqianXia2 小时前
《The Design of Design》阅读笔记
前端·笔记·microsoft
有马贵将2 小时前
【5】微前端知识点总结
前端·架构
mkae2 小时前
eBPF高性能版fail2ban
前端