自学前端小白实践总结-数组的常用处理逻辑函数

36 阅读2分钟

大佬们好,我叫小K是刚毕业自学前端,最近在项目中运用到涉及数组操作,有空就归纳一下用法。

一、some和every

someevery都是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)

结果: image.png

三、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);

结果: image.png