1. Filter, map, and reduce processing methods of regular collections
The main purpose of the filter function is to filter array elements and return an array of elements that meet the criteria
const nums = [10,20,30,111,222,333]
let newNums=(function(n){
return n<100
})
Output:
[10,20,30]
The map function is a mapping operation for each element of the array and returns a new array. The original array will not change and multiply each number in newNums by 2
const nums = [10,20,30,111,222,333]
let newNums=(function(n){
return n*2
})
Output:
[20,40,60,222,666]
Reduce function is mainly used to summarize all elements of an array, such as adding and multiplying, etc.
const nums = [10,20,30,111,222,333]
let newNums=(function(preValue,n){
return PreValue+n
},0)
Output:
726
Sometimes several treatment methods can be combined together, as shown in the following comprehensive case.
const nums = [10,20,30,111,222,333]
let newNums=(function(n){
return n<100
}).map(function(n){
return n*2
}).reduce(function(preValue,n){
return preValue+n
},0)
result:
120
There is also a find method for array collections, similar to the filter method.
The find() method is mainly used to return the first element in the array that meets the conditions (if not, it will return undefined)
var Array = [1,2,3,4,5,6,7];
var result = (function(value){
return value > 5; //condition });
(result);//6
(Array);//[1,2,3,4,5,6,7]
Similarly, we can also use the processing mechanism in vue to traverse files for processing, and we also need to use filters, as shown in the following code.
The following code is to filter the files in a folder
const req = ('vue-awesome/icons', true, /\.js$/)
const requireAll = requireContext => ()
const re = /\.\/(.*)\.js/
const vueAwesomeIcons = requireAll(req).filter((key) => { return ('') < 0 }).map(i => {
return (re)[1]
})
export default vueAwesomeIcons
2. Recursive processing
Sometimes, we need to use recursion from a JSON collection because the collection is nested, such as children, and children also have a collection of chilren, and query based on a certain key attribute.
For example, in a menu collection I defined, there is such a nested structure. When you need to obtain the corresponding object based on the name, a recursive processing function is involved.
First, let’s take a look at the JSON collection of menus.
// This menu data is generally returned by the server sideexport const asyncMenus = [
{
id: '1',
pid: '-1',
text: 'front 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: 'Second Menu 2',
icon: 'tree',
children: [
{
id: '3-2-2',
pid: '3-2',
text: 'Level 3 Menu 2',
name: 'menu1-1',
icon: 'form'
}
]
}
]
}
]
If we need to traverse the query based on the ID, it is a typical recursive query processing.
// Get the corresponding menu object according to the menu id FindMenuById(menuList, menuid) {
for (var i = 0; i < ; i++) {
var item = menuList[i];
if ( && === menuid) {
return item
} else if () {
var foundItem = (, menuid)
if (foundItem) { // Return only if found return foundItem
}
}
}
}
It is worth noting here that when recursive, you cannot use the following to return directly
return (, menuid)
It is necessary to determine whether there is a result that is being returned, otherwise the nested recursion may return the undefined type
var foundItem = (, menuid)
if (foundItem) { // Return only if found return foundItem
}
3. ForEach traversal collection processing
In many cases, we also need to perform a forEach traversal processing on the collection, as follows to process according to its key value and register a global filter processing operation.
// Import global filtersimport * as filters from './filters'
// Register global filter(filters).forEach(key => {
(key, filters[key])
})
Or we process the collection after obtaining data through API
// Get product type for binding dictionary and other purposes GetProductType().then(data => {
if (data) {
= [];// Clear the tree list (item => {
(, )
({ key: , value: })
var node = { id: , label: }
(node)
})
// Get list information ()
}
});
Or when requesting dictionary data, a non-null value judgment process is performed.
// Use dictionary type to request data from the server GetDictData().then(data => {
if (data) {
(item => {
if (item && typeof () !== 'undefined' && !== '') {
(item)
}
});
}
})
The forEach() method is also used to execute a callback function on each element in the array, but it does not return a value (or its return value is undefined. Even if we write a return statement in the callback function, the return value is still undefined)
Note: If there are two parameters in forEach, the first parameter is the element in the set and the second parameter is the index of the set;
4. Assignment method
In some cases, we need to copy a brand new collection to another object and replace the property value of the original object. Then we can use the assign method of the Object object.
For example, when displaying the editing interface, copy the requested object properties to the form object.
var param = { id: id }
GetProductDetail(param).then(data => {
(, data);
})
Or when querying, obtain query conditions and perform partial replacement
// Construct conventional paging query conditions var param = {
type: === 'all' ? '' : ,
pageindex: ,
pagesize:
};
// Add the SearchForm conditions to param and submit the query = // Convert to corresponding attributes (param, );
5. slice() method
The slice() method returns the selected element from an existing array.
The syntax is shown below.
(start,end)
As shown in the following case.
let red = parseInt((0, 2), 16) let green = parseInt((2, 4), 16) let blue = parseInt((4, 6), 16)
Or we combine the filter function to obtain the icon collection.
vueAwesomeIconsFiltered: function() {
const that = this
var list = (item => { return () >= 0 })
if ( > 0) {
return (0, )
} else {
return list;
}
}
The above is the detailed content of the regular JS processing functions of Vue Element front-end application development. For more information about the regular JS processing functions of Vue Element, please pay attention to my other related articles!