web-dev-qa-db-fra.com

Comment fusionner un objet dans IE 11

J'ai le tableau d'objet suivant:

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

J'essaye de le faire comme suit:

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

J'ai essayé de le faire avec le code suivant:

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

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

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

Le problème est que cela ne fonctionne pas dans IE 11.

Je reçois les erreurs:

Erreur pour 1: impossible d'obtenir la propriété 'sur' d'une référence non définie ou nulle

Erreur pour 2: l'objet ne prend pas en charge la propriété ou la méthode 'assign'

Des suggestions sur la façon dont je devrais fusionner l'objet dans IE 11?

javascriptobjectinternet-explorer-11
26
David

IE11 ne prend pas en charge Object.assign .

Vous pouvez itérer le tableau et les clés et utiliser les valeurs comme nouvelle propriété de l’objet résultat.

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);
33
Nina Scholz

Vous pouvez utiliser la méthode jQuery $. Extend () qui fonctionne dans 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>
44
Nebojsa Sapic

Installer:

npm i -s babel-polyfill

Et en haut de l’entrée index.js le fichier ajoute:

import 'babel-polyfill'

Cela résoudra certains problèmes que Babel n’a pas résolus. Object.assign est l'un d'entre eux.

Cela signifie que vous pouvez utiliser de nouvelles fonctions intégrées telles que Promise ou WeakMap, des méthodes statiques comme Array.from ou Object.assign, des méthodes d'instance comme Array.prototype.includes et des fonctions de générateur (à condition que vous utilisiez le plugin regenerator). Le polyfill ajoute à la portée globale ainsi que des prototypes natifs comme String pour ce faire.

Pour finir, vous devrez décider si vous voulez utiliser la totalité babel-polyfill (ce qui correspond à environ 50 kb minimisé) ou utiliser uniquement ce dont vous avez besoin pour chaque remplissage individuel, c'est-à-dire. es6-promise pour les promesses.

11
vladatr

Je pense que la meilleure chose à faire, si vous utilisez la bibliothèque lodash util dans votre projet, est la méthode assign ( de lodash , qui fonctionne de la même manière que Object.prototype.assign pour tous les navigateurs, y compris IE (au moins IE11): https://lodash.com/docs/4.17.4#assign

Si vous n'utilisez pas encore lodash, considérez-le. Il possède de nombreuses fonctions utilitaires qui fonctionnent parfaitement sur tous les navigateurs, que ce soit en JavaScript, TypeScript ou NodeJS (testé par moi-même, mais il prend probablement en charge d’autres technologies connectées JS). Personnellement j'inclus lodash dans tous mes projets connectés en javascript

5
bladekp

Utilisez un polyfill comme celui-ci; 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
  });
}
1
oztecnic