迹忆客 专注技术分享

要检查 React 中的数组是否为空，请访问其 length 属性，例如 arr.length。 如果一个数组的长度等于 0，那么它是空的。 如果数组的长度大于 0，则它不为空。

import {useEffect, useState} from 'react';

export default function App() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    if (messages.length > 0) {
      console.log('array is NOT empty');
    }

    if (messages?.length > 0) {
      console.log('array is NOT empty');
    }

    if (messages.length === 0) {
      console.log('array is empty');
    }
  }, [messages]);

  return (
    <div>
      <h2>Array: {JSON.stringify(messages)}</h2>

      <button onClick={() => setMessages(current => [...current, 'hello'])}>
        Add message
      </button>
    </div>
  );
}

第一个 if 语句检查数组的长度是否大于 0。

if 块只会在数组不为空时运行。

第二个 if 语句使用可选链接 (?.) 运算符来避免在引用为空（null 或 undefine）时出现错误。

const arr = ['hi'];

if (arr?.length > 0) {
  console.log('array is not empty');
}

如果引用为空（ null 或 undefine ），则可选链接 (?.) 运算符会短路。

换句话说，如果 arr 变量存储了 null 或 undefined 值，则运算符将返回 undefined 而不是尝试访问 null 值的 length 属性并导致运行时错误。

const arr = null;

if (arr?.length > 0) {
  console.log('array is not empty');
}

如果需要检查数组是否为空，请检查其长度属性是否返回 0。

const arr = [];

if (arr.length === 0) {
  console.log('array is empty');
}

如果我们不确定变量是否存储数组，可以在访问其长度属性之前检查其值的类型。

let arr = ['hello'];

if (Array.isArray(arr) && arr.length > 0) {
  // 如果此代码块运行
  // 👉️ arr 不为空
  console.log('arr is not empty')
}

我们在 if 语句中有 2 个条件。 我们使用 && (and) 运算符来表示必须满足两个条件才能运行 if 块。

我们首先检查 arr 变量是否存储了一个数组，然后检查数组的长度是否大于 0。

这种方法类似于可选链接方法，但我更喜欢它，因为可选链接方法不考虑将 arr 设置为字符串的情况。 JavaScript 中的字符串也有一个长度属性。