数组判断 空数组检测：JS中如何判断数组为空

📦 数组判断 | 空数组检测：JS中如何判断数组为空

场景再现：
小明刚写完一个购物车功能，突然发现当用户清空购物车时，页面竟然显示“暂无商品”和“总计：¥0”同时出现！😱 检查代码才发现，if (cartList) 的判断根本没拦住空数组，别笑，这种翻车现场每天都在真实上演…

🔍 为什么空数组检测容易翻车？

JavaScript 中以下情况都会让开发者掉坑：

const arr = []  
// 常见错误姿势 ❌  
if (arr)        // ✅ true（数组对象存在）  
if (arr == true) // ❌ false（隐式转换玄学）  
if (arr.length)  // ❌ false（0转Boolean为false）  

🛠️ 5种正确检测方式（附使用场景）

方法1：length 显式对比（推荐⭐）

if (arr.length === 0) {  
  console.log("我是空数组~");  
}  

优点：性能最佳，意图明确
注意：确保变量已是数组（非null/undefined）

方法2：Array.isArray() 安全版

if (Array.isArray(arr) && arr.length === 0) {  
  console.log("安全无痛的检测！");  
}  

适用场景：不确定传入的是否是数组时

方法3：toString() 魔改检测

if (arr.toString() === '') {  
  console.log("冷知识：空数组转字符串是空值");  
}  

趣味点：[1,2].toString() → "1,2"，而[]→

方法4：ES6 展开运算符

if ([...arr].length === 0) {  
  console.log("创建新数组检测法");  
}  

代价：产生临时数组，性能较差

方法5：some() 高级玩法

if (!arr.some(item => true)) {  
  console.log("用迭代器确认 emptiness");  
}  

适用场景：需要同时检测“空数组+所有元素无效”的情况

💡 避坑指南

1. 防御性编程：先用Array.isArray()排除null/undefined

   function isEmptyArray(target) {  
     return Array.isArray(target) && target.length === 0;  
   }  

2. JSON 序列化陷阱：

   JSON.stringify([]) === '[]' // 可作判断条件，但性能差  

3. Polyfill 方案（针对老浏览器）：

   

   if (!Array.isArray) {  
     Array.isArray = function(arg) {  
       return Object.prototype.toString.call(arg) === '[object Array]';  
     };  
   }  

🏆 终极方案选择建议

2025年新动态：TC39 提案中的 Array.prototype.isEmpty() 方法已进入 Stage 1，未来可能直接调用 arr.isEmpty()！🎉

下次遇到空数组判断,别再被 if (arr) 骗啦！ 🚀