大佬们好,我叫小K是刚毕业自学前端,最近在项目中运用到涉及数组操作,有空就归纳一下用法。
一、some和every
some和every都是js中的迭代函数, some找到一个满足条件就返回true,
而every必须是全部都满足的时候才会返回true, 然后return后的内容是要判断的逻辑。
- every()是对数组中每一项进行判断逻辑,如果每一项都符合条件 则返回true;
- some()是对数组中每一项进行判断逻辑,如果任一一项符合条件 则返回true;
some()和every()的参数:
1. item (每次遍历得到的值)
2. index(当前遍历的下标)
3. array(数组本身)
4. return(写判断逻辑)
实例:
var arr = [ 1, 2, 3, 4, 5, 6 ];
arr.some( function( item, index, array )=>{
console.log( 'item=' + item + ',index='+index+',array='+array );
return item > 3;
})
arr.every(( item, index, array )=>{
console.log( 'item=' + item + ',index='+index+',array='+array );
return item > 3;
})
案例: 在批量订餐时候,若某餐超过了截止时间是提示"订餐时间超时;请重新订餐"。
//判断后端返回的数据 status字段是否为3 (逾期),若选取的餐有一餐已经逾期点击提交按钮则提示,无法请求提交订餐接口
if (this.dataList.some(item => item.status === STATUS_TYPE.OVERDUE.VALUE)) {
return this.$u.func.showToast({title: "订餐时间超时;请重新订餐"})
}
二、Map
对内部的每一个元素做一个相同的操作处理,然后返回一个新的数组
- 不会改变原来数组的值
- 会返回一个新数组
map()的参数:
1. item (每次遍历得到的值)
2. index(当前遍历的下标)
3. array(数组本身)
4. return(写判断逻辑)
实例:
const arr = [1,2,3,4,5]
const arr_after_map = arr.map((currentVal,index,arrs)=>{
return currentVal*currentVal
})
console.log("原数组的值为",arr)
console.log("修改之后的值为",arr_after_map)
结果:
三、find()、filter()
共同点:find和filter都是查找函数,查找目标元素;
区别:
- filter返回的是数组,find返回的是对象。
- find()当查找不到时候会返回undefined
- filter()查找不到时候会返回[]
注意:find()是找到第一个元素之后就不会再往后遍历了!!!
实例:
const list =[{'name': '1', index: 1}, {'name': '2'}, {'name': '1'}]
const list2 = list.find(item => item.name === '1')
const list3 = list.filter(item => item.name === '1')
console.log('list2', list2);
console.log('list3', list3);
结果: