Comment convertir un tableau d'objets en un seul objet avec des paires clé-valeur en JavaScript ?

Conversion d'un tableau d'objets en un objet avec des paires clé-valeur en JavaScript

En JavaScript, conversion d'un tableau d'objets en un seul objet avec des paires clé-valeur nécessite l’utilisation de techniques avancées de manipulation de tableaux. Explorons comment y parvenir d'une manière compatible avec le navigateur.

Pour commencer, comprenons la structure du tableau d'entrée :

var arr = [{"name1":"value1"},{"name2":"value2"},...];

Ce tableau contient plusieurs objets, chacun avec une clé -paire de valeurs. Notre objectif est de créer un objet qui fusionne les paires clé-valeur de tous les objets du tableau.

Utilisation de Object.assign() et Spread Syntax

La solution la plus moderne et compatible avec les navigateurs consiste à utiliser la méthode Object.assign() avec la syntaxe spread (...). Object.assign() fusionne les propriétés de plusieurs objets source dans un objet cible. L'utilisation d'une syntaxe répartie sur le tableau arr nous permet de l'aplatir, fusionnant tous les objets en une seule source.

var array = [{ name1: "value1" }, { name2: "value2" }],
    object = Object.assign({}, ...array);

console.log(object); // {name1: "value1", name2: "value2"}

Dans cet exemple, Object.assign() crée un nouvel objet (objet) en fusionnant un objet vide {} avec le tableau aplati créé par la syntaxe spread (...array). Cela combine toutes les paires clé-valeur des objets du tableau arr en un seul objet.

Prise en charge des navigateurs plus anciens

Si vous devez prendre en charge les navigateurs existants qui n'ont pas Object.assign( ) ou une syntaxe spread, vous pouvez utiliser un polyfill pour fournir ces méthodes. De plus, il existe d'autres méthodes alternatives, telles que l'utilisation de réduire() ou de boucles for, pour obtenir le même résultat. Cependant, ces approches peuvent être moins efficaces ou nécessiter plus de code.

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!