在 React 中检查数组是否为空

作者

在 React 中检查数组是否为空

Check if an Array is Empty in React

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

应用程序.js
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或undefined）时出现错误。

应用程序.js
const arr = ['hi'];

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

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

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

应用程序.js
const arr = null;

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

如果您需要检查数组是否为空，请检查它的length属性是否返回0。

应用程序.js
const arr = [];

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

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

索引.js
let arr = ['hello'];

if (Array.isArray(arr) && arr.length > 0) {
  // if this code block runs
  // 👉️ arr is not empty
  console.log('arr is not empty')
}

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

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

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

–

发表评论