箭头函数无法在IE中运行的原因及兼容方案:如何让$scope.consList.some(element => element.Key.includes('Dev'))跨浏览器正常工作
箭头函数在IE浏览器的兼容问题解答
1. 为什么箭头函数没法在IE里正常工作?
老版本IE(包括IE11)完全不支持ES6(ECMAScript 2015)的语法特性,而箭头函数正是ES6新增的语法。IE的JavaScript引擎从未做过箭头函数的解析和执行适配,一旦代码里出现箭头函数,IE就会直接抛出语法错误,导致代码无法正常运行。
另外,箭头函数自带的词法绑定this、没有独立arguments对象这些特性,都是IE旧引擎完全没处理过的机制,这也是它无法兼容的核心原因。
2. 兼容IE的代码修改方案
你提到的这段代码在Chrome和Edge能正常运行但IE报错,其实存在两个不兼容点:箭头函数和Array.prototype.includes()方法(includes同样是ES6新增特性,IE不支持)。我们可以把这两部分都改成IE支持的ES5语法,同时保证现代浏览器的兼容性不受影响:
修改后的代码如下:
$scope.consList.some(function(element) { return element.Key.indexOf('Dev') !== -1; });
具体修改说明:
- 把箭头函数
element => ...替换成传统的function(element) {...}写法,这是IE完全能识别的函数声明方式。 - 把
element.Key.includes('Dev')替换成element.Key.indexOf('Dev') !== -1:indexOf是ES5就支持的方法,当返回值不等于-1时,就表示字符串中包含目标子串,效果和includes完全一致。
这个修改方案是完全向下兼容的——现代浏览器对ES5语法支持非常完善,不会破坏原有功能;同时IE也能正常解析执行这段代码。
内容的提问来源于stack exchange,提问作者user16252006




