循序渐进VUE+Element 前端应用开发(7)— 介绍一些常规的JS处理函数

微信扫一扫,分享到朋友圈

循序渐进VUE+Element 前端应用开发(7)— 介绍一些常规的JS处理函数

在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter、Map、reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对于这些不是很在意,但往往真正使用的时候,需要了解清楚,否则很容易脑袋出现短路的情况。本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景,供参考学习。

1、常规集合的filter、map、reduce处理方法

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

const nums = [10,20,30,111,222,333]
let newNums=nums.filter(function(n){
return n<100
})

输出:[10,20,30]

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]

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

const nums = [10,20,30,111,222,333]
let newNums=nums.reduce(function(preValue,n){
return PreValue+n
},0)

输出:726

有时候可以结合几种处理方式一起,如下综合案例所示。

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

同样我们也可以在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]
})
export default vueAwesomeIcons

2、递归处理

有时候,我们需要从一个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) {
return item
} else if (item.children) {
var foundItem = this.FindMenuById(item.children, menuid)
if (foundItem) { // 只有找到才返回
return foundItem
}
}
}
}

这里值得注意的是,不能在递归的时候,使用下面直接返回

this.FindMenuById(item.children, menuid)

而需要判断是否有结果在进行返回,否则嵌套递归就可能返回undefined类型

var foundItem = this.FindMenuById(item.children, menuid)
if (foundItem) { // 只有找到才返回
return foundItem
}

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)
}
});
}
})

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 {
return list;
}
}

vue cli3 es6 安卓低版本 兼容问题

上一篇

苏宁零售云“直播经济”大爆发,618单日带货破3.8亿

下一篇

你也可能喜欢

循序渐进VUE+Element 前端应用开发(7)— 介绍一些常规的JS处理函数

长按储存图像,分享给朋友