js 怎么判断数组是否为空

学完这篇，你能准确判断一个 JavaScript 数组是否为空，并且分清「空数组」和「根本没拿到数组」这两种完全不同的情况，不再被 if (arr) 这类写法误导。

先给结论：判断数组是否为空，标准写法是 Array.isArray(arr) && arr.length === 0；如果已经确定 arr 是数组，直接写 arr.length === 0 就行。

第一步：用 length 判断数组是否为空

这一步要拿到最基础、最常用的判空写法，得到的结果是：只要数组里没有任何元素，表达式就返回 true。

const arr = [];

if (arr.length === 0) {
  console.log('空数组');
}

length 是数组自身的属性，读取它不需要遍历，性能最好。日常业务里判断列表有没有数据、要不要显示「暂无数据」占位图，用这一句就够。

注意：不要写成 if (arr.length) 就以为是在判空。0 是假值，if (arr.length) 成立的恰恰是「非空」，判断方向反了会导致有数据时不渲染。

第二步：先确认它是不是数组

这一步要解决的问题是：如果传进来的不是数组，比如 null、undefined、字符串或者对象，直接读 .length 可能报错或得到错误结果。做完之后你会得到一个不会因类型错误崩掉的判断。

function isArrayEmpty(value) {
  return Array.isArray(value) && value.length === 0;
}

isArrayEmpty([]);        // true
isArrayEmpty([1]);       // false
isArrayEmpty(null);      // false
isArrayEmpty('');        // false
isArrayEmpty({});        // false

Array.isArray 是最可靠的类型判断，typeof [] 返回的是 'object'，不能用。

注意：Array.isArray 对 arguments、NodeList、document.querySelectorAll 的返回值都返回 false。这类「类数组」如果你只想看有没有内容，直接判断 .length === 0 即可，不要用 isArrayEmpty。

第三步：区分「空数组」和「没拿到数组」

这一步要把判空和判空值分开，做完之后你能避免把接口没返回数据的情况当成空数组处理。

// 空数组：拿到了数组，但里面没东西
const a = [];

// 空值：压根没拿到数组
const b = null;
const c = undefined;

如果需要同时判断「有数组且数组非空」，用可选链最简洁：

if (arr?.length > 0) {
  // 有数据
}

arr?.length 在 arr 为 null 或 undefined 时返回 undefined，undefined > 0 是 false，不会报错。

注意：arr?.length === 0 在 arr 为 null 时返回 false，这通常是你想要的结果；但如果你希望「null 也算空」，就要写成 !arr || arr.length === 0，这两种语义要按业务自行取舍，别混用。

第四步：避开几个常见错误写法

这一步把网上流传但不可靠的写法挑出来，做完之后你能看懂别人代码里的坑。

// 错误 1：空数组是 truthy
if (arr) { /* 空数组也会进这里 */ }

// 错误 2：靠序列化判断，性能差且会误判
JSON.stringify(arr) === '[]';

// 错误 3：用 Object.keys，稀疏数组会出错
Object.keys(new Array(3)).length === 0;  // true，但 length 是 3

第三条尤其要注意：new Array(3) 生成长度为 3 的稀疏数组，用 Object.keys 判断会认为它是空的，而 length === 0 判断为非空。以 length 为准更符合数组语义。

第五步：框架里的响应式数组

这一步处理 Vue、React 项目里的特殊情况。如果你用 Vue 2，修改数组长度不会触发视图更新：

this.list.length = 0;   // 视图不更新
this.list.splice(0);    // 正确，可触发更新

Vue 3 和 React 里直接赋新数组或改 length 都正常，但推荐统一用「赋新数组」的方式，行为最可控。

注意：在 React 中直接 arr.length = 0 修改原数组不会触发重渲染，必须 setList([]) 换一个新引用。

小结

• 数组判空首选 arr.length === 0，性能最好、语义最清楚。
• 不确定类型时用 Array.isArray(arr) && arr.length === 0。
• if (arr) 判断不出空数组，空数组是 truthy。
• 别用 JSON.stringify 或 Object.keys 判空，性能和稀疏数组都会出问题。
• 类数组（arguments、NodeList）直接看 .length，不要套 Array.isArray。
• 区分「空数组」和 null/undefined，用可选链 arr?.length > 0 处理更方便。
• 框架里改数组长度要注意响应式，Vue 2 用 splice(0)，React 换新引用。

更多 JS 实战问题可以到 GJ站长论坛的「技术交流 - 前端开发 - JS」版块发帖讨论，发帖前记得先上传头像。