Convertir un tableau en objet

Quelle est la meilleure façon de convertir:

['a','b','c']

à:

{
  0: 'a',
  1: 'b',
  2: 'c'
}

ECMAScript 6 présente le polyfillable facilement Object.assign:

La Object.assign()méthode est utilisée pour copier les valeurs de toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible. Il renverra l'objet cible.

Object.assign({}, ['a','b','c']); // {0:"a", 1:"b", 2:"c"}

La propre lengthpropriété du tableau n'est pas copiée car elle n'est pas énumérable.

En outre, vous pouvez utiliser la syntaxe de diffusion ES6 pour obtenir le même résultat:

{ ...['a', 'b', 'c'] }

Avec une fonction comme celle-ci:

function toObject(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}

Votre tableau est déjà plus ou moins juste un objet, mais les tableaux ont un comportement "intéressant" et spécial en ce qui concerne les propriétés nommées entières. Ce qui précède vous donnera un objet simple.

modifier oh aussi vous voudrez peut-être tenir compte des "trous" dans le tableau:

function toObject(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    if (arr[i] !== undefined) rv[i] = arr[i];
  return rv;
}

Dans les runtimes JavaScript modernes, vous pouvez utiliser la .reduce()méthode:

var obj = arr.reduce(function(acc, cur, i) {
  acc[i] = cur;
  return acc;
}, {});

Celui-ci évite également les "trous" dans le tableau, car c'est ainsi que cela .reduce()fonctionne.

Vous pouvez utiliser un accumulateur aka reduce.

['a','b','c'].reduce(function(result, item, index, array) {
  result[index] = item; //a, b, c
  return result;
}, {}) //watch out the empty {}, which is passed as "result"

Passez un objet vide {}comme point de départ; puis "augmentez" cet objet progressivement. A la fin des itérations, resultsera{"0": "a", "1": "b", "2": "c"}

Si votre tableau est un ensemble d'objets de paire clé-valeur:

[{ a: 1},{ b: 2},{ c: 3}].reduce(function(result, item) {
  var key = Object.keys(item)[0]; //first property: a, b, c
  result[key] = item[key];
  return result;
}, {});

produira: {a: 1, b: 2, c: 3}

Par souci d'exhaustivité, reduceRightvous permet d'itérer sur votre tableau dans l'ordre inverse:

[{ a: 1},{ b: 2},{ c: 3}].reduceRight(/* same implementation as above */)

produira: {c:3, b:2, a:1}

Votre accumulateur peut être de n'importe quel type à des fins spécifiques. Par exemple, afin d'échanger la clé et la valeur de votre objet dans un tableau, passez []:

[{ a: 1},{ b: 2},{ c: 3}].reduce(function(result, item, index) {
  var key = Object.keys(item)[0]; //first property: a, b, c
  var value = item[key];
  var obj = {};
  obj[value] = key;
  result.push(obj);
  return result;
}, []); //an empty array

produira: [{1: "a"}, {2: "b"}, {3: "c"}]

Contrairement à map, reducene peut pas être utilisé comme mappage 1-1. Vous avez un contrôle total sur les éléments que vous souhaitez inclure ou exclure. reduceVous permet donc de réaliser ce qui filterfait, ce qui le rend reducetrès polyvalent:

[{ a: 1},{ b: 2},{ c: 3}].reduce(function(result, item, index) {
  if(index !== 0) { //skip the first item
    result.push(item);
  }
  return result;
}, []); //an empty array

produira: [{2: "b"}, {3: "c"}]

Attention : reduceet Object.keyfont partie de ECMA 5th edition; vous devez fournir un polyfill pour les navigateurs qui ne les prennent pas en charge (notamment IE8).

Voir une implémentation par défaut de Mozilla .

Si vous utilisez jquery:

$.extend({}, ['a', 'b', 'c']);

Pour être complet, ECMAScript 2015 (ES6) se propage. Nécessite un transpilateur (Babel) ou un environnement exécutant au moins ES6.

console.log(
   { ...['a', 'b', 'c'] }
)

Je l'écrirais probablement de cette façon (car très rarement je n'aurai pas la bibliothèque underscorejs à portée de main):

var _ = require('underscore');

var a = [ 'a', 'b', 'c' ];
var obj = _.extend({}, a);
console.log(obj);
// prints { '0': 'a', '1': 'b', '2': 'c' }

Voici une méthode O (1) ES2015 juste pour être complète.

var arr = [1, 2, 3, 4, 5]; // array, already an object
Object.setPrototypeOf(arr, Object.prototype); // now no longer an array, still an object

Surpris de ne pas voir -

console.log(
  Object.assign({}, ['a', 'b', 'c'])
)

nous pouvons utiliser Object.assignet array.reducefonctionner pour convertir un tableau en objet.

var arr = [{a:{b:1}},{c:{d:2}}] 
var newObj = arr.reduce((a, b) => Object.assign(a, b), {})

console.log(newObj)

J'ai fini par utiliser l'opérateur de répartition d'objets, car il fait partie de la norme ECMAScript 2015 (ES6).

