Internet Explorer, functions with arrays for parameters

问题

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 
});

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

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

回答1:

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

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

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

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

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.

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.

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() );

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.

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.

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] ] );

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;
});

回答2:

If you read the doc of Array.prototype.find() you can view that they're is no support for IE for this function.

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

You will have to write a loop who will do it manually.

来源：https://stackoverflow.com/questions/49392331/internet-explorer-functions-with-arrays-for-parameters

标签

javascript

internet-explorer