广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue Element前端应用开发之常规的JS处理函数
  • 601
分享到

Vue Element前端应用开发之常规的JS处理函数

2024-04-02 19:04:59 601人浏览 独家记忆
摘要

目录1、常规集合的filter、map、reduce处理方法2、递归处理3、forEach遍历集合处理4、Object.assign赋值方法5、slice() 方法1、常规集合的fi

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.map(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

另外还有一个数组集合的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]
})

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

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


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

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

以上就是Vue Element前端应用开发之常规的JS处理函数的详细内容,更多关于Vue Element常规的JS处理函数的资料请关注编程网其它相关文章!

--结束END--

本文标题: Vue Element前端应用开发之常规的JS处理函数

本文链接: https://www.lsjlt.com/news/125753.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue Element前端应用开发之常规的JS处理函数
    目录1、常规集合的filter、map、reduce处理方法2、递归处理3、forEach遍历集合处理4、Object.assign赋值方法5、slice() 方法1、常规集合的fi...
    99+
    2022-11-12
  • Vue Element前端应用开发之常规Element界面组件
    目录1、列表界面和其他模块展示处理2、常规界面组件的使用1)表单和表单项、单文本框2)下拉列表控件的绑定3)图片展示4)第三方扩展控件3、自定义组件的创建使用1、列表界面和其他模块展...
    99+
    2022-11-12
  • Vue Element前端应用开发之用户管理模块的处理
    目录1、权限管理模块的设计2、用户管理界面功能1、权限管理模块的设计 我们知道,权限管理一般都会涉及到用户、组织机构、角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这...
    99+
    2022-11-12
  • Vue Element前端应用开发之获取后端数据
    目录概述1、后端数据的获取处理2、界面展示处理概述 在前面随笔《循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理》中介绍了在Vue + Element整合框架中...
    99+
    2022-11-12
  • Vue Element前端应用开发之前端API接口的封装
    目录1、ABP框架API接口的回顾2、基于ES6的JS业务类的封装1、ABP框架API接口的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应...
    99+
    2022-11-12
  • Vue Element前端应用开发之菜单资源管理
    目录1、菜单资源及管理界面介绍2、菜单和路由的结合管理1、菜单资源及管理界面介绍 前面介绍过,权限管理一般都会涉及到用户、组织机构、角色,以及权限功能等方面的内容,ABP框架的基础内...
    99+
    2022-11-12
  • Vue Element前端应用开发之整合ABP框架的前端登录
    目录概述1、ABP开发框架的回顾2、Vue+Element整合ABP框架的前端登录处理概述 ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,...
    99+
    2022-11-12
  • Vue Element前端应用开发之开发环境的准备工作
    目录概述1、开发所需的软件环境1)VS code的安装2) 安装node开发环境3)vue脚手架的安装4)Vue DevTool Chrome插件的安装2、开发环境的配置使用概述 之...
    99+
    2022-11-12
  • Vue Element前端应用开发之动态菜单和路由的关联处理
    目录概述1、菜单和路由的处理过程2、菜单和路由列表3、登录的过程处理概述 在我开发的很多系统里面,包括Winform混合框架、Bootstrap开发框架等系列产品中,我都倾向于动态配...
    99+
    2022-11-12
  • Vue Element前端应用开发之图标的维护和使用
    目录概述1、Vue-Awesome的使用介绍2、导入Element 图标和Vue-Awesome图标概述 Vue-Awesome 是基于 Vue.js 的 SVG 图标组件,内置图标...
    99+
    2022-11-12
  • Vue Element前端应用开发之组织机构和角色管理
    目录1、组织机构管理模块界面2、角色管理界面3、界面模块化的处理1、组织机构管理模块界面 组织机构管理模块界面如下所示,包括组织机构的成员管理和角色管理,在ABP基础领域里面,组织机...
    99+
    2022-11-12
  • Vue Element前端应用开发之Vuex中的API Store View的使用
    目录概述1、前后端的分离和Web API 优先路线设计2、Axios网络请求处理POST请求GET请求3、Vuex中的API、Store和View的使用概述 在我们开发Vue应用的时...
    99+
    2022-11-12
  • Vue Element前端应用开发之功能点管理及权限控制
    目录概述1、权限功能点管理2、VUE+Element 前端权限控制概述 本篇随笔介绍功能点管理及权限控制,功能点是作为一个业务对象数据进行管理,在角色范畴上进行分配,而在界面元素控制...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作