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