背景:
最近做的一个小程序的购物车模块刚好用到了数组的几个方法,因此结合这个项目,浅谈数组的常用遍历,以及如何在恰当的情况下使用对应的方法。
实际例子:
一:map:对返回数据做格式处理
map最常见的项目中是对接口返回数据中,格式处理,这个项目中,后端接口返回的数据中时间为时间戳,但是前端需要展示为YYYY-HH-MM的格式,那么就可以将返回的数据在赋值前直接通过map做处理,返回一个新的数组,由于map只会返回你处理的部分因此,还得将原对象通过ES6语法 ...展开运算符做解构,这样处理过的数据就会覆盖前面的原始数据,并且原始数据也不会在新数组中丢失;
二:filter:对数据进行过滤
这个项目中,需要我前端对当前购物车列表中的商品做总共消耗积分的计算,但是列表包含了已下架/已售罄的商品,那么我们就可以在计算前,通过filter对列表数据先进行过滤,将已下架/已售罄的过滤掉,flterGoods函数返回一个过滤后的数组(status为true和stock不为0是正在上架的商品),我们在计算消耗总积分前对调用该函数;
三:some:只要有一条数据符合则返回true,并退出循环,适合根据数据中是否符合条件,来动态展示样式。
购物车这里产品需求是,列表中含有已下架/已售罄的商品,用户点击按钮,就得给出提示,让用户删除已下架/已售罄商品后再结算,所以用some的好处是,当商品列表中有一项符合条件则返回true,并且退出循环,这样更高效;
四:forEach:和for循环类似,遍历每一项,注意:返回为undefined;
这里是将filter处理的商品列表数组中,商品的总消耗积分和总数计算出来,用作购物车后面的商品数量,以及所需积分展示,所以用到了forEach;对每一项做处理;
总结
数组的几种方法在项目中最常见的用法就是这些,其实用法都很简单,难的是什么情况用哪个,俗话说物多必乱,但是看完这篇结合实际情况的讲解,希望你能对几个api用法更通透;