Step by step VUE+Element front end application development (7) -- introduce some regular JS processing functions

When we use VUE+Element When dealing with the interface, we often encounter various methods that need to use js set processing, such as Filter, Map, reduce and so on. We can also design some routine processing or recursive processing methods, such as object attribute assignment. Previously, we didn't pay much attention to these methods, but when we really use them, we need to understand clearly, otherwise it is easy to have a short circuit in our head. This essay lists some JS processing scenarios frequently encountered in the front-end development of VUE+Element for reference and learning.

1. filter, map and reduce processing methods of general collection

The main purpose of the filter function is to filter the array elements and return an array of qualified elements

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

Output: [10,20,30]

 

The map function is a mapping operation for each element of an array and returns a new array. The original array does not change and multiplies each number in newNums by 2

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

Output: [20,40,60222666]

 

The reduce function is mainly used for summarizing all elements of an array, such as adding and multiplying all elements

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

Output: 726

 

Sometimes it can be combined with several processing methods, as shown in the following comprehensive case.

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)

Result: 120

 

We can also use it in vue require.context The filter is also needed to traverse the file for processing, as shown in the following code.

The following code is a filtering operation for files in a folder

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. Recursive processing

Sometimes, we need to query from a JSON set, because the set is nested, such as children and children set, according to a key attribute, this processing method will use recursion.

For example, in a menu collection defined by me, there is such a nested structure. When it is necessary to obtain the corresponding object according to the name, a recursive processing function is designed.

First let's look at the JSON collection of menus.

// This menu data is generally returned by the server
export const asyncMenus = [
  {
    id: '1',
    pid: '-1',
    text: 'home page',
    icon: 'dashboard',
    name: 'dashboard'
  },
  {
    id: '2',
    pid: '-1',
    text: 'Product information',
    icon: 'table',
    children: [
      {
        id: '2-1',
        pid: '2',
        text: 'Product display',
        name: 'product-show',
        icon: 'table'
      }]
  },
  {
    id: '3',
    pid: '-1',
    text: 'Miscellaneous management',
    icon: 'example',
    children: [
      {
        id: '3-1',
        pid: '3',
        text: 'Icon management',
        name: 'icon',
        icon: 'example'
      },
      {
        id: '3-3',
        pid: '3',
        text: 'Tree function display',
        name: 'tree',
        icon: 'tree'
      },
      {
        id: '3-2',
        pid: '3',
        text: 'Secondary menu 2',
        icon: 'tree',
        children: [
          {
            id: '3-2-2',
            pid: '3-2',
            text: 'Three level menu 2',
            name: 'menu1-1',
            icon: 'form'
          }
        ]
      }
    ]
  }
]

If we need to traverse the query according to the ID, it is a typical recursive query processing.

    // According to the menu id To get the corresponding menu object
    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 only if found
            return foundItem
          }
        }
      }
    }

It's worth noting here that you can't use the following to return directly

this.FindMenuById(item.children, menuid)

You need to determine whether there is a result to return, otherwise nested recursion may return undefined type

  var foundItem = this.FindMenuById(item.children, menuid)
  if (foundItem) { // Return only if found
    return foundItem
  }

 

3. forEach traversal set processing

In many cases, we also need to do a forEach traversal of the collection, as follows: process according to its key value, and register the processing operation of the global filter

// IMPORT Global filter
import * as filters from './filters'
// Register global filter
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Or we can process the collection after obtaining data through API

    // Get product type for binding dictionary and other purposes
    GetProductType().then(data => {
      if (data) {
        this.treedata = [];// Tree list empty
        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)
        })

        // Get list information
        this.getlist()
      }
    });

Or, when requesting dictionary data, perform a non null value judgment processing.

      // Request data from server using dictionary type
      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 Assignment method

In some cases, we need to copy a new set to another Object and replace the property value of the original Object. Then we can use the assign method of the Object object Object.

For example, when the editing interface is displayed, the requested object property is copied to the form object.

      var param = { id: id }
      GetProductDetail(param).then(data => {
        Object.assign(this.editForm, data);
      })

Or when querying, obtain the query conditions and make partial replacement

      // Construct general paging query conditions
      var param = {
        type: this.producttype === 'all' ? '' : this.producttype,
        pageindex: this.pageinfo.pageindex,
        pagesize: this.pageinfo.pagesize
      };

      // hold SearchForm Conditions added to param Inside, submit query
      param.type = this.searchForm.ProductType // Convert to corresponding property
      Object.assign(param, this.searchForm);

 

5. slice() method

The slice() method returns the selected element from an existing array.

The syntax is as follows.

arrayObject.slice(start,end)

As shown in the following case.

let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)

Or we can use the filter function to get part of the icon set

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

Tags: Javascript Vue Attribute JSON

Posted on Fri, 05 Jun 2020 05:31:14 -0400 by menwn