惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 三生石上(FineUI控件)
U
Unit 42
人人都是产品经理
人人都是产品经理
罗磊的独立博客
Recent Announcements
Recent Announcements
云风的 BLOG
云风的 BLOG
aimingoo的专栏
aimingoo的专栏
T
Tailwind CSS Blog
GbyAI
GbyAI
Blog — PlanetScale
Blog — PlanetScale
I
InfoQ
Last Week in AI
Last Week in AI
宝玉的分享
宝玉的分享
B
Blog RSS Feed
WordPress大学
WordPress大学
腾讯CDC
H
Help Net Security
博客园 - Franky
博客园 - 【当耐特】
博客园 - 聂微东
Stack Overflow Blog
Stack Overflow Blog
B
Blog
Vercel News
Vercel News
博客园 - 司徒正美

蚊子的前端博客

微说 | 有的人觉得只要不考XX,一定能考好!-蚊子的前端博客 微说 | 春天来了-蚊子的前端博客 明天和意外不知道哪个先来-蚊子的前端博客 微说 | 既然错过了路口,就及时止损,重新规划路线上路-蚊子的前端博客 微说 | 2025年的出生人口数是792万-蚊子的前端博客 微说 | 工作年终总结,让写对接的接口的数量?-蚊子的前端博客 微说 | 温家宝:没有政治体制改革的成功 经济体制改革不可能进行到底-蚊子的前端博客 微说 | 违法犯罪了该不该被禁言?-蚊子的前端博客 微说 | 不明白为什么在推荐去俄罗斯旅游-蚊子的前端博客 微说 | 易中天论骗子-蚊子的前端博客 微说 | 一场大风吹散了秋天-蚊子的前端博客 微说 | 既要、又要、还要、更要!-蚊子的前端博客 又是一年的国庆雨季-蚊子的前端博客 微说 | 预估下2025年的出生人口数据-蚊子的前端博客 微说 | 可惜了我那些小时候的书本-蚊子的前端博客 微说 | 牛马有的是,驴不够了!-蚊子的前端博客 微说 | 能否有一条非户口也能高考的路-蚊子的前端博客 微说 | 小聊中医-蚊子的前端博客 微说 | 将要制作的一款新产品-蚊子的前端博客 微说 | 做人要有信-蚊子的前端博客 微说 | 好一个正义联盟-蚊子的前端博客 微说 | 都是见过吃过的主儿-蚊子的前端博客 微说 | 追求8小时工作制有错吗?-蚊子的前端博客 微说 | 如果尖锐的批评完全消失-蚊子的前端博客 微说 | 很好!-蚊子的前端博客 微说 | 封禁用户可以,但要告知具体原因-蚊子的前端博客 微说 | 面朝大海,春暖花开-蚊子的前端博客 微说 | 程序员的悲哀是什么?-蚊子的前端博客 微说 | 2025年出生人口的预测-蚊子的前端博客 前端在 LiveKit 中如何获取所有的参与者-蚊子的前端博客
在 JavaScript 如何判断变量是否为空-蚊子的前端博客
author · 2024-10-22 · via 蚊子的前端博客

我们在通过一些参数检索数据时,有些参数其实本身就没必要传给接口,例如:

  • 输入框<Input />对应的参数,若一次也没输入过,通过 Form 表单获取到的是 undefined;但若输入过然后又全部删除了,则得到的是空字符串;
  • 下拉框或级联选择在处于多选状态时,将之前的选项全部清除,其实得到的是空数组;

诸如空字符窜和空数组之类的,其实我们就没必要将其传给后端接口了。

之前我也参考过 lodash 中的 isEmpty,但这个方法不太满足我们的业务场景。在 lodash 的 isEmpty 中:

  • 该方法只检查 value 是否为一个空对象,集合,映射或者 set;
  • 若 value 是 number, string, boolean 等基本类型,该方法会认为是空,即返回 true;

但在实际业务中,比如 true、false、0 等还是有实际意义的。这里我也是根据我们的业务场景,封装了一个判断变量是否为空的方法。

const isParamEmpty = (value) => {
  if (value == null) {
    // 是 null 或 undefined 时,为 true
    return true;
  }
  if (typeof value === "number") {
    /**
     * 若是NaN,则认为是空;
     * 0是合法的
     */
    return value !== value;
  }
  if (typeof value === "string") {
    return value.trim() === "";
  }
  if (Array.isArray(value)) {
    return !value.length;
  }

  const tag = Object.prototype.toString.call(value);
  if (tag == "[object Map]" || tag == "[object Set]") {
    return !value.size;
  }
  if (typeof value === "object") {
    return !Object.keys(value).length;
  }

  return false;
};

使用:

isParamEmpty(null); // true
isParamEmpty(undefined); // true

isParamEmpty(123); // false
isParamEmpty(0); // false
isParamEmpty(false); // false
isParamEmpty(Number.NaN); // true

isParamEmpty("   "); // true
isParamEmpty(" abc  "); // false

isParamEmpty([]); // true
isParamEmpty([1, 2]); // false

isParamEmpty({}); // true
isParamEmpty({ a: 21 }); // false

isParamEmpty(new Map()); // true
isParamEmpty(new Set()); // true

const map = new Map();
map.set("a", 1);
isParamEmpty(map); // false

const set = new Set();
set.add("abc");
isParamEmpty(set); // false

该方法判断了日常业务中的大部分类型。我还把它封装到了kidash的 npm 包中,大家可以直接使用。

import { isParamEmpty } from "kidash";

console.log(isParamEmpty([])); // true