web-dev-qa-db-ja.com

配列をオブジェクトに変換

変換するための最良の方法は何ですか:

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

に:

{
  0: 'a',
  1: 'b',
  2: 'c'
}
374
David Hellsing

ECMAScriptの6は紹介しやすいpolyfillable Object.assign

Object.assign()メソッドは、列挙可能なすべての独自プロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。ターゲットオブジェクトを返します。

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

配列の独自のlengthプロパティは列挙できないためコピーされません。

また、ES6 スプレッド構文 を使用しても同じ結果が得られます。

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

このような機能では:

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

あなたの配列はすでに多かれ少なかれ単なるオブジェクトですが、整数の名前のプロパティに関して、配列は「おもしろい」特別な振る舞いをします。上記は普通のオブジェクトをあなたに与えるでしょう。

編集 ああ、あなたも配列の "穴"を考慮する必要があります:

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

最近のJavaScriptランタイムでは、.reduce()メソッドを使うことができます。

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

それは.reduce()が機能する方法ですので、それはまた、配列内の "穴"を避けることができます。

436
Pointy

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"

開始点として空のオブジェクト{}を渡します。その後、そのオブジェクトを徐々に「増強」します。反復の終わりに、result{"0": "a", "1": "b", "2": "c"}になります。

配列が一連のキーと値のペアのオブジェクトの場合

[{ 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;
}, {});

生成されます:{a: 1, b: 2, c: 3}

完全を期すために、reduceRightを使うと配列を逆の順序で繰り返すことができます。

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

生成されます:{c:3, b:2, a:1}

あなたのアキュムレータはあなたの特定の目的のためにどんなタイプでもありえます。たとえば、配列内のオブジェクトのキーと値を交換するには、[]を渡します。

[{ 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

生成されます:[{1: "a"}, {2: "b"}, {3: "c"}]

mapとは異なり、reduceは1-1マッピングとしては使用できません。含めるアイテムまたは除外するアイテムを完全に制御できます。したがって、reduceを使用すると、filterの機能を実現できます。これにより、reduceは非常に用途が広くなります。

[{ 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

生成されます:[{2: "b"}, {3: "c"}]

注意 reduceObject.keyECMA 5th editionの一部です。あなたはそれらをサポートしていないブラウザ(特にIE8)にはpolyfillを提供するべきです。

Mozilla によるデフォルトの実装を参照してください。

228
roland

あなたがjqueryを使っているならば:

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

完全を期すために、ECMAScript 2015(ES6)が普及しています。 transpiler(Babel)か、少なくともES6を実行している環境のどちらかが必要です。

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

私はたぶんこのようにそれを書くでしょう(非常にまれに私は手元にunderscorejsライブラリを持っていないでしょうから):

var _ = require('underscore');

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

完全を期すため、O(1) ES2015メソッドを示します。

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

見ないで驚いた -

Object.assign({}, your_array)
21
Wylliam Judd

Object.assignおよびarray.reduce関数を使用して、配列をオブジェクトに変換できます。

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

console.log(newObj)
15
KARTHIKEYAN.A
Object.assign({}, ['one', 'two']); // {0: 'one', 1: 'two'}

現代のJavaScriptで簡単な方法は、あるオブジェクトから別のオブジェクトにkey:valueをコピーすること以外何もしないObject.assign()を使うことです。私たちの場合、Arrayは新しい{}にプロパティを寄付します。

15
Appeiron

ECMAScript 2015(ES6)規格の一部であるため、私はオブジェクト拡散演算子を使用しました。

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

例として次のように フィドル を作りました。

14
locropulenton

5年後、良い方法があります:)

Object.assign はECMAScript 2015で導入されました。

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

あなたはスプレッド演算子を使用することができます

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

ES6を使用している場合は、Object.assignとspread演算子を使用できます。

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

配列を入れ子にした場合

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

javascript#forEach oneを使うとこれができます

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

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

ECMA6の場合:

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

早くて汚いもの:

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

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

さて、もう一つの最近のアプローチは、新しいObject.fromEntriesObject.entriesを次のように使うことです。

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

...これは、疎な配列項目をundefinedまたはnullとして格納することを回避し、インデックスではない(例:非正整数/非数値)キーを保存します。

ただし、arr.lengthを追加したい場合があります。これは含まれていません。

obj.length = arr.length;
4
Brett Zamir

ES6構文を使用する あなたは次のようなことをするかもしれません:

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

Lodash 3.0.0以降では _.toPlainObject を使用できます。

var obj = _.toPlainObject(['a', 'b', 'c']);
console.log(obj);
<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>
3
acontell

早くて汚い#2:

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

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

私はこれを単にArray.of()で行います。 の配列には、そのコンテキストをコンストラクタとして使用する機能があります。

注2 of関数は意図的に一般的なファクトリメソッドです。この値がArrayコンストラクタである必要はありません。そのため、単一の数値引数で呼び出すことができる他のコンストラクタに転送したり継承したりできます。

それでArray.of()を関数に束縛してobjectのような配列を生成することができます。

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

Array.of()を利用することで、配列のサブクラス化を行うことさえできます

3
Redu

これが今書いた再帰関数です。それは簡単でうまくいきます。

// 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;
}

これが例です( 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));

結果: Recursive Array to Object

2
JVE999

これにより、配列から自分が定義した順序でキーを定義したオブジェクトを生成することができます。

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);は "Paint"を出力します、関数は等しい長さの配列を持たなければなりません、さもなければ空のオブジェクトを得ます。

これが更新された方法です。

Array.prototype.toObject = function(keys){
    var obj = {};
    if( keys.length == this.length)
        while( keys.length )
            obj[ keys.pop() ] = this[ keys.length ];
    return obj;
};
2
Mark Giblin
.reduce((o,v,i)=>(o[i]=v,o), {})

[docs]

より冗長

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

または

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

バニラJSと最短のもの

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

もう少し複雑な例

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

さらに短く(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]

2
test30

MapObject.assignを使えれば、とても簡単です。

配列を作成します。

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

以下は、インデックスをキーとして持つオブジェクトを作成します。

Object.assign({}, languages)

マップで上記と同じものを複製する

インデックスベースのオブジェクトに変換します{0 : 'css'} etc ...

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

値ベースのオブジェクトに変換する{css : 'css is great'} etc ...

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

あなたはこのような関数を使うことができます:

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;
};

これはスパース配列をより効率的に処理するはずです。

1
Pablo Cabrera

これがコーヒースクリプトの解決策です。

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

ES5 - 解決策:

配列 プロトタイプ関数 'Push' および 'apply' を使用すると、オブジェクトに配列要素を設定できます。

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
1
SridharKritha
let i = 0;
let myArray = ["first", "second", "third", "fourth"];

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

console.log(arrayToObject(myArray));

または使用

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

直接関係はありませんが、ネストされたオブジェクトをマージするための単一のライナーを探しています。

const nodes = {
    node1: {
        interfaces: {if1: {}, if2: {}}
    },
    node2: {
        interfaces: {if3: {}, if4: {}}
    },
    node3: {
        interfaces: {if5: {}, if6: {}}
    },
}

解決策は、reduceとオブジェクトの広がりを組み合わせて使用​​することです。

const allInterfaces = nodes => Object.keys(nodes).reduce((res, key) => ({...res, ...nodes[key].interfaces}), {})
1
Adnan Y

Angularjsを使用している場合、angular.extendを使用できます。これはjqueryの$ .extendと同じ効果です。

var newObj = {};
angular.extend(newObj, ['a','b','c']);
1
Vicruz

私はこの問題に何度も直面し、できるだけ一般的な関数を書くことにしました。見て、何かを自由に変更してください。

function typeOf(obj) {
    if ( typeof(obj) == 'object' ) {
        if (obj.length)
            return 'array';
        else
            return 'object';
    } else
    return typeof(obj);
}

function objToArray(obj, ignoreKeys) {
    var arr = [];
    if (typeOf(obj) == 'object') {
        for (var key in obj) {
            if (typeOf(obj[key]) == 'object') {
                if (ignoreKeys)
                    arr.Push(objToArray(obj[key],ignoreKeys));
                else
                    arr.Push([key,objToArray(obj[key])]);
            }
            else
                arr.Push(obj[key]);
        }
    }else if (typeOf(obj) == 'array') {
        for (var key=0;key<obj.length;key++) {
            if (typeOf(obj[key]) == 'object')
                arr.Push(objToArray(obj[key]));
            else
                arr.Push(obj[key]);
        }
    }
    return arr;
}
0

