Javascript 箭头函数求值预处理器

浏览器通过

eval

或

new函数

支持动态JavaScript评估。这对于将作为字符串提供的小型数据绑定表达式编译为JavaScript函数非常方便

例如

我想对这些表达式进行预处理，以支持ES6 arrow函数语法，而无需使用babel或任何其他包含数百行JavaScript的库

var selectId = new Function('x', 'return x.map(a=>a.id)');

不幸的是，即使是最新的IE版本，这也不起作用

函数应该获取一个字符串并返回另一个字符串。例如

resolveArrows('return x.map(a=>a.id)') 

应该回来

'return x.map（函数（a）{return a.id}）

---

关于如何实现这样一个东西有什么想法吗？

正如其他人已经解释过的那样，这样一个实用程序将非常脆弱，不能用非常复杂的代码来信任

但是，对于简单的情况，可以实现这一点。 以下是指向

胖箭头的链接

函数扩展

导入fatArrowUtil.js并对代码调用

expandFatArrow（code）

下面是示例用法

expandFatArrow("()=>'test me';");

下面是结果

(function (){return 'test me';}).bind(this)

下面是您建议的测试用例的输出

//actual
var selectId = new Function('x', 'return x.map(a=>a.id)');
//after expansion
var selectId = new Function('x', 'return x.map((function (a){return a.id}).bind(this))');

注意：此实用程序使用函数的bind（）来保留“This”上下文。 它不会试图编译您的代码，原始代码中的任何错误都会出现在扩展代码中。

以下是测试和结果的工作样本

//fat arrow实用程序的启动
"严格使用",；
功能扩展箭头（代码）{
var arrowheadlegex=RegExp（/（\（（？：\w+，）*\w+\）\（\）\124；\ w+[\r\t]*=>\s*/）；
var arrowHeadMatch=arrowhealegex.exec（代码）；
if（arrowHeadMatch）{//如果没有匹配项，则按原样返回
变量参数=箭头匹配[1]；
如果（参数字符（0）！=“（”）{
params=“（“+params+”）；
}
var指数=arrowHeadMatch.index；
var startCode=代码子字符串（0，索引）；
var bodyAndNext=code.substring（索引+箭头头匹配[0]。长度）；
var curlyCount=0；
var curlyPresent=false；
var singleLineBodyEnd=0；
var bodyEnd=0；
var openingQuote=null；
对于（变量i=0；ilogDom（'test1:'+'再次测试我{{{}{}}'）；
fun1（）；
var selectId=new函数（'x'，'return x.map（a=>a.id）；；
var mappedArr=selectId（[{id:'test'}，{id:'test1'}]）；
log（“test2:+JSON.stringify（mappedArr））；
logDom（“test2:+JSON.stringify（mappedArr），'log'）；
//与周围的代码
变量数=[1,2,3,4,5,6,7,8,9]；
var es6OddNumbers=numbers.filter（number=>number%2）；
logDom（“test3:+es6OddNumbers，'log'）；
//独立胖箭头
var square=x=>x*x；
logDom（“test4:+square（10），“log”）；
//多参数、单线
增值=（a，b）=>a+b；
logDom（“test5:+add（3,4），'log'）；
//使用类似test1的环境进行测试
var developers=[{name:'Rob'}，{name:'Jake'}]；
var es6Output=developers.map（developer=>developer.name）；
logDom（“test6:+es6Output，'log'）；
//空大括号，返回未定义的
logDom（“test7:+（（）=>{}）（，'log'）；
//返回空对象
logDom（“test8:”+（（）=>{return{}}）（，'log'）；
//使用“this”范围和多行
函数计数器6（）{
这1.5秒=0；
var区间计数器=0；
var intervalId=null；
intervalId=window.setInterval（（）=>{
这个.seconds++；
logDom（“test9:interval seconds:+this.seconds，'log'）；
如果（++间隔计数器>9）{
clearInterval（intervalId）；
logDom（“清除间隔”，“日志”）；
}
}, 1000);
}
var counterB=新计数器6（）；
window.setTimeout（（）=>{
var秒=计数器B秒；
logDom（“test9:timeout seconds:+counterB.seconds，'log'）；
}, 1200);

当我偶然发现这篇文章时，我用与OP相同的问题在网上搜索。然而，纯属运气，我使用

eval

意外地执行了一个lambda表达式，anno 2019，它就可以工作了！我测试了最新的Chrome&Edge，这对我来说已经足够好了

以下是我所做的：

var lambda='（a，b）=>a+b'；
var fun=评估值（λ）；
var总和=乐趣（40,2）；
document.write（`Sum:${Sum}`）；

你想写一个解析器吗？@Andy这是JavaScript的胖箭头lambda表示法（参数是

a

，返回值是

a.id

）。因此

a.id

，它是

x.map（）的函数参数你不能指望它神奇地工作在不支持箭头功能的浏览器上。你需要一个解析器，比如Babel/TraceUR。它不像做一个字符串替换那样简单，加上你仍然需要考虑<代码>的正确词法范围> < <代码> >代码>参数< /代码>。除非你的箭头函数与E不相同。S6规范。我不是在寻找防弹的解决方案。一些适用于常见场景的解决方案是可以的。很酷。它有效。这正是我要求的。我只看到一个潜在的问题，那就是如果在字符串中发现大括号。我想大括号可以
//actual
var selectId = new Function('x', 'return x.map(a=>a.id)');
//after expansion
var selectId = new Function('x', 'return x.map((function (a){return a.id}).bind(this))');