Как объединить объект в IE 11

У меня есть следующий массив объекта:

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' из undefined или нулевую ссылку

Ошибка для 2: объект не поддерживает свойство или метод 'assign'

Любые предложения о том, как я должен объединить объект в IE 11?

Ответы

Ответ 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);

Ответ 2

Вы можете использовать метод jQuery $.extend(), который работает в 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

Установка:

npm i -s babel-polyfill

И в начале записи index.js добавьте файл:

import 'babel-polyfill'

Это решит некоторые проблемы, которые Бабел не сделал. Object.assign является одним из них.

Это означает, что вы можете использовать новые встроенные функции, такие как Promise или WeakMap, статические методы, такие как Array.from или Object.assign, методы экземпляра, такие как Array.prototype.includes и функции генератора (при условии, что вы используете плагин регенератора). Полифилл также расширяет глобальные рамки. как родные прототипы, такие как String, чтобы сделать это.

В конце вам нужно будет решить, хотите ли вы использовать весь babel-polyfill (размер которого составляет около 50 КБ) или использовать только то, что вам нужно, через отдельные полифиллы, т.е. es6-обещание для обещаний.

Ответ 4

Я думаю, что лучше всего, если вы используете библиотеку lodash util в своем проекте, это метод lodash assign, который работает так же, как Object.prototype.assign для всех браузеров, включая IE (по крайней мере, IE11): https://lodash. ком /Docs/4.17.4 # правопреемника

Если вы еще не используете lodash, подумайте об этом. Он имеет много утилит, которые прекрасно работают во всех браузерах, будь то в JavaScript, TypeScript и NodeJS (проверено мной, но, вероятно, также поддерживает другие технологии, связанные с JS). Лично я включаю lodash во все мои проекты, связанные с javascript

Ответ 5

Используйте полифилл как это; Ссылка: 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

В дополнение к @vladatr, если вы используете Wepack:

В вашем webpack.config.js

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

В моей точке src/index.js файл src/index.js:

import "babel-polyfill";

Ответ 7

Если вы используете TypeScript, попробуйте заменить Object.assign({},...Objs) на {...Objs}; браузер автоматически заменит его на __assign({}, Objs); и эта нотация работает в IE11.