处理数组空值

前言:大家是不是经常很头疼数据中存在一些诸如undefined、null等字符的情况呢?本文介绍如果快速过滤掉这些数据

用map操作数组一般是很常见的使用方式,但是map需要我们返回一个值,我们通常会判断这个值是否存在,存在才会返回,如下:

const cameraData = collect.map(item => {
	const res = await service.getCameraInfo(item.id);
	if(res) return res;
})

但是呢,eslint/snoar又会要求我们返回一个默认值,即当if条件不成立时,返回一个其他值,如下:

const cameraData = collect.map(item => {
	const res = await service.getCameraInfo(item.id);
	if(res) return res;
	return null;
})

这样有可能会导致我们最终拿到的数据存在一些实际并不需要的返回值,结果如下:

camera : [
	{ cameraId: '1', cameraName: '摄像头一', cameraUrl: 'http://1.2.3.4.flv' }{ cameraId: '2', cameraName: '摄像头二', cameraUrl: 'http://1.2.3.5.flv'  }null
]

还有一种场景是,我们会在map里去获取数据里某个指定的字段返回后组成一个数组,当不含有这个字段也会默认返回undefined,如下:

const data = [
	{ name: '123', count: 1 },
	{ name: '456', count: 2 },
	{ name: '789', count: 3 },
	{ count: 1, age: 23 },
]

const result = data.map(item => item.name);
// result : ['123', '456', '789', undefined]

所以处理掉数据中这些不需要的空值就是必要的。

进入主题:本文推荐两种处理数组中空值/不合法值的方式,通过 filter 方法

方法一:通过Boolean类型转换过滤掉为 false 的值
const data = ['1', 2, '3.jpg', '', ' ', undefined, null, false]
const fiterResult1 = data.filter(Boolean);
// fiterResult1 : ["1", 2, "3.jpg", " "]
方法二:通过 逻辑与 简写实现
const data = ['1', 2, '3.jpg', '', ' ', undefined, null, false]
const fiterResult2 = data.filter(item => item);
// fiterResult1 : ["1", 2, "3.jpg", " "]

// 上述方法相当于:判断item是否存在,逻辑与,前者存在,然后判断后者是否存在,返回,但是两者都是同一元素,即可以省略
// const fiterResult2 = data.filter(item => item && item);

// 即如下 :
/* 
	const fiterResult2 = data.filter(item => {
		if(item) return item
	});
*/

当然了,方法其实还有很多,本文就简单的介绍这两种,剩下的大家自己摸索吧。

期待能够对你有所帮助~~

如有问题,请指出,接受批评。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坏丶毛病

很庆幸此文有幸对您有帮助 ~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值