Question

我有与edge和chrome一起使用的功能，但不适用于IE（V 11.0.15063.0）

item = totalsArray.find(function([[l,r]]) {
      return l === a && r === b 
});

但是array.find不适用于IE，所以我也有来自mdn的polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

当我尝试使用polyfill运行时出现的错误是SCRIPT1010: Expected Identifier突出显示function([[l,r]])的第一个括号我似乎无法弄清楚什么是错的

Answer 1

此处的问题是您使用的是Internet Explorer或其他旧版浏览器中未提供的新JavaScript语法。

正如您所指出的，您可以通过自己定义（“polyfill”）来为IE提供缺少的array.find()方法。

但您也在使用新的ES6 语法，destructuring function parameter。

暂时忘记.find()，让我们自己看一下语法问题。这是一个回调版本，作为独立函数编写，记录l和r值，并进行简单测试：

// This function actually takes a single argument,
// which is an array of one element. That element is
// an array of two elements which we call l and r.
// We use a destructuring function parameter to get
// those values directly without writing explicit
// code to access the array elements.
var fun = function( [ [l,r] ] ) {
    console.log( l, r );
};

fun( [ [12,34] ] );  // Should log: 12 34

在支持ES6语法的现代浏览器中，该代码段运行良好，但在任何版本的IE中，您都会收到“预期标识符”消息，因为它无法使用解构参数识别新函数语法。

您无法使用polyfill修复此问题。这只是为Array原型添加了一个缺少的方法，它不会让IE11的JavaScript版本理解IE11编写时不存在的新语法。

如果您想要IE兼容性，您有两种选择。一种是使用TypeScript或Babel之类的JavaScript编译器，它允许您使用此ES6语法并将其转换为ES5等效语法。以下是上述代码段的副本，代码相同但启用了Babel。除了测试之外，我们还会记录我们的ES6功能被翻译成的ES5源代码：

var fun = function( [ [l,r] ] ) {
    console.log( l, r );
};

fun( [ [12,34] ] );
console.log( fun.toString() );

显示的ES5代码可能会对名为_slicedToArray的辅助函数或其变体进行几次调用。 Babel编译器在其生成的代码中包含此函数。

这在IE中运行良好，但需要您开始使用一种构建过程或另一种构建过程，以便在您进行更改时运行Babel或TypeScript（或其他）编译器。

另一种选择是编写与ES5兼容的代码，您自己进行解构。查看函数的语法以及调用时传入的内容。该函数实际上采用一个参数，即一个数组。该数组有一个元素也是一个数组。该内部数组有两个元素，为方便起见，您将其命名为l和r。

所以你可以这样做：

// arg is an array of one element.
// That element is itself an array of two elements.
// We call those two elements l and r.
// In ES6, we could use this destructuring syntax:
//     function( [ [l,r] ] ) {}
// But for compatibility with ES5, we'll use a single
// function argument containing the outer array, and
// access the l and r values with code.
var fun = function( arg ) {
    var l = arg[0][0], r = arg[0][1];
    console.log( l, r )
};

fun( [ [12,34] ] );

如果您将这个想法重新插入原始代码中，它也可以在IE中使用：

item = totalsArray.find( function( arg ) {
    var l = arg[0][0], r = arg[0][1];
    return l === a && r === b;
});

Answer 2

如果您阅读了Array.prototype.find（）的文档，您可以查看他们不支持此功能的IE。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

你必须编写一个手动完成的循环。

Internet Explorer，具有参数数组的函数

2 个答案: