vue中使用element,vue的el属性
我们在使用VUE元素处理接口时，经常会遇到各种需要使用JS集合处理的方法，比如Filter、Map、reduce等。还可能涉及一些常规处理或递归处理方法，如对象属性赋值。本文列举了一些Vue元素前端开发中经常遇到的JS处理场景，以供参考。
目录
1、过滤、映射、归约处理方法2、递归处理3、forEach遍历处理4、Object.assign赋值方法5、正则集的slice()方法
1、常规集合的filter、map、reduce处理方法
filter函数的主要目的是过滤数组元素，并返回满足条件的元素数组。
const nums=[10，20，30，111，222，333]
let new nums=nums . filter(function(n){
返回n100
})
输出：
[10,20,30]
map函数是对数组中每个元素的映射操作，并返回一个新的数组。原始数组不会改变。将newNums中的每个数字乘以2。
const nums=[10，20，30，111，222，333]
设newNums=nums.map(function(n){
返回n*2
})
输出：
[20,40,60,222,666]
reduce函数主要用于汇总一个数组的所有元素，比如所有元素的相加和相乘。
const nums=[10，20，30，111，222，333]
设new nums=nums . reduce(function(pre value，n){
返回前值
},0)
输出：
726
有时可以几种治疗方法联合使用，如下综合案例所示。
const nums=[10，20，30，111，222，333]
let new nums=nums . filter(function(n){
返回n100
}).映射(函数(n){
返回n*2
}).reduce(function(preValue，n){
返回前值
},0)
结果：
120
还有一个数组集合的find方法，类似于filter方法。
find()方法主要用于返回数组中第一个合格的元素(如果不是，则返回undefined)。
var Array=[1，2，3，4，5，6，7]；
var result=Array.find(函数(值){
返回值5；//条件
});
console.log(结果)；//6
console.log(数组)；//[1,2,3,4,5,6,7]
同样，我们可以使用vue中require.context的处理机制来遍历文件进行处理，也需要使用filter，如下面的代码所示。
下面的代码是我过滤文件夹中的文件。
const req=require . context( vue-awesome/icons ，true，/\。js$/)
const require all=require context=require context . keys()
const re=/\。\/(.*)\.js/
const vueawesomeicon=require all(req)。filter((key)={ return key . index of( index . js )0 })。地图(i={
return i.match(re)[1]
})
导出默认vueAwesomeIcons
2、递归处理
有时候我们需要从一个JSON集合中查询，因为集合是嵌套的，比如CHIREN里面有一个CHIREN集合，根据一个key属性，这个处理方法会用到递归。
比如在我定义的一个菜单集中，就是这样的嵌套结构。当需要根据名称获取对应的对象时，就涉及到一个递归的处理函数。
我们先来看看菜单的JSON集合。
//这个菜单数据一般是服务器返回的。
导出常量异步菜单=[
{
id:“1”，
PID:“-1”，
文本：“主页”，
图标：“仪表板”，
名称：“仪表板”
},
{
id:“2”，
PID:“-1”，
文本：“产品信息”，
图标：“表格”，
儿童：[
{
id:“2-1”，
PID:“2”，
文本：“产品展示”，
名称：产品-展示，
图标：“表格”
}]
},
{
id:“3”，
PID:“-1”，
文本：“杂项管理”，
图标：“示例”，
儿童：[
{
id:“3-1”，
PID:“3”，
文本：“图标管理”，
名称：“图标”，
图标：“示例”
},
{
id:“3-3”，
PID:“3”，
文本：“树函数演示”，
名称：“树”，
图标：“树”
},
{
id:“3-2”，
PID:“3”，
文本：“二级菜单2”，
图标：“树”，
儿童：[
{
id:“3-2-2”，
管道仪表流程图：“3-2”，
文本：“3级菜单2”，
名称：菜单1-1 ，
图标：“表单”
}
]
}
]
}
]
如果需要根据ID遍历查询，这是典型的递归查询处理。
//根据菜单id获取对应的菜单对象
FindMenuById(menuList，menuid) {
for(var I=0；i menuList.lengthi ) {
var item=menu list[I]；
if (item.id item.id===menuid) {
退货项目
} else if (item.children) {
var foundItem=this。FindMenuById(item.children，menuid)
If (foundItem) {//只有找到才会返回
返回foundItem
}
}
}
}
这里值得注意的是，递归时不能用下面的直接返回。
归还这个。FindMenuById(item.children，menuid)
需要判断是否有结果被返回，否则嵌套递归可能会返回未定义的类型。
var foundItem=this。FindMenuById(item.children，menuid)
If (foundItem) {//只有找到才会返回
返回foundItem
}
3、forEach遍历集合处理
很多情况下，我们还需要以forEach的方式遍历集合，如下：根据它的键值，注册全局过滤器。
//导入全局过滤器
从导入*作为筛选器。/筛选器
//注册全局过滤器
Object.keys(过滤器)。forEach(key={
Vue.filter(键，过滤器[键])
})
或者在我们通过API获得数据之后，我们处理集合。
//获取产品类型，用于绑定字典和其他用途。
GetProductType()。然后(data={
if(数据){
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(节点)
})
//获取列表信息
this.getlist()
}
});
或者当请求字典数据时，判断非空值。
//使用字典类型从服务器请求数据
GetDictData(this.typeName)。然后(data={
if(数据){
data.forEach(item={
if (item typeof (item。值)！==未定义项。值！==) {
that . dictionterms . push(项目)
}
});
}
})
forEach()方法也用于对数组中的每个元素执行回调函数，但是它没有返回值(或者说它的返回值是未定义的，即使我们在回调函数中写了return语句，返回值仍然是未定义的)。
注意：如果forEach中有两个参数，第一个参数是集合中的元素，第二个参数是集合的索引；
4、Object.assign赋值方法
在某些情况下，我们需要将一个全新的集合复制到另一个对象中，并替换原对象的属性值，所以我们可以使用Object对象的assign方法。
例如，当显示编辑界面时，将请求的对象属性复制到表单对象。
var param={ id: id }
GetProductDetail(param)。然后(data={
Object.assign(this.editForm，data)；
})
或者在查询时，获取查询条件，进行部分替换。
//构造通用分页查询条件
var param={
type: this.producttype===all ？:this.producttype，
page index:this . pageinfo . page index，
pagesize:this . pageinfo . pagesize
};
//将SearchForm的条件添加到param中提交查询。
param . type=this.searchform.producttype//into对应的属性。
Object.assign(param，this . search form)；
5、slice() 方法
slice()方法可以从现有数组中返回选定的元素。
语法如下所示。
arrayObject.slice(开始，结束)
如下例所示。
设red=parseInt(color.slice(0，2)，16)
设green=parseInt(color.slice(2，4)，16)
设blue=parseInt(color.slice(4，6)，16)
或者我们结合过滤函数得到图标集的一部分。
vueawesomeiconcsfiltered:function(){
const那个=这个
var list=that . vueawesomeicon s . filter(item={ return item . index of(that . search form . label)=0 })
if (that.searchForm.pagesize 0) {
返回list.slice(0，that.searchForm.pagesize)
}否则{
退货单；
}
}
以上是Vue Element前端应用开发的常规JS处理函数的细节。更多关于Vue元素常规JS处理函数的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。