Méthode Object.assign() dans ES6

Cet article vous explique principalement que la méthode Object.assign est utilisée pour fusionner des objets et copier toutes les propriétés énumérables de l'objet source (source) vers l'objet cible (cible). L'article suivant vous présente principalement Friends. ceux qui en ont besoin peuvent se référer aux informations pertinentes sur la nouvelle méthode Object.assign() dans ES6. J'espère que cela pourra aider tout le monde.

Préface

Copier les propriétés de l'objet A vers l'objet B est une opération très courante en programmation JavaScript. L'article suivant présentera la propriété Object.assign() d'ES6, qui peut être utilisée pour la copie d'objets.

Dans l'écosystème JavaScript, la copie d'objets a un autre terme : étendre. Voici les interfaces d'extension fournies par deux bibliothèques JS :

Prototype : Object.extend(destination, source)

Underscore.js : _.extend(destination, *sources)

Introduction à Object.assign()

ES6 fournit Object.assign(), qui est utilisé pour fusionner/copier les propriétés des objets.

Object.assign(target, source_1, ..., source_n)

Il modifiera l'objet cible puis le renverra : copiez d'abord toutes les propriétés énumérables de l'objet source_1 vers la cible, puis copiez les propriétés de source_1 et ainsi de suite dans l'ordre.

1. Le nom de l'attribut peut être une chaîne ou un symbole

Dans ES6, le nom de l'attribut de l'objet peut être une chaîne ou un symbole. La valeur Symbol étant unique, cela signifie que lorsque Symbol est utilisé comme nom d'attribut d'un objet, il est garanti que les attributs portant le même nom n'apparaîtront pas. Lorsque le nom de l'attribut de l'objet est une chaîne ou un symbole, Object.assign() prend en charge les deux.

2. La copie des attributs est réalisée par affectation

Les attributs de l'objet cible sont créés par copie, ce qui signifie que si la cible a des méthodes setters, ils seront appelés.

Une autre solution consiste à l'implémenter via une définition, ce qui créera de nouvelles propriétés propres et n'appellera pas la méthode des setters. En fait, une autre version de la proposition Object.assign() utilise cette méthode. Cependant, cette proposition a été rejetée dans ES6 et pourra être réexaminée dans les versions ultérieures.

Exemples d'utilisation de Object.assign()

1. Initialiser les propriétés de l'objet

Le constructeur sert simplement à initialiser les propriétés de l'objet. pour le faire plusieurs fois Nom d'attribut en double. Dans le constructeur de l'exemple de code, x et y sont répétés deux fois :

class Point
{
 constructor(x, y)
 {
  this.x = x;
  this.y = y;
 }
}

Si possible, ma préférence personnelle est d'omettre toute redondance. (En fait, CoffeeScript et TypeScript ont une syntaxe pour résoudre le problème des noms de propriétés répétés dans les constructeurs.) :

class Point
{
 constructor(this.x, this.y){}
}

Au moins, Object.assign() peut nous aider à réduire certaines duplications :

class Point
{
 constructor(x, y)
 {
  Object.assign(this, { x, y });
 }
}

Dans ES6, { x, y } est l'abréviation de { x: x, y: y }.

2. Ajouter une méthode à un objet

ECMAScript 5, vous utilisez une expression de fonction pour ajouter une méthode à un objet :

Dans ES5, vous devez utiliser le définition du mot-clé function Nouvelles méthodes d'objets :

MyClass.prototype.foo = function(arg1, arg2)
{
 //...
};

Dans ES6, la définition des méthodes objet est plus concise et ne nécessite pas l'utilisation du mot-clé function. À ce stade, vous pouvez utiliser Object.assign() pour ajouter une nouvelle méthode à l'objet :

Object.assign(MyClass.prototype,
{
 foo(arg1, arg2)
 {
  //...
 }
});

3 Copiez l'objet

Utilisez Object.assign() pour copier en profondeur. l'objet, y compris son prototype

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1,y:2}

console.log(copy) // 输出{x:1,y:2}

Copier uniquement ses propres propriétés :

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({}, obj);

console.log(copy) // 输出{x:1}

Recommandations associées :

7 conseils pratiques ES6 à partager

Exemples d'utilisation get et set des classes de classe dans ES6 javascript

Quelles sont les fonctions des méthodes statiques des classes dans ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!