欧博电脑版:循序渐进VUE+Element 前端应用开发(7)--- 先容一些通例的JS处置函数

2020-06-06 38 views 0

扫一扫用手机浏览

在我们使用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
          }
        }
      }
    }

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

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

 

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

 

,

欧博网址

www.mmsff.com欢迎进入欧博网址(Allbet Gaming),欧博网址开放会员注册、代理开户、电脑客户端下载、苹果安卓下载等业务。

Allbet内容转载自互联网,如有侵权,联系Allbet删除。

本文链接地址:http://www.chongqichengbaotoy.com/post/1219.html

相关文章

发表评论