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

大佬们好，我叫小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);

结果：