You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

箭头函数无法在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') !== -1indexOf是ES5就支持的方法,当返回值不等于-1时,就表示字符串中包含目标子串,效果和includes完全一致。

这个修改方案是完全向下兼容的——现代浏览器对ES5语法支持非常完善,不会破坏原有功能;同时IE也能正常解析执行这段代码。


内容的提问来源于stack exchange,提问作者user16252006

火山引擎 最新活动