const array = ['a', 'b', 'c'];
console.log({...array});
// it outputs {0:'a', 1:'b', 2:'c'}

Faites le violon suivant comme exemple.

Object.assign({}, ['one', 'two']); // {0: 'one', 1: 'two'}

Le moyen le plus simple en JavaScript moderne est d'utiliser Object.assign()qui ne fait que copier la clé: la valeur d'un objet à un autre. Dans notre cas, Arrayfait don de propriétés à neuf {}.

Pour ES2016, opérateur réparti pour les objets. Remarque: c'est après ES6 et le transpilateur devra donc être ajusté.

const arr = ['a', 'b', 'c'];
const obj = {...arr}; // -> {0: "a", 1: "b", 2: "c"} 

Cinq ans plus tard, il y a un bon moyen :)

Object.assign a été introduit dans ECMAScript 2015.

Object.assign({}, ['a', 'b', 'c'])
// {'0':'a', '1':'b', '2':'c'}

En utiliser javascript#forEachun peut le faire

var result = {},
    attributes = ['a', 'b','c'];

attributes.forEach(function(prop,index) {
  result[index] = prop;
});

Avec ECMA6:

attributes.forEach((prop,index)=>result[index] = prop);

FWIW, une autre approche récente consiste à utiliser le nouveau Object.fromEntriesavec Object.entriescomme suit:

const arr = ['a','b','c'];
arr[-2] = 'd';
arr.hello = 'e';
arr.length = 17;
const obj = Object.fromEntries(Object.entries(arr));

... qui permet d'éviter de stocker des éléments de tableau épars sous la forme undefinedou nullet préserve les clés non indexées (par exemple, entier non positif / non numérique).

On voudra peut-être ajouter arr.length, cependant, comme cela n'est pas inclus:

obj.length = arr.length;

vous pouvez utiliser l'opérateur de propagation

x = [1,2,3,10]
{...x} // {0:1, 1:2, 2:3, 3:10}

Si vous utilisez ES6, vous pouvez utiliser Object.assign et l'opérateur d'étalement

{ ...['a', 'b', 'c'] }

Si vous avez un tableau imbriqué comme

var arr=[[1,2,3,4]]
Object.assign(...arr.map(d => ({[d[0]]: d[1]})))

Un rapide et sale:

var obj = {},
  arr = ['a','b','c'],
  l = arr.length; 

while( l && (obj[--l] = arr.pop() ) ){};

Rapide et sale # 2:

var i = 0
  , s = {}
  , a = ['A', 'B', 'C'];

while( a[i] ) { s[i] = a[i++] };

Depuis Lodash 3.0.0, vous pouvez utiliser _.toPlainObject

var obj = _.toPlainObject(['a', 'b', 'c']);
console.log(obj);

<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>

Voici une fonction récursive que je viens d'écrire. C'est simple et ça marche bien.

// Convert array to object
var convArrToObj = function(array){
    var thisEleObj = new Object();
    if(typeof array == "object"){
        for(var i in array){
            var thisEle = convArrToObj(array[i]);
            thisEleObj[i] = thisEle;
        }
    }else {
        thisEleObj = array;
    }
    return thisEleObj;
}

Voici un exemple ( jsFiddle ):

var array = new Array();
array.a = 123;
array.b = 234;
array.c = 345;
var array2 = new Array();
array2.a = 321;
array2.b = 432;
array2.c = 543;
var array3 = new Array();
array3.a = 132;
array3.b = 243;
array3.c = 354;
var array4 = new Array();
array4.a = 312;
array4.b = 423;
array4.c = 534;
var array5 = new Array();
array5.a = 112;
array5.b = 223;
array5.c = 334;

array.d = array2;
array4.d = array5;
array3.d = array4;
array.e = array3;


console.log(array);

// Convert array to object
var convArrToObj = function(array){
    var thisEleObj = new Object();
    if(typeof array == "object"){
        for(var i in array){
            var thisEle = convArrToObj(array[i]);
            thisEleObj[i] = thisEle;
        }
    }else {
        thisEleObj = array;
    }
    return thisEleObj;
}
console.log(convArrToObj(array));

Résultats:

.reduce((o,v,i)=>(o[i]=v,o), {})

[docs]

ou plus verbeux

var trAr2Obj = function (arr) {return arr.reduce((o,v,i)=>(o[i]=v,o), {});}

ou

var transposeAr2Obj = arr=>arr.reduce((o,v,i)=>(o[i]=v,o), {})

le plus court avec vanille JS

JSON.stringify([["a", "X"], ["b", "Y"]].reduce((o,v,i)=>{return o[i]=v,o}, {}))
=> "{"0":["a","X"],"1":["b","Y"]}"

un exemple plus complexe

[["a", "X"], ["b", "Y"]].reduce((o,v,i)=>{return o[v[0]]=v.slice(1)[0],o}, {})
=> Object {a: "X", b: "Y"}

encore plus court (en utilisant function(e) {console.log(e); return e;}=== (e)=>(console.log(e),e))

 nodejs
> [[1, 2, 3], [3,4,5]].reduce((o,v,i)=>(o[v[0]]=v.slice(1),o), {})
{ '1': [ 2, 3 ], '3': [ 4, 5 ] }

[/ docs]

Je le ferais simplement avec Array.of(). Array of a la capacité d'utiliser son contexte comme constructeur.

NOTE 2 La fonction of est une méthode d'usine intentionnellement générique; il ne nécessite pas que sa valeur soit le constructeur Array. Par conséquent, il peut être transféré ou hérité par d'autres constructeurs qui peuvent être appelés avec un seul argument numérique.

Nous pouvons donc nous lier Array.of()à une fonction et générer un objet de type tableau.

function dummy(){};
var thingy = Array.of.apply(dummy,[1,2,3,4]);
console.log(thingy);

En utilisant Array.of() on peut même faire un sous-classement de tableau .

Si vous pouvez utiliser Mapou Object.assign, c'est très simple.

Créez un tableau:

const languages = ['css', 'javascript', 'php', 'html'];

Ce qui suit crée un objet avec l'index comme clés:

Object.assign({}, languages)

Répliquez la même chose que ci-dessus avec Maps

Convertit en un objet basé sur un index, {0 : 'css'}etc.

const indexMap = new Map(languages.map((name, i) => [i, name] ));
indexMap.get(1) // javascript

Convertir en un objet basé sur une valeur, {css : 'css is great'}etc.

const valueMap = new Map(languages.map(name => [name, `${name} is great!`] ));
valueMap.get('css') // css is great

Une méthode simple et effrontée de convertir rapidement un tableau d'éléments en un objet

function arrayToObject( srcArray ){
    return  JSON.parse( JSON.stringify( srcArray ) );
}

Puis l'utiliser comme ça ...

var p = [0,2,3,'pork','pie',6];
obj = new arrayToObject( p );
console.log( obj[3], obj[4] )
// expecting `pork pie`

Production:

pork pie

Vérification du type:

typeof obj
"object"

ET les choses ne seraient pas complètes s'il n'y avait pas de méthode prototype

Array.prototype.toObject =function(){
    return  JSON.parse( JSON.stringify( this ) );
}

Utilisation comme:

var q = [0,2,3,'cheese','whizz',6];
obj = q.toObject();
console.log( obj[3], obj[4] )
// expecting `cheese whizz`

Production:

cheese whizz

* REMARQUE: il n'y a pas de routine de nommage, donc si vous voulez avoir des noms spécifiques, vous devrez continuer à utiliser les méthodes existantes ci-dessous.

Méthode plus ancienne

Cela vous permet de générer à partir d'un tableau un objet avec des clés que vous définissez dans l'ordre que vous souhaitez.

Array.prototype.toObject = function(keys){
    var obj = {};
    var tmp = this; // we want the original array intact.
    if(keys.length == this.length){
        var c = this.length-1;
        while( c>=0 ){
            obj[ keys[ c ] ] = tmp[c];
            c--;
        }
    }
    return obj;
};

result = ["cheese","paint",14,8].toObject([0,"onion",4,99]);

console.log(">>> :" + result.onion); affichera "paint", la fonction doit avoir des tableaux de longueur égale ou vous obtenez un objet vide.

Voici une méthode mise à jour

Array.prototype.toObject = function(keys){
    var obj = {};
    if( keys.length == this.length)
        while( keys.length )
            obj[ keys.pop() ] = this[ keys.length ];
    return obj;
};

let i = 0;
let myArray = ["first", "second", "third", "fourth"];

const arrayToObject = (arr) =>
    Object.assign({}, ...arr.map(item => ({[i++]: item})));

console.log(arrayToObject(myArray));

Ou utiliser

myArray = ["first", "second", "third", "fourth"]
console.log({...myArray})

ES5 - Solution:

En utilisant la fonction de prototype de tableau «pousser» et «appliquer», vous pouvez remplir l'objet avec les éléments du tableau.

var arr = ['a','b','c'];
var obj = new Object();
Array.prototype.push.apply(obj, arr);
console.log(obj);    // { '0': 'a', '1': 'b', '2': 'c', length: 3 }
console.log(obj[2]); // c

Plus de navigateur pris en charge et une manière plus flexible de faire cela en utilisant une boucle normale , quelque chose comme:

const arr = ['a', 'b', 'c'],
obj = {};

for (let i=0; i<arr.length; i++) {
   obj[i] = arr[i];
}

Mais la manière moderne pourrait également être d'utiliser l' opérateur de propagation , comme:

{...arr}

Ou attribuer un objet :

Object.assign({}, ['a', 'b', 'c']);

Les deux reviendront :

{0: "a", 1: "b", 2: "c"}

Vous pouvez utiliser une fonction comme celle-ci:

var toObject = function(array) {
    var o = {};
    for (var property in array) {
        if (String(property >>> 0) == property && property >>> 0 != 0xffffffff) {
            o[i] = array[i];
        }
    }
    return o;
};

Celui-ci devrait gérer plus efficacement les tableaux clairsemés.

Voici une solution en coffeescript

arrayToObj = (arr) ->
  obj = {}
  for v,i in arr
    obj[i] = v if v?
  obj