处理数组空值

分手后的思念是犯贱 2021-09-08 05:20 410阅读 0赞

#### 前言：大家是不是经常很头疼数据中存在一些诸如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 }); */

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

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

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