How to achieve the spread operator in IE 11?

问题

For some "extraction" operation I am trying to get the following snippet work, without using the spread operator, because IE 11 doesn't knows about spread operators.

works in Chrome, but not IE 11:

html_col_width =[{"targets":0, "width":50}, {"targets":1, "width":100},{"targets":2, "width":442}]

        ... some other code
        order: [
            [response.order_by_column, response.order_by]
        ],
        columnDefs: [
                      ...html_col_width,
                      {other: stuff},
                      {other: stuff}
    })

See columnDefs: ...html_col_width

How can I achieve the following without the spread operator:

columnDefs: [
          {"targets":0, "width":50},
          {"targets":1, "width":100},
          {"targets":2, "width":442},
          {other: stuff},
          {other: stuff}
    })

I have read and tried the following, but this is not working if the array of objects contains 2 keys: Spread Operator equivalent in IE - Javascript. The content at the provided link is about merging different objects, which makes the question rather different.

回答1:

What you are using is called "Array Destructuring": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

As you said, it doesn´t work in IE, and that is because it´s part of ES6 and that is not (and never will) supported in IE 11.

One option to solve it is using transpilers like Babel.

Other option, is to define your own function:

var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
        r[k] = a[j];
return r;

};

var html_col_width = [{ "targets": 0, "width": 50 }, { "targets": 1, "width": 100 }, { "targets": 2, "width": 442 }];
var columnDefs = __spreadArrays(html_col_width, [{ other: 'stuff' }, { other: 'stuff' }]);

回答2:

Have you tried concat()?

html_col_width =[{"targets":0, "width":50}, {"targets":1, "width":100}, {"targets":2, "width":442}]

obj = {
  columnDefs: [
    {other: 'sds'},
    {others: 'dds'}
    ]
};

obj.columnDefs = obj.columnDefs.concat(html_col_width);
console.log(obj.columnDefs);

回答3:

Spread properties is a part of ECMAScript 2018 which is not supported by IE. You can use Babel to transpile it.

If you just want to use it in non Node.js environments, you can use babel-standalone. You just need to load the babel-standalone in your script and write the script you want to transpile in script tag with type “text/babel” or “text/jsx”, for example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
</head>
<body>
    <script type="text/babel">
        var html_col_width =[{"targets":0, "width":50}, {"targets":1, "width":100},{"targets":2, "width":442}];
        var columnDefs = [
        ...html_col_width,
        { other: "stuff" },
        { other: "stuff" }
        ];
        console.log(JSON.stringify(columnDefs));
    </script>
</body>
</html>

Result in IE:

来源：https://stackoverflow.com/questions/64536121/how-to-achieve-the-spread-operator-in-ie-11

标签

javascript

internet-explorer

ecmascript-6

datatables

spread