JavaScript lodashライブラリを使用してください。変換を行うことができる簡単な方法 _.mapKeys(object, [iteratee=_.identity]) があります。

0
ugwu jude

これにはアンダースコアを使用しますが、それが利用できない場合は、空のオブジェクトの初期値{}を指定してreduceを使用します。

>>> ['a', 'b', 'c'].reduce(function(p, c, i) {p[i] = c; return p}, {})
Object { 0="a", 1="b", 2="c"}

今日のほとんどのブラウザではreduceが広く利用可能になるはずです。 _ mdn _ を参照してください。

0
Meitham

より多くのブラウザが、通常のloopを使用する方法をサポートしています:

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

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

しかし、現代的な方法はspread operatorを使用することもできます:

{...arr}

またはObject assign

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

両方ともreturn

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

Javascript reduceを使うのは簡単です:

["a", "b", "c", "d"].reduce(function(previousValue, currentValue, index) { 
   previousValue[index] = currentValue; 
   return previousValue;
}, 
{}
);

Array.prototype.reduce()、 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce をご覧ください。

0
Ping.Goblue

初期配列で、配列の一意の要素となるキーを持つオブジェクトに変換されます。キーの値は、特定のキーが繰り返される回数になります。

var jsTechs = ['angular', 'react', 'ember', 'vanilaJS', 'ember', 'angular', 'react', 'ember', 'vanilaJS', 'angular', 'react', 'ember', 'vanilaJS', 'ember', 'angular', 'react', 'ember', 'vanilaJS', 'ember', 'angular', 'react', 'ember', 'vanilaJS', 'ember', 'react', 'react', 'vanilaJS', 'react', 'vanilaJS', 'vanilaJS']

var initialValue = {
  Java : 4
}

var reducerFunc = function reducerFunc (initObj, jsLib) {
  if (!initObj[jsLib]) {
    initObj[jsLib] = 1
  } else {
    initObj[jsLib] += 1
  }
  return initObj
}
var finalResult = jsTechs.reduce(reducerFunc, initialValue)
console.log(finalResult)
0
bvmCoder

以下のメソッドは、特定のキーを使って配列をオブジェクトに変換します。

    /**
     * Converts array to object
     * @param  {Array} array
     * @param  {string} key (optional)
     */
    Array.prototype.ArrayToObject = function(key) {
       const array = this;
       const obj = {};

       array.forEach((element, index) => {
           if(!key) {
              obj[index] = element;
           } else if ((element && typeof element == 'object' && element[key])) {
              obj[element[key]] = element;
           }
       });
    return obj;
    }

元の場合 -

[{name: 'test'}、{name: 'test1'}]。ArrayToObject( 'name');

与えるだろう

{test: {name: 'test'}, test1: {name: 'test1'}}

そして、incaseキーはメソッドの引数として提供されていません

i.e. [{name: 'test'}, {name: 'test1'}].ArrayToObject();

与えるだろう

{0: {name: 'test'}, 1: {name: 'test1'}}
0
shubhamkes

これを行う最も簡単な方法は次のとおりです。

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

function ConvertArr(arr) { 
 if (typeof(arr) === 'array') {
 Object.assign(obj, arr);
}

この方法は配列の場合にのみ実行されますが、letグローバルオブジェクト変数を使用してもしなくても実行できます。letを使用しないで実行する場合は、Object.assign({}、arr)を実行します。

0
Daniel Snell

あなたがonelinersが好きで、IE8がもう問題ではない場合(それがあるはずのように)

['a','b','c'].reduce((m,e,i) => Object.assign(m, {[i]: e}), {});

ブラウザコンソールで試してみてください

これはより冗長になります。

['a','b','c'].reduce(function(memo,Elm,idx) {
    return Object.assign(memo, {[idx]: Elm});
}, {});

しかしそれでもIE8は除外されます。 IE8が必須の場合は、次のようにlodash/underscoreを使用できます。

_.reduce(['a','b','c'], function(memo,Elm,idx) {
    return Object.assign(memo, {[idx]: Elm});
}, {})
0