Utilisation de Object.fromEntries et Object.entries

object.entries() Convertir un objet en tableau. Mais que se passe-t-il si vous voulez faire le contraire ? Ne réfléchissez plus ! Utilisez Object.fromEntries() pour convertir un tableau en objet.

const keyValuePair = [
  ['cow', 'val1'],
  ['pig', 'val2'],
];
Object.fromEntries(keyValuePair);
// { cow: 'val1', pig: 'val2' }

Object.fromEntries

Soulignons d'abord l'anatomie d'un objet. Un objet est quelque chose avec une clé et une valeur.

const object = {
  key: 'value',
};

Si nous voulons convertir quelque chose en objet, nous devons transmettre quelque chose avec ces deux exigences : key et value.

Il existe deux paramètres qui répondent à ces exigences :

1. Tableau avec des paires clé-valeur imbriquées
2. Objet Map

Utiliser un objet .fromEntries Convertir un tableau en objet

Il s'agit d'un tableau imbriqué avec des paires clé-valeur

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
];

Lorsque nous lui appliquons Object.fromEntries, nous pouvons en extraire l'objet.

Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}

Utilisez Object.fromEntries pour convertir Map en objet

JavaScript ES6 nous apporte un nouvel objet appelé map, qui est très similaire aux objets.

Créons un nouvel objet Map

// 使用构造函数
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
]);
// 或者我们可以使用实例方法，"set"
const map = new Map();
map.set('key 1', 'value 1');
map.set('key 2', 'value 2');
// 结果
// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

Maintenant, nous convertissons Map en objet en utilisant Object.fromEntries

Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}

Erreur de type avec Object.fromEntries avec d'autres types

Soyez prudent lorsque vous essayez de transmettre d'autres types de données à Object.fromEntries, ce qui générera tous une erreur

❌Uncaught TypeError

Assurez-vous de transmettre uniquement des paires clé-valeur

Object.fromEntries vs Object.entries

Object.fromEntries a l'effet inverse de Object.entries . Donc Object. entries transformera notre tableau et renverra un nouveau tableau imbriqué de paires clé-valeur. Et Object.fromEntries reconvertira le tableau en objet.

const object = { key1: 'value1', key2: 'value2' };
const array = Object.entries(object);
// [ ["key1", "value1"], ["key2", "value2"] ]
Object.fromEntries(array);
// { key1: 'value1', key2: 'value2' }

Conversion d'objet en objet

Si vous lisez la proposition originale du TC39, c'est pourquoi cette nouvelle méthode a été introduite. Avec l'introduction de Object.entries, il n'existe pas de moyen simple de reconvertir le résultat en objet.

Généralement, lorsque nous choisissons d'utiliser Object.entries, c'est parce que cela nous donne accès à de nombreuses méthodes de tableau astucieuses comme filter. Mais après avoir effectué la conversion, nous sommes un peu coincés avec ce tableau.

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "v2"], ["carrot", "v3"] ]

Nous pouvons profiter de toutes ces méthodes de tableau utiles tout en récupérant nos objets, et enfin, les convertir d'objet en objet.

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
);
// { broccoli: 'v2', carrot: 'v3' }

Support des navigateurs

À l'exception d'Internet Explorer, la plupart des principaux navigateurs prennent en charge cette méthode.

Tutoriel recommandé : "Tutoriel JS"

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!