循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数
在我们使用VUE+Element 处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，以前对于这些不是很在意，但往往真正使用的时候，需要了解清楚，否则很容易脑袋出现短路的情况。本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。
1、常规集合的filter、map、reduce处理方法
filter函数的主要用途是对数组元素进行过滤，并返回一个符合条件的元素的数组
const nums = [10,20,30,666666,222,333]
let newNums=nums.filter(function(n){return n<100})
输出：[10,20,30]
map函数是对数组每个元素的映射操作，并返回一个新数组，原数组不会改变将newNums中每个数字乘2
const nums = [10,20,30,666666,222,333]
let newNums=nums.map(function(n){return n*2})
输出：[20,40,60,222,666]
reduce函数主要用于对数组所有元素的汇总操作，如全部相加、相乘等
const nums = [10,20,30,666666,222,333]
let newNums=nums.reduce(function(preValue,n){return PreValue+n
},0)
输出：726
有时候可以结合几种处理方式一起，如下综合案例所示。
const nums = [10,20,30,666666,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
另外还有一个数组集合的find方法，和filter方法类似。
find()方法主要用来返回数组中
符合条件的第一个元素
（没有的话，返回undefined）
var Array = [1,2,3,4,5,6,7];var result = Array.find(function(value){return value > 5; //条件 });
console.log(result);//6 console.log(Array);//[1,2,3,4,5,6,7]
同样我们也可以在vue里面，利用require.context的处理机制，遍历文件进行处理，也需要用到了filter，如下代码所示。
下面代码是我对某个文件夹里面的文件进行一个过滤处理操作
const req = require.context('vue-awesome/icons', true, /\.js$/)
const requireAll= requireContext =>requireContext.keys()
const re= /\.\/(.*)\.js/const vueAwesomeIcons= requireAll(req).filter((key) => { return key.indexOf('index.js') < 0 }).map(i =>{return i.match(re)[1]
})
exportdefault vueAwesomeIcons2、递归处理
有时候，我们需要从一个JSON集合里面，由于集合是嵌套的，如children里面还有chilren集合，根据某个关键属性进行查询，这种处理方式就要用到递归了。
例如我定义的一个菜单集合里面，就是这样一个嵌套的结构，需要根据名称来获得对应的对象的时候，就涉及到了一个递归处理函数。
首先我们来看看菜单的JSON集合。
//此菜单数据一般由服务器端返回 export const asyncMenus =[
{
id:'1',
pid:'-1',
text:'首页',
icon:'dashboard',
name:'dashboard'},
{
id:'2',
pid:'-1',
text:'产品信息',
icon:'table',
children: [
{
id:'2-1',
pid:'2',
text:'产品展示',
name:'product-show',
icon:'table'}]
},
{
id:'3',
pid:'-1',
text:'杂项管理',
icon:'example',
children: [
{
id:'3-1',
pid:'3',
text:'图标管理',
name:'icon',
icon:'example'},{
id:'3-3',
pid:'3',
text:'树功能展示',
name:'tree',
icon:'tree'},
{
id:'3-2',
pid:'3',
text:'二级菜单2',
icon:'tree',
children: [
{
id:'3-2-2',
pid:'3-2',
text:'三级菜单2',
name:'menu1-1',
icon:'form'}]
}
]
}]
如果我们需要根据ID来遍历查询，就是一个典型的递归查询处理。
//根据菜单id来获取对应菜单对象 FindMenuById(menuList, menuid) {for (var i = 0; i < menuList.length; i++) {var item =menuList[i];if (item.id && item.id ===menuid) {returnitem
}else if(item.children) {var foundItem = this.FindMenuById(item.children, menuid)if (foundItem) { //只有找到才返回 returnfoundItem
}
}
}
}
这里值得注意的是，不能在递归的时候，使用下面直接返回
return this.FindMenuById(item.children, menuid)而需要判断是否有结果在进行返回，否则嵌套递归就可能返回undefined类型
var foundItem = this.FindMenuById(item.children, menuid)if (foundItem) { //只有找到才返回 returnfoundItem
}
3、forEach遍历集合处理
在很多场合，我们也需要对集合进行一个forEach的遍历处理，如下根据它的键值进行处理，注册全局过滤器的处理操作
//导入全局过滤器 import * as filters from './filters' //注册全局过滤器 Object.keys(filters).forEach(key =>{
Vue.filter(key, filters[key])
})
或者我们在通过API方式获取数据后，对集合进行处理的操作
//获取产品类型，用于绑定字典等用途 GetProductType().then(data =>{if(data) {this.treedata = [];//树列表清空 data.forEach(item =>{this.productTypes.set(item.id, item.name)this.typeList.push({ key: item.id, value: item.name })var node ={ id: item.id, label: item.name }this.treedata.push(node)
})//获取列表信息 this.getlist()
}
});
又或者请求字典数据的时候，进行一个非空值的判断处理。
//使用字典类型，从服务器请求数据 GetDictData(this.typeName).then(data =>{if(data) {
data.forEach(item=>{if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
that.dictItems.push(item)
}
});
}
})
forEach()方法也是用于对数组中的每一个元素执行一次回调函数，
但它没有返回值
（或者说它的返回值为undefined，即便我们在回调函数中写了return语句，返回值依然为undefined）
注意： 如果forEach里有两个参数，则第一个参数为该集合里的元素，第二个参数为集合的索引;
4、Object.assign赋值方法
在有些场合，我们需要把全新的集合，复制到另一个对象上，替换原来对象的属性值，那么我们可以利用Object对象的assign方法。
如在编辑界面展示的时候，把请求到的对象属性复制到表单对象上。
var param ={ id: id }
GetProductDetail(param).then(data=>{
Object.assign(this.editForm, data);
})
或者查询的时候，获得查询条件，进行部分替换
//构造常规的分页查询条件 var param ={
type:this.producttype === 'all' ? '' : this.producttype,
pageindex:this.pageinfo.pageindex,
pagesize:this.pageinfo.pagesize
};//把SearchForm的条件加入到param里面，进行提交查询 param.type = this.searchForm.ProductType //转换为对应属性 Object.assign(param, this.searchForm);
5、slice() 方法
slice() 方法可从已有的数组中返回选定的元素。
语法如下所示。
arrayObject.slice(start,end)
如下案例所示。
let red = parseInt(color.slice(0, 2), 16)
let green= parseInt(color.slice(2, 4), 16)
let blue= parseInt(color.slice(4, 6), 16)
或者我们结合filter函数对图标集合进行获取部分处理
vueAwesomeIconsFiltered: function() {
const that= this var list = that.vueAwesomeIcons.filter(item => { return item.indexOf(that.searchForm.label) >= 0})if (that.searchForm.pagesize > 0) {return list.slice(0, that.searchForm.pagesize)
}else{returnlist;
}
}
为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：
循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作
循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用
循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理
循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用
循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数
循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用
循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理
循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用
循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理
循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理
循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示
循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理
循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理
循序渐进VUE+Element 前端应用开发(17）--- 菜单管理
循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制
循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码
循序渐进VUE+Element 前端应用开发(21）--- 省市区县联动处理的组件使用
循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理
循序渐进VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理
循序渐进VUE+Element 前端应用开发(25）--- 各种界面组件的使用（1）
循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）
循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储
循序渐进VUE+Element 前端应用开发(28）--- 附件内容的管理
循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计
部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用
循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理
循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志
循序渐进VUE+Element 前端应用开发(32）--- 手机短信动态码登陆处理
循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理
