How to merge object in IE 11

问题

I have the following array of object:

Objs[0] = {Name : "ABC"};
Objs[1] = {Roll : 123}

I'm trying to make it as the following:

Objs {
  Name : "ABC",
  Roll : 123
}

I attempted to make it with the following code:

var Objs = [{
  Name: "ABC"
}, {
  Roll: 123
}];

console.log(
  Object.assign.apply(null, [{}].concat(Objs)) // 1
)
or 

console.log(
  Object.assign({}, ...Objs) // 2
)

The problem is that this is not working in IE 11.

I get the errors:

Error for 1 : Unable to get property 'on' of undefined or null reference

Error for 2 : Object doesn't support property or method 'assign'

Any suggestions on how I should merge the object in IE 11?

回答1:

IE11 does not support Object.assign.

You could iterate the array and the keys and take the values as new property of the result object.

var objs = [{ Name: "ABC" }, { Roll: 123 }],
    result =  objs.reduce(function (r, o) {
        Object.keys(o).forEach(function (k) {
            r[k] = o[k];
        });
        return r;
    }, {});

console.log(result);

回答2:

You can use jQuery method $.extend() which work in IE 11.

var object = {name: 'John', surname: 'Rowland'};
var newObject = $.extend({}, object);

newObject.age = '30';

console.log(object);
console.log(newObject)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

回答3:

Install:

npm i -s babel-polyfill

And at the top of entry index.js file add:

import 'babel-polyfill'

This will solve some issues that Babel did not. Object.assign is one of them.

This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

For the end, you will need to decide whether you want to use the whole babel-polyfill (which is around 50kb minimized) or to use only what you need through individual polyfills, ie. es6-promise for Promises.

回答4:

I think best thing to do, if you are using lodash util library in your project, is lodash's assign method, which works same as Object.prototype.assign for all browsers, including IE (at least IE11): https://lodash.com/docs/4.17.4#assign

If you are not using lodash yet, consider it. It has many util functions which works perfectly fine on all browsers, either in JavaScript, TypeScript and NodeJS (tested by myself, but probably it supports other JS connected technologies as well). Personally I include lodash to all my javascript connected projects

回答5:

Use a polyfill like this; Ref: MDN

 if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

回答6:

If you use TypeScript you can use

let newObject = {
    ...existingObject
}

This creates a shallow copy of the existing object.

回答7:

Even with babel:

const newObj = Object.assign({}, myOtherObject)

was destroying us in IE11.

We changed it to:

const newObj = { ...myOtherObject }

and that worked in conjunction with babel.

回答8:

In addition to @vladatr, in case you're using Wepack:

In your webpack.config.js

const path = require("path");
module.exports = {
  entry: ["babel-polyfill", path.resolve(__dirname, "../src/index.js")],
  .
  .

In my entry point src/index.js file:

import "babel-polyfill";

回答9:

If you are using TypeScript, try to replace Object.assign({}, ...Objs) to {...Objs}; the browser will automatically replace it to __assign({}, Objs); and this notacion works in IE11.

来源：https://stackoverflow.com/questions/42091600/how-to-merge-object-in-ie-11

标签

javascript

object

internet-explorer-11