前端数组操作

1.基本特点

方法	返回值类型	特点	参数 v:项， i：索引， selfArr：数组本身‘ acc：上一次返回值
map()	返回新数组，不改变原数组	迭代每一项，不可使用break，continue，return，适用于小数据量	（v,i,selfArr）
filter()		过滤	（v,i,selfArr）
reduce()		汇总数据	详细如下场景
forEach()	无返回值	遍历数组
find()	返回合适的项	只返回第一个匹配的元素
sort()	修改原数组	排序
some()	true/false	数组中只要有一个满足条件就返回true,否则返回false
every()		都满足返回true
includes()		是否包含特定的值

2.项目中用的场景

 map()

场景一：选列表中id 数组给后端

const tableData = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];
const idArr= tableData .map(v=> v.id); // [1, 2]

场景二：格式化后端传来的数据

data() {
    return {
        auditType: {
            "aaa": "审核通过",
            "审核通过": "审核通过",
            "bbb": "审核不通过",
            "ddd": "待审核",
            "待审核": "待审核"
        },
    }
}

 methods: {
    mapAuditType(value) {
      return this.auditType[value] || value;
    },
    queryData(){
        this.listArr = this.listArr.map( item =>{
            const [year,month] = item.SETTLEMENT_MONTH.split("-");
             return {
                ...item,
                yearMonth:`${year}-${month}`,//返回的年月日只显示年月
                aaaaName:item.SETTLEMENTName,//修改很复杂的字段
                PROCESS_STEP:this.mapAuditType(item.PROCESS_STEP)}//根据传来的值按规则转为需要的值
        })
    }
}

场景三：去掉数组里的某个属性留下其他的

const data = [
  { name: 'Alice', age: 30, city: 'Wonderland' },
  { name: 'Bob', age: 25, city: 'Builderland' },
  { name: 'Charlie', age: 35, city: 'Chocoland' }
];

// 先用 map() 去掉 age 属性
const mappedData = data.map(({age,...rest})=>rest);
console.log(mappedData);
[
    {
        "name": "Alice",
        "city": "Wonderland"
    },
    {
        "name": "Bob",
        "city": "Builderland"
    },
    {
        "name": "Charlie",
        "city": "Chocoland"
    }
]

filter()

场景一：过滤下拉框合适的值

<el-option 
    v-for="item in bankCities.filter(v => v.code>10)"
    :key="item.code"
    :label="item.name"
    :value="item.code" >
</el-option>

场景二：过滤某个为true的布尔值

const tasks = [
  { task: 'Do laundry', done: true },
  { task: 'Buy groceries', done: false },
  { task: 'Read book', done: true }
];

const completedTasks = tasks.filter(task => task.done);
console.log(completedTasks); // [{ task: 'Do laundry', done: true }, { task: 'Read book', done: true }]

场景三：定义下拉框值对应的name

data(){
    return {
        form:{
          code:"",
          name:"",
        }
        citiesArr :[{code:1,name:"上海"},{code:2,name:"北京"}]
    }
} 
method:{
    changeCity(val) {
      this.form.code= val;
      this.form.name= this.citiesArr.filter(v => v.code== val)[0].name;
    },
}
    

场景四：显示对应的值

<div >
      {{ arr.filter(v => v.code== this.code)[0].name }}
 </div>
data(){
    return:{
        arr:[],
        code:1,//从接口获取
    }
}

场景五：过滤调数组里的 ""  undefined null

const inputData = ['hello', '', 'world', null,undefined, 'JavaScript'];
const validData = inputData.filter(item => item);
console.log(validData);

VM110:3 (3) ['hello', 'world', 'JavaScript']

场景六：去重

const arr = ['apple', 'banana', 'apple', 'orange', 'banana'];
const uniqueItems = arr.filter((v,i,selfArr)=>selfArr.indexOf(v) === i)
console.log(uniqueItems); // ['apple', 'banana', 'orange']

VM618:3 (3) ['apple', 'banana', 'orange']

 reduce()

详细参数介绍

1.有没有初始值
array.reduce(callbackFn, initialValue);
没初始值
    const result = numbers.reduce((acc, curr) => acc + curr);
    console.log(result); // 输出 10
有初始值
    const numbers = [1, 2, 3, 4];
    const result = numbers.reduce((acc, curr) => acc + curr,0);
    console.log(result); // 输出 10

2.callBack的参数
    acc：上一次调用 callbackFn 的返回值
    v:当前元素
    i:当前索引
    arrSelf:数组本组

场景一：用来累计当页面的input框填写金额时可以不断添加，并且动态合计在页面上

2个参数（一般2个参数起步）

<span>{{ applaysumAward }}</span>
 data () {
    return {
      awardList: [
        {  amount: '', policyNum: '',serviceProduct:"", premium:""},
      ]
    }
  },
 computed: {
    applaysumAward() {
      let total = this.awardList.reduce((sum, item) => {
        return sum + parseFloat(item.amount || 0);
      }, 0); 
      return total.toFixed(2);
    }
  },

场景二：按同样的条件分组

const data = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' },
  { type: 'fruit', name: 'banana' },
  { type: 'vegetable', name: 'broccoli' }
];

