Vue 中数组常用方法的使用和示例

Find 查找数组元素

Find 用来遍历查找数组元素，当找到符合条件的元素时，直接返回。所以 Find 元素只会返回符合条件的第一个元素

    // 数据
    types: [
        {
          "value": 0,
          "label": "头像素材"
        },
        {
          "value": 1,
          "label": "网名素材"
        },
        {
          "value": 2,
          "label": "背景素材"
        }
      ],

    // 方法
    findTypeLabel(type){
      const res = this.types.find((item) => item.value === type);
      return res.label;
    }
    
    // 调用输出 “网名素材”
    findTypeLabel(1)

map取数组对象中的某一字段组成新数组

const rolesDesc = [
    {'name':'ceshi',"description": "测试人员"},    
    {'name':'chanpin',"description": "产品经理"}
];
const names = rolesDesc.map(item =>(item.name));
console.log(names);//['ceshi', 'chanpin']
console.log(rolesDesc);//[{'name':'ceshi',"description": "测试人员"},    {'name':'chanpin',"description": "产品经理"}]

join数组转化为字符串，并用顿号隔开

const arr = ['标签一','标签二','标签三'];
console.log(arr.join('、'));//标签一、标签二、标签三

filter对数组进行过滤

例如我们需要把数组中 text 为空的过滤掉，不会改变原数组

const arr = [
    {id:1,text:'标签一'},
    {id:2,text:'标签二'},
    {id:3,text:''},
    {id:4,text:''}
];
const newArr = arr.filter((item)=>{
    return item.text !== ''
  })
console.log(newArr);// [{id:1,text:'标签一'},{id:2,text:'标签二'}]
console.log(arr);// [{id:1,text:'标签一'},{id:2,text:'标签二'},{id:3,text:''},{id:4,text:''}]

数组合并

concat 是指在两个或多个数组中合并元素，最终返回该新合并数组。使用 concat 方法可以将一个数组的值连接到另一个数组中创建一个新数组

const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  const resultArr = arr1.concat(arr2);
  console.log(arr1); // [1, 2, 3]
  console.log(arr2); // [4, 5, 6]
  console.log(resultArr); // [1, 2, 3, 4, 5, 6]