React中常⽤数组⽅法的使⽤汇总React中常⽤数组⽅法的使⽤汇总:
1.forEach()
遍历每⼀个对象
let ids =[];
dataSource.forEach(x =>{
ids.push(x.id);
})
2.filter()
filter过滤出满⾜条件的对象,并⽣成新的数组
2.1. 过滤数据
const dataSource=[
{id:'00011', name:'燃⽓具1'},
{id:'00012', name:'净⽔器1'},
{id:'00013', name:'⼤家电1'},
{id:'00014', name:'厨房⼩店1'},
{id:'00015', name:'⽣活电器1'},
{id:'00016', name:'配件1'}
];
const newData = dataSource.filter(v => v.id!=='00011)
2.2. 过滤数组中不存在的字段,并进⾏拼接
addressName:[
provinceName,
cityName,
detailaddr,
contPerson,
tel,
]
.filter(Boolean)//过滤掉为null的字段
.join('/'),//每个字段之间⽤ / 进⾏拼接
显⽰效果:河南/洛阳/
3.some()
遍历数组的每⼀项,若其中⼀项为 true,则返回true;
const qtyFlag = dataSource.some(x =>{
return x.sinQty + x.sinQtyEd <= x.qty
})
if(!qtyFlag){
message.warn('数量不正确')
}
4. map()
每⼀个元素调⽤⼀个回调函数后,返回⼀个新数组
levelList.map((x)=>{
return(
<Checkbox
value={x.id}
key={x.id}
style={{ marginLeft:0}}
>
{x.name}
</Checkbox>
);
})
//⽣成多个复选框
5.every()
测试⼀个数组内的所有元素是否都能通过某个指定函数的测试。它返回⼀个布尔值。
const isFlag=(currentValue)=> currentValue <40;
const array1 =[1,30,39,29,10,13];
console.log(array1.every(isFlag));
// true
6.find()
到满⾜条件的数据
const findItem = cancelReasonList.find(_ => _.code === cancelReason)
||{
filter过滤对象数组valDesc: undefined,
}
7.includes()
判断是否包含某值
option?.value.includes(val || option?.children.includes(val))
8.split()
⽤于把⼀个字符串分割成字符串数组。
reasonCodeList.filter(_=>_.es1?.split(',')?.includes('SO'))
总结
以上数组⽅法是⾃⼰在开发过程中经常使⽤的,后续会继续补充(内容来⾃新⼿⼩⽩)。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论