JavaScript 如何判断空值

大家在敲代码的时候，是不是经常碰到“这个值是空的吗？”这种灵魂拷问？比如想判断用户输入的手机号有没有填、表单里的邮箱是不是空的、接口返回的数据是不是没取到，这些场景都绕不开“判断空值”。那前端常用的JavaScript里，有哪些简单又好用的方法？今天就用生活化的例子，把这事说透。

最常用的：用“==”或“===”直接判断

先从最基础的说起。JavaScript里有几个特殊的“空值”：undefined（没赋值的变量）、null（手动设的空值），这俩兄弟是最典型的“空”。比如你声明了一个变量但没赋值，像let name;，它的值就是undefined；如果特意写let age = null;，就是说这个值现在是空的。

这时候用===来判断就很准，因为==有个坑：它会悄悄做类型转换。比如null == undefined返回true，0 == ''也返回true，要是用==判断，很容易把空字符串''或者数字0误当成空。举个例子：你做登录表单，用户没填用户名，输入框的值是空字符串''，如果用if(username == null)判断，结果会是false，但实际应该是用户没填，这就错了。所以判断undefined和null，优先用if(val === null || val === undefined)，或者更偷懒的写法if(val == null)——因为==会把这俩归为一类，不会错。

处理空字符串：别只看“有没有值”，要看“有用没用”

刚才说的空字符串''，很多人容易把它漏掉。比如你写了个表单，用户只敲了空格，或者复制粘贴了个空内容，拿到的值就是''（或者带空格的字符串，比如' '），这时候=== null肯定判断不了。

这时候可以用!来判断，因为空字符串是“假值”（JavaScript里的假值有：''、0、null、undefined、NaN，还有false本身），!会把假值转成true。比如判断用户输入的用户名是不是空，可以写if(!username)，但要注意！如果用户名是0呢？比如用户填了手机号012345，!0也会返回true，这就把合法输入误判成空了。所以如果你的场景允许输入0，就不能用!，得写成if(username === '')，或者用trim()把前后空格去掉再判断：if(username.trim() === '')，这样就算用户只敲了空格，也会被当成空值。

数组和对象的空值：别只看长度，要真的“空”

如果是数组或对象，判断空值又不一样。比如你从接口拿了个待办事项数组，想知道有没有数据，直接看arr.length？不对，要是数组是空的[]，length是0，确实是空；但如果接口返回null，arr.length就会报错，因为null没有length属性。

举个例子：你做一个购物车页面，想判断购物车有没有商品，先得判断cart是不是真的数组，再看长度：if(!Array.isArray(cart) || cart.length === 0)，这样就不会报错。那对象呢？比如你要判断用户信息对象是不是空的{}，不能直接if(obj === {})，因为JavaScript里对象是引用类型，两个空对象的内存地址不一样，===判断会返回false。这时候得用Object.keys()把对象的属性转成数组，再看长度：if(Object.keys(userInfo).length === 0)，这样就能判断这个对象有没有属性了。

避坑提醒：别把“假值”全当空

最后说个大家最容易踩的坑：JavaScript里的假值不止null和undefined，还有0、false、NaN。比如你做统计页面，返回的数值是0（比如本月销售额0元），这时候用!sales判断，会把合法的0当成空，就会漏掉这个数据。所以判断空值的时候，一定要先想清楚“什么是你眼里的‘空’”：是没赋值？是没内容？是没数据？不同场景对应不同的判断方法，别图省事一概而论。

只要把这几个情况搞清楚，以后碰到判断空值的需求，就不会再懵了。