Internet Explorer，带有参数数组的功能 [英] Internet Explorer, functions with arrays for parameters

问题描述

我具有可用于边缘和镶边的功能，但不适用于IE(V 11.0.15063.0)

I have the function that works with edge and chrome, but not with IE (V 11.0.15063.0)

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

但是array.find不适用于IE，所以我也有来自mdn的polyfill

But array.find does not work with IE so I have the polyfill from mdn as well https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

当我尝试使用polyfill运行时遇到的错误是 SCRIPT1010:预期标识符突出显示了 function([[l，r]])的第一个括号找出问题所在

The error I get when I try running with polyfill is SCRIPT1010: Expected Identifier highlighting the first parentheses of function([[l,r]]) I cant seem to figure out whats wrong

推荐答案

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

The problem here is that you're using new JavaScript syntax that isn't available in Internet Explorer or other older browsers.

如前所述，您可以通过简单地自行定义("polyfill")为IE提供缺少的 array.find()方法.

As you noted, you can provide IE with the missing array.find() method by simply defining it yourself (a "polyfill").

但是您还使用了新的ES6 语法，即解构函数参数.

But you're also using new ES6 syntax, the destructuring function parameter.

暂时忘掉 .find()，让我们自己看看语法问题.这是作为独立函数编写的回调版本，该函数记录 l 和 r 值，以及一个简单的测试:

Forget about .find() for a moment and let's look at the syntax question on its own. Here's a version of your callback written as a standalone function that logs the l and r values, and a simple test:

// 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中，您都将收到"Expected Identifier"消息，因为它无法识别带有解构参数的新函数语法.

That snippet runs fine in modern browsers that support ES6 syntax, but in any version of IE you will get the "Expected Identifier" message, because it doesn't recognize the new function syntax with a destructuring parameter.

您不能使用polyfill来解决此问题.这只是在 Array 原型中添加了一种缺少的方法，它并没有使IE11的JavaScript版本理解编写IE11时不存在的新语法.

You can't fix this with a polyfill. That just adds a missing method to the Array prototype, it doesn't let IE11's version of JavaScript understand new syntax that didn't exist at the time IE11 was written.

如果要与IE兼容，则有两个选择.一种方法是使用JavaScript编译器(例如TypeScript或Babel)，使您可以使用此ES6语法并将其转换为等效于ES5的语法.这是具有相同代码但启用了Babel的上述代码段的副本.除测试外，我们还将记录将ES6函数转换为的ES5源代码:

If you want IE compatibility, you have two options. One is to use a JavaScript compiler such as TypeScript or Babel that will let you use this ES6 syntax and translate it down to an ES5 equivalent. Here's a copy of the above snippet with identical code but with Babel enabled. And in addition to the test, we'll log the ES5 source code that our ES6 function was translated into:

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

fun( [ [12,34] ] );
console.log( fun.toString() );

显示的ES5代码可能调用了一个名为 _slicedToArray 的辅助函数或该函数的一个变体.Babel编译器将其包含在其生成的代码中.

The displayed ES5 code may have a couple of calls to a helper function named _slicedToArray or a variation on that. This function is included by the Babel compiler in the code it generates.

这在IE中运行良好，但是要求您开始使用一种或多种构建过程，以便每当进行更改时Babel或TypeScript(或其他)编译器都可以运行.

This runs fine in IE but would require you to start using one kind of build process or another so that the Babel or TypeScript (or other) compiler runs whenever you make a change.

另一种选择是编写ES5兼容代码，在此位置进行自我破坏.查看函数的语法以及调用函数时传递的内容.该函数实际上采用单个参数，该参数是一个数组.该数组只有一个元素，它也是一个数组.该内部数组具有两个元素，为方便起见，已将其命名为 l 和 r .

The other option is to write ES5-compatible code where you do the destructuring yourself. Look at the syntax for your function and what you pass in when you call it. The function actually takes a single parameter which is an array. That array has a single element which is also an array. That inner array has two elements, which you've named l and r for convenience.

所以您可以自己这样做:

So you can do that yourself like this:

// 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中也可以使用:

If you plug that idea back into your original code, it should work in IE too:

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

这篇关于Internet Explorer，带有参数数组的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！