如何在 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 中不起作用。

我得到错误：

错误 1：无法获取未定义或空引用的属性“on”

错误 2：对象不支持属性或方法“分配”

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

Answer 1

您可以使用在 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 2

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 3

安装：

npm i -s babel-polyfill

并在入口 index.js 文件的顶部添加：

import 'babel-polyfill'

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

这意味着您可以使用新的内置插件，例如 Promise 或 WeakMap，静态 像 Array.from 或 Object.assign 这样的方法，像这样的实例方法 Array.prototype.includes 和生成器函数（前提是您使用 再生器插件）。 polyfill 也添加到全局范围 为了做到这一点，像 String 这样的原生原型。

最后，您需要决定是要使用整个 babel-polyfill（最小化大约 50kb）还是仅通过单个 polyfill 使用您需要的东西，即。 es6-promise 用于 Promises。

Answer 4

如果您在项目中使用 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 5

使用这样的 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 6

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

Answer 7

除了@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 8

这个只有 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

Answer 9

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

let newObject = {
    ...existingObject
}

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

Answer 10

即使有 babel：

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

在 IE11 中摧毁了我们。

我们将其更改为：

const newObj = { ...myOtherObject }

这与 babel 一起工作。