数据过滤器使用法则

相信很多企业版用户已经发现编辑器出现了一个新功能「数据过滤器」&＃xff0c;然而打开这个功能之后&＃xff0c;又不知道怎么用。今天我们就来简单入门一下这个新功能。

能干什么

「数据过滤器」可以算是「字段映射」的升级版。一定有很多人已经用了「字段映射」这个功能用来满足不同组件之间的数据源复用。

映射前&＃xff1a;

[{"sk": 1}
]

映射后&＃xff1a;

[{"sk": 1,"value": 1}
]

那么问题来了&＃xff0c;如果是下面这种数据格式&＃xff0c;我该如何接入到组件上呢&＃xff1f;

{"data": {"sk": 1}
}

这种情况下&＃xff0c;就轮到「数据过滤器」出手了。

怎么用

首先过滤器使用的语法是 Javascript&＃xff0c;一种非常简单易上手的语言&＃xff0c;可以参考 http://www.w3school.com.cn/js/pro_js_syntax.asp 学习。如果实在学不会&＃xff0c;请求教公司里的前端哥哥、前端弟弟、前端姐姐、前端妹妹们。

回到「数据过滤器」的功能上。假设你已经学会了Javascript语言&＃xff0c;我们的每个过滤器是一个 function&＃xff0c;接口定义如下&＃xff0c;框架只传入一个变量 data&＃xff0c;过滤器需要返回经过处理后的 data&＃xff1a;

function (data) {// do something...return data;
}

你只需要书写函数体即可&＃xff0c;比如我现在要把上一段的问题解决&＃xff0c;我只需将 data 的数据格式由 Object 转换为 Array &＃xff0c;并且将 sk 字段的数值放到 value 字段上即可&＃xff1a;

data.data.value &＃61; data.data.sk;
return [data.data];

或者

return [{"value": data.data.sk
}]

上面这两种写法&＃xff0c;均可以达到同样的效果。

注意点&＃xff1a;&＃xff08;敲黑板&＃xff09;

「数据过滤器」中限制了全局变量的访问&＃xff0c;目前仅支持 Date, String, Array, Math, Object, RegExp, Boolean, parseInt, parseFloat, JSON。

叠加使用

当我们将过滤器的场景标准化之后&＃xff0c;就可以建立多个通用的过滤器&＃xff0c;通过多个叠加方式&＃xff0c;变成数据该有的样子。

比如我要实现一个随机数效果&＃xff0c;并且所有数据放大100倍。

原始数据为

[{"name": "","value": 232425,"y": 0.891111}
]

我先新建一个名称为随机数的过滤器

data[0].value &＃61; Math.random(0, 1);
return data;

再新建一个名称为*100的过滤器&＃xff1a;

data.forEach(function (val,index) {val.y &＃61; val.y * 100;val.value &＃61; val.value * 100;
});
return data;

添加完成之后的效果如下图&＃xff1a;

注意点&＃xff1a;&＃xff08;敲黑板&＃xff09;

多个过滤器叠加时&＃xff0c;数据流动方向为从左到右&＃xff0c;即先经过随机数处理之后的数据再传到*100进行处理。

数据过滤器的功能就先介绍到这里了&＃xff0c;下期再见?