Vue 高级函数的使用

Posted 2022-01-25 长沙火山

一、高级函数的介绍

1.1 filter 函数

filter函数的主要用途是对数组元素进行过滤，并返回一个符合条件的元素的数组：

const nums = [10,20,30,111,222,333]
let newNums=nums.filter(function(n)
    return n<100
)
//输出：[10,20,30]

1.2 map 函数

map函数是对数组每个元素的映射操作，并返回一个新数组，原数组不会改变将newNums中每个数字乘2：

const nums = [10,20,30,111,222,333]
let newNums=nums.filter(function(n)
    return n*2
)
//输出：[20,40,60,222,666]

1.3 reduce 函数

reduce函数主要用于对数组所以元素的汇总操作，如全部相加、相乘等：

const nums = [10,20,30,111,222,333]
let newNums=nums.reduce(function(preValue,n)
    return PreValue+n
,0)
//结果：120

1.4 综合应用

const nums = [10,20,30,111,222,333]
let newNums=nums.filter(function(n)
    return n<100
).map(function(n)
    return n*2
).reduce(function(preValue,n)
    return preValue+n
,0)
//结果：120

二、应用案例

1. 将二级目录的数据挪到一级目录

原数据如下：

list: [
  
    id: 1,
    dept: '产品组',
    members: 'name':'张三', 'age':'30', 'mobile':'15111303078'
  ,
  
    id: 2,
    dept: 'UI设计组',
    members: 'name':'刘斌', 'age':'24', 'mobile':'17678542259'
  ,
  
    id: 3,
    dept: '测试组',
    members: 'name':'杨红果', 'age':'32', 'mobile':'18789895420'
  ,
]

运用 map 函数处理：

let tempList = this.list.map(item => 
    return  ...item, ...item.members 
)

2. 双重循环遍历

两个数组，如果数组1包含数组2中的元素，则把对应的状态设为选中。

list1: [
    
        id: 1,
        dept: '产品组',
        selected: false,
        members: 'name':'张三', 'age':'30', 'mobile':'15111303078'
    ,
    
        id: 2,
        dept: 'UI设计组',
        selected: false,
        members: 'name':'刘斌', 'age':'24', 'mobile':'17678542259'
    ,
    
        id: 3,
        dept: '测试组',
        selected: false,
        members: 'name':'杨红果', 'age':'32', 'mobile':'18789895420'
    ,
  ],
  
list2: [
    
        id: 1,
        dept: '产品组',
        members: 'name':'张三', 'age':'30', 'mobile':'15111303078'
    
]

双重for循环：

for (var m=0; m<this.list1.length; m++) 
    for (var n=0; n<this.list2.length; n++) 
        if (this.list1[m].id === this.list2[n].id) 
        		this.list1[m].selected = true