const grouped = data.reduce((acc, curr) => {
  // 查找当前 type 是否已经存在于累加器中
  let group = acc.find(g => g.type === curr.type);  
  if (!group) {
    // 如果没有找到对应的分组，则创建一个新的分组
    group = { type: curr.type, nameArr: [] };
    acc.push(group);
  } 
  // 将当前项的 name 添加到对应分组的 nameArr 中
  group.nameArr.push(curr.name);
  
  return acc;
}, []);
console.log(grouped);
// [
    {type:'fruit',nameArr:['apple','banana']}，
    {type:'vegetable',nameArr:['carrot','broccoli']}
]

3个参数 
const numbers = [1, 2, 3, 4];
const result = numbers.reduce((acc, v, i) => {
  console.log(`Index ${i}: ${v}`);
  return acc + v;
}, 10);
console.log(result); // 输出 20

4个参数
const numbers = [1, 2, 3, 4];
const result = numbers.reduce((acc, v, i, selfArr) => {
  console.log(`Array: ${selfArr}`);
  return acc + v;
}, 10);
console.log(result); // 输出 20

find()

场景一：用来将取某个值对应list的值

textChoose(val) {
      this.typeText = this.option1.find(v => v.value == val).text;
      this.typeVaule = this.option1.find(v => v.value == val).type;
 },

sort()

场景一：普通升序

let arr=[5,3,4,5,1,6] ;
console.log(arr.sort()) //[1, 3, 4, 5, 5, 6]
console.log(arr.sort((a,b)=>a -b)) //[1, 3, 4, 5, 5, 6]
console.log(arr.sort((a,b)=>b - a)) // [6, 5, 5, 4, 3, 1]

场景二：降序排时间（值可能没有需要兼容）

// 倒序
this.listArr.sort((a, b) => {
  const aHasApplyTime = !!a.applyTime; //true 如果 a.applyTime 存在（即不是 null, undefined, 0, '' 等假值）
  const bHasApplyTime = !!b.applyTime;
  if (!aHasApplyTime && bHasApplyTime) return 1; // a没有APPLY_TIME，b有APPLY_TIME，a排在后面
  if (aHasApplyTime && !bHasApplyTime) return -1; // a有APPLY_TIME，b没有APPLY_TIME，a排在前面
  if (!aHasApplyTime && !bHasApplyTime) return 0; // 都没有APPLY_TIME，保持原顺序
  return new Date(b.applyTime) - new Date(a.applyTime); // 都有APPLY_TIME的情况
});;

场景三：比较2个数组是否相等, 数组里不能有对象

let arr=[1,3,4,5,6] ;
let brr=[1,3,4,5,6]
function compArray(array1, array2) {
    //比较2个数组是否相等, 数组里不能有对象
    array1.sort();
    array2.sort();
    return (
        array1.length == array2.length &&
        array1.every((v, i) =>v === array2[i])
    );
}
console.log(compArray(arr,brr))
VM527:12 true

场景四：选取数组中最小的数

this.awardList.sort()[0]

some()

场景一：确定这个value在数组列表里

verifyNum(e,item){
  if(this.awardList.length && this.awardList.some(v=>v.Num == item.num)){
   console.log('填写数字不能重复')
    return
  }

场景二：检查一个用户列表中是否有用户处于在线状态。

const users = [
  { name: 'Alice', online: false },
  { name: 'Bob', online: true },
  { name: 'Charlie', online: false }
];
const isAnyUserOnline = users.some(v=>v.online);
console.log(isAnyUserOnline); // true

场景三：表单验证是否有必填字段为空

const formData = [
  { name: 'username', value: 'John' },
  { name: 'email', value: '' },
  { name: 'password', value: 'password123' }
];

const hasEmptyFields = formData.some(v=>v.value.trim() === '')
console.log(hasEmptyFields); // true

场景四：来检查数组中的元素是否具有某个特性

const features = ['touch', 'gps', 'camera'];

const hasCamera = features.some(v=>v==="camera");
console.log(hasCamera); // true

VM1187:4 true

every（）

场景一：提交表单对象里某个值不能为空

function fieldsAreEmpty(obj) {
  // 检查所有字段是否为空字符串
  return Object.values(obj).every(value => value != "");
}
let obsTest = {
    aaa:'111',
    bbb:'111',
}
fieldsAreEmpty(obsTest)
true

场景二：A列表的每一项都在B列表里

const allowedValues = ['option1', 'option2', 'option3'];
const selectedValues = ['option1', 'option2'];

const hasInvalidValue = selectedValues.every(value => allowedValues.includes(value));
console.log(hasInvalidValue); // true

includes()

场景一：在处理表单数据时，可以使用 includes() 来检查是否包含特定的值。例如，检查用户选择的选项是否在允许的选项中。

const validColors = ['red', 'green', 'blue'];
const userColor = 'green';

const isValidColor = validColors.includes(userColor);
console.log(isValidColor); // true

VM1734:5 true

场景二：选择的值列表中是否有1一个在全部允许列表中

const allowedValues = ['option1', 'option2', 'option3'];
const selectedValues = ['option1', 'option4'];

const hasInvalidValue = selectedValues.some(value => allowedValues.includes(value));
console.log(hasInvalidValue); // true