在我们使用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+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  2. 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  3. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  4. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  5. 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

    我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...

  6. 循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

    在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...

  7. 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  8. 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...

  9. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  10. 循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理>中介绍了用户管理模块的内容,包括用户列表的展示,各种查看.编辑.新增对话框的界面处理和后台数据处 ...

随机推荐

  1. java经典问题 byte b=1、b=b+1、b+=1

    直接问题: 首先 byte的范围 [-128,127] byte 类型可以自动转为int类型 int类型不能自动转为byte类型. 超过byte的范围,就会变成int类型了 byte b=1:正确, ...

  2. 罗马数字转int

    // I(1).V(5).X(10).L(50).C(100).D(500)和M(1000) 1.重复数次:一个罗马数字重复几次,就表示这个数的几倍.2.右加左减:2.1 在较大的罗马数字的右边记上较 ...

  3. Docker在centos上的安装与常用命令大全

    docker的安装与加速器配置 安装docker:yum install docker (默认安装路径/var/lib/docker) 启动docker服务:systemctl start docke ...

  4. C# 数据操作系列 - 10 NHibernate初试

    0. 前言 在上一篇基本讲完了EF Core的入门级教程.从这一篇开始,我们试着去探索一下 .net core平台上更多的ORM框架.那么,这一篇开始我们就来试试NHibernate. 1. NHib ...

  5. 使用QQ同步助手备份同步手机数据

    QQ同步助手官网:https://pim.qq.com/ QQ同步助手,由腾讯精心打造的云端备份工具.能实现手机之间传输文件,并备份文件.照片.视频.联系人.短信.通讯记录.应用程序到云端的换手机必备 ...

  6. hdu3397 Sequence operation 线段树

    hdu3397 Sequence operation #include <bits/stdc++.h> using namespace std; ; struct node { /// l ...

  7. vue脚手架3.0的安装与使用

    一.安装 1.先检查是否有安装vue  (vue-cli3需要node大于等于8.9版本) //vue -V 2.如果没安装跳过.安装有3.0以下的版本就的先卸载掉以前的版本 npm uninstal ...

  8. Java——读取和写入txt文件

    package com.java.test.a; import java.io.BufferedReader; import java.io.BufferedWriter; import java.i ...

  9. TP5.0登录验证码实现

    <div class="loginbox-textbox"> <input class="form-control" placeholder= ...

  10. Excel日期转换为PHP时间戳

    PHP 的时间函数是从1970-1-1日开始计算的,单位是秒数.但是 EXCEL的是从1900-1-1日开始算的单位是天数. 如果只计算1970以后的时间的话,就好处理了. 先获得 EXCEL中 19 ...