Tyepscript数组遍历后返回结果类型带undefined的问题

有个这样的数组场景,数组 dayArr 的成员代表每一天的数据
const dayArr = [
        {
                day: 0, // 周日
                doSth: 'xxxx'
        }, {
                day: 1,
                doSth: 'xxxx'
        }, {
                day: 2,
                doSth: 'xxxx'
        }, {
                day: 3,
                doSth: 'xxxx'
        }, {
                day: 4,
                doSth: 'xxxx'
        }, {
                day: 5, 
                doSth: 'xxxx'
        }, {
                day: 6, // 周六
                doSth: 'xxxx'
        }
        // .......还有很多条
]

但我们现在需要得到数组 dayArr 中不包含周末的数据的一个新数组,于是开始对数组dayArr进行遍历处理。

这时候最理想的方式就是使用数组过滤 filter,下面来看看处理效果

let newDayArr = dayArr.filter( item => {
       if (  item.day !== 0 && item.day !== 6 ) return item;
});

上面操作完美过滤掉了周末的数据,现在新数组 newDayArr 就只剩周一到周五的数据了。

但,如果 newDayArr 是有个类型限定的,比如下面这样

interface DataType = {
        day: number;
        doSth: string;
}

let newDayArr: DataType[ ] = [ ];

这时候对 newDayArr 赋值就会报错(开发过程不一定报错,但打包检测一定会报错)。
因为 dayArr.filter 处理后返回的结果中可能包含有 undefined;
newDayArr = dayArr.filter( item => {
       if (  item.day !== 0 && item.day !== 6 ) return item;
})
;

是不是很不明白,命名做了判断,不等于0或6的,才返回,而且返回的都是一个非 undefined 的对象,怎么就提示结果可能存在 undefined 呢???

其实问题就出在 if 判断,试想一下,if 不成立时,程序怎么处理呢?函数中,没有明确写 return 的地方,默认都是返回 undefined,而 filter 就是一个过滤函数。

至此,结论是不能使用 filter 过滤数据。

正确的处理方式:

interface DataType = {
        day: number;
        doSth: string;
}

const newDayArr: DataType[ ] = [ ];

dayArr.forEach( item => {
        // 确保了 push 的每个对象都不会是 undefined
       if (  item.day !== 0 && item.day !== 6 )  newDayArr.push(item);
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值