React常规篇:判断一个变量是空数组/空对象,需要返回false的情况

最新推荐文章于 2025-07-14 13:52:46 发布

原创最新推荐文章于 2025-07-14 13:52:46 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript

本文探讨了在处理网络接口返回的空数据时，如何准确判断数据是否为空数组或空对象。通过检查数组长度、JSON字符串表示形式以及对象属性长度，可以有效地确定数据状态。示例代码展示了利用数组长度、JSON.stringify()以及Object.keys().length进行判断的方法。

实际情况,请求网络接口时,当数据为空时,一般会返回空对象或者是空数组的情况,我们需要当数据是空数组/空对象时,做出一些逻辑处理

由于空数组/空对象的Boolean都是true,无法我们无法直接使用Boolean来判断.
在这里插入图片描述

让一个变量时空对象/空数组,能过返回一个false的解决办法:

针对数组

example1:利用数组长度的Boolean值来判断

  useEffect(() => {
    let arr = [1,4,5,6,7,7,8,8,];
    let test = [];
    console.log('打印空数组的长度', test.length, '长度的布尔值', Boolean(test.length));
    console.log('打印非空数组的长度', arr.length, '长度的布尔值', Boolean(arr.length));
  },[])

在这里插入图片描述

example2:根据数组的JSON字符串是否返回[];

  useEffect(() => {
    let arr: any[] = [1, 4, 5, 6, 7, 7, 8, 8,];
    let test: any[] = [];
    console.log('打印空数组', JSON.stringify(test) === '[]');
    console.log('打印非空数组', JSON.stringify(arr) === '[]');
  }, [])

在这里插入图片描述

针对对象

example1:根据对象的属性长度
example2:根据对象的JSON字符串是否返回{}

   let empty = {};
   let obj = {
     name: 'lop',
     age: 20
   }
     
  //  根据对象的属性长度
  console.log('打印空对象的属性的长度', Object.keys(empty).length);
  console.log('打印非空对象的属性的长度', Object.keys(obj).length);

  // 根据对象的JSON字符串是否返回{}
  console.log('打印空对象的JSON字符串', JSON.stringify(empty) === '{}');
  console.log('打印非空对象的JSON字符串', JSON.stringify(obj) === '{}');