如何在 IE 11 中合并对象

Question

我有以下对象数组：

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

我正在尝试将其制作如下：

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

我尝试使用以下代码实现：

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

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

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

问题是这在 IE 11 中不起作用。

我收到错误：

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

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

关于我应该如何在 IE 11 中合并对象有什么建议吗？

Answer 1

IE11 不支持 Object.assign.

您可以迭代数组和键并将值作为结果对象的新属性。

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

Answer 2

您可以使用在 IE 11 中工作的 jQuery 方法 $.extend()。

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>

Answer 3

如果你在你的项目中使用 lodash util 库，我认为最好的办法是 lodash 的 assign 方法，它与 Object.prototype.assign 对于所有浏览器的工作方式相同，包括 IE（至少 IE11）：https://lodash.com/docs/4.17.4#assign

如果您还没有使用 lodash，请考虑一下。它有许多实用函数，可以在所有浏览器上完美运行，无论是 JavaScript、TypeScript 还是 NodeJS（我自己测试过，但它可能也支持其他 JS 连接技术）。就我个人而言，我将 lodash 添加到我所有的 javascript 连接项目

Answer 4

安装：

npm i -s babel-polyfill

并在条目顶部 index.js 文件添加：

import 'babel-polyfill'

这将解决一些 Babel 没有解决的问题。 Object.assign就是其中之一。

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.

最后，您需要决定是要使用整个 babel-polyfill（最小化约 50kb）还是只使用您需要的部分通过单独的 polyfill，即。 es6-promise 用于承诺。

Answer 5

除了@vladatr，如果您使用的是 Wepack：

在你的webpack.config.js

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

在我的入口点 src/index.js 文件中：

import "babel-polyfill";

Answer 6

如果您使用的是 TypeScript，请尝试将 Object.assign({}, ...Objs) 替换为 {...Objs};，浏览器会自动将其替换为 __assign({}, Objs);，并且此标记在 IE11 中有效。

Answer 7

像这样使用polyfill； 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
  });
}

Answer 8

如果你使用 TypeScript，你可以使用

let newObject = {
    ...existingObject
}

这将创建现有对象的浅表副本。

Answer 9

即使有 babel:

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

在 IE11 中摧毁了我们。

我们将其更改为：

const newObj = { ...myOtherObject }

并且与 babel 结合使用。

Answer 10

这个 javascript 唯一的解决方案在 IE 中有效。循环遍历数组，并在该循环中遍历对象中的每个键并将其添加到新对象。新对象包含您想要的数据。

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

console.log(Objs);

var newObject = {};

for(var i=0; i<Objs.length; i++) {

    for(var key in Objs[i]) {
        if(! Objs[i].hasOwnProperty(key))
            continue;

        newObject[key] = Objs[i][key];
    }
}

console.log(newObject);

如果需要，可以将 newObject 分配给数组变量 Objs = newObject

如何在 IE 11 中合并对象

How to merge object in IE 11

javascript

object

internet-explorer-11