web-dev-qa-db-ja.com

JavaScriptでObject {}をキーと値のペアのArray []に変換する方法

私はこのようなオブジェクトを変換したいです。

{"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}

このようなキーと値のペアの配列になります。

[[1,5],[2,7],[3,0],[4,0]...].

JavaScriptでオブジェクトをキーと値のペアの配列に変換する方法を教えてください。

javascriptarraystype-conversion
143
Soptareanu Alex

これを行うには、 Object.keys() および map() を使用できます。

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}
var result = Object.keys(obj).map(function(key) {
  return [Number(key), obj[key]];
});

console.log(result);
253
Nenad Vracar

最善の方法は次のとおりです。

var obj ={"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10"‌​:0,"11":0,"12":0} 
Object.entries(obj);

ここに示されているように、entriesを呼び出すと、質問者が要求したとおりに[key, value]の組が返されます。

あるいは、Object.values(obj)を呼び出すこともできます。これは値のみを返します。

72
Pila

Object.entries()は、objectのすぐ上にある列挙可能なプロパティ[key, value]のペアに対応する配列を要素とする配列を返します。プロパティの順序は、オブジェクトのプロパティ値を手動でループ処理した場合と同じです。

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Description

Object.entries関数は、キーが数値ではなく文字列であることを除いて、要求しているとおりの正確な出力を返します。

const obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

console.log(Object.entries(obj));

キーを数値にする必要がある場合は、各ペアのキーを強制的に代入した番号に置き換えるコールバック関数を使用して、結果を新しい配列にマップできます。

const obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

const toNumericPairs = input => {
    const entries = Object.entries(input);
    return entries.map(entry => Object.assign(entry, { 0: +entry[0] }));
}

console.log(toNumericPairs(obj));

Object.assignが割り当てられているオブジェクトを返すという事実を利用することでそれを1つの命令で保つことができるように、私は上の例でmapコールバックのためにarrow functionとObject.assignを使います。命令。

これは以下と同等です。

entry => {
    entry[0] = +entry[0];
    return entry;
}

コメントで@TravisClarkeが述べたように、map関数は以下のように短くすることができます。

entry => [ +entry[0], entry[1] ]

ただし、既存の配列を変更する代わりに、キーと値のペアごとに新しい配列が作成されるため、作成されるキーと値のペアの配列の数が2倍になります。元のエントリ配列はまだアクセス可能ですが、それとそのエントリはガベージコレクションされません。

これで、インプレース方式を使用してもキーと値のペアを保持する2つの配列（入力配列と出力配列）が使用される場合でも、配列の総数は1つだけ変化します。入力と出力の配列は実際には配列で埋められているのではなく、配列への参照とそれらの参照はメモリ内のごくわずかなスペースを占めます。

  • 各キーと値のペアをインプレースで変更すると、ごくわずかなメモリの増加になりますが、さらに数文字入力する必要があります。
  • キーと値のペアごとに新しい配列を作成すると、必要なメモリ量が2倍になりますが、入力する文字数が少なくなります。

エントリ配列を新しい配列にマッピングする代わりにその場で変更することで、さらに一歩進んで成長を完全に排除することができます。

const obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

const toNumericPairs = input => {
  const entries = Object.entries(obj);
  entries.forEach(entry => entry[0] = +entry[0]);
  return entries;
}

console.log(toNumericPairs(obj));
44
Tiny Giant

Object.valuesがうまくいかない場合に使用できるもう1つのバリエーション。

var obj = {
  foo: 29,
  bar: 42
};
var arr = Array.from(Object.keys(obj), k=>obj[k]);
13
bigh_29

Object.keysおよびArray#mapメソッドを使用してください。

var obj = {
  "1": 5,
  "2": 7,
  "3": 0,
  "4": 0,
  "5": 0,
  "6": 0,
  "7": 0,
  "8": 0,
  "9": 0,
  "10": 0,
  "11": 0,
  "12": 0
};
// get all object property names
var res = Object.keys(obj)
  // iterate over them and generate the array
  .map(function(k) {
    // generate the array element 
    return [+k, obj[k]];
  });

console.log(res);
8
Pranav C Balan

Object.entries を使用してObjectの各要素をkey & value形式で取得し、次に map を使用して次のようにします。

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}

var res = Object.entries(obj).map(([k, v]) => ([Number(k), v]));

console.log(res);

しかし、キーが プログレッシブ順序 になることが確実な場合は、 Object.values および Array#map を使用して、次のようにすることができます。

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}; 

                        // idx is the index, you can use any logic to increment it (starts from 0)
let result = Object.values(obj).map((e, idx) => ([++idx, e]));

console.log(result);
6
BlackBeard

ES6が標準である2018年に今これらの答えのいくつかを要約する。

オブジェクトから始めます。

let const={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
  • 盲目的に配列の値を取得するだけで、キーを気にする必要はありません。
const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(Object.values(obj));
//[9,8,7,6,5,4,3,2,1,0,5]
  • 単純に配列のペアを取得する：
const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(Object.entries(obj));
//[["1",9],["2",8],["3",7],["4",6],["5",5],["6",4],["7",3],["8",2],["9",1],["10",0],["12",5]]
  • 前と同じですが、各ペアに数字キーがあります。
const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(Object.entries(obj).map(([k,v])=>[+k,v]));
//[[1,9],[2,8],[3,7],[4,6],[5,5],[6,4],[7,3],[8,2],[9,1],[10,0],[12,5]]
  • Objectプロパティを新しい配列のキーとして使用する（スパース配列を作成する可能性があります）。
const obj={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
console.log(Object.entries(obj).reduce((ini,[k,v])=>(ini[k]=v,ini),[]));
//[undefined,9,8,7,6,5,4,3,2,1,0,undefined,5]

この最後の方法では、キーの値に応じて配列の順序を再編成することもできます。時にはこれが望ましい動作かもしれません（時にはそうではありません）。しかし現在の利点は、値が正しい配列スロットにインデックス付けされていることです。これは、検索を実行するために不可欠かつ自明のことです。

  • 配列ではなくマップ

最後に（元の質問の一部ではありませんが完全を期して）、キーや値を使って簡単に検索する必要があるが、数値キーに変換する必要なしに重複配列や並べ替えを必要としない非常に複雑なキーにもアクセスできます）、その場合配列（またはオブジェクト）は必要なものではありません。代わりにMapをお勧めします。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

let r=new Map(Object.entries(obj));
r.get("4"); //6
r.has(8); //true
5
Carlos H.

あなたがlodashを使っているなら、これはこれと同じくらい簡単かもしれません：

var arr = _.values(obj);
4
Adam Boostani

Ecmascript 6では、

var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0};

var res = Object.entries(obj);

console.log(res);

フィドル

2
Nageshwar Reddy

Setを使用したES6（ES2015）の実装

Array.from（）またはSpread構文のいずれかを使用できます

Array.from（）の例

const names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
const uniqueNames = Array.from(new Set(names));
console.log(uniqueNames);

スプレッド構文の例

const names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
const uniqueNames = [...new Set(names)];
console.log(uniqueNames);
1
Victor ifeanyi

Lodashでは、上記の回答に加えて、出力配列にキーを含めることもできます。

出力配列にオブジェクトキーがない

にとって：

const array = _.values(obj);

Objが以下の場合

{ “art”: { id: 1,  title: “aaaa” }, “fiction”: { id: 22,  title: “7777”} }

配列は次のようになります。

[ { id: 1, title: “aaaa” }, { id: 22, title: “7777” } ]

出力配列内のオブジェクトキーを使って

あなたが代わりに書くならば（ 'title'はあなたが選ぶ文字列です）：

const array= _.map(obj, (val, id) => {
    return { ...val, title: key };
  });

あなたは得るでしょう：

[ 
  { id: 1, title: “aaaa” , title: “art”}, 
  { id: 22, title: “7777”, title: “fiction” }
]
0
Yossi

for inを使用します

var obj = { "10":5, "2":7, "3":0, "4":0, "5":0, "6":0, "7":0,
            "8":0, "9":0, "10":0, "11":0, "12":0 };

var objectToArray = function(obj) {
    var _arr = [];

    for (var key in obj) {
        _arr.Push([key, obj[key]]);
    }
    return _arr;
}

console.log(objectToArray(obj));
0
wkyniston

以下のように、キーの数値を文字列型に変更できます。

`var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}
var result = Object.keys(obj).map(function(key) {
  return [String(key), obj[key]];
});

console.log(result);`
0
Nagnath Mungade

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

function is_object(mixed_var) {
    if (mixed_var instanceof Array) {
        return false;
    } else {
        return (mixed_var !== null) && (typeof( mixed_var ) == 'object');
    }
}


function objectToArray(obj) {
    var array = [], tempObject;
    for (var key in obj) {

        tempObject = obj[key];

        if (is_object(obj[key])) {
            tempObject = objectToArray(obj[key]);
        }
        array[key] = tempObject;
    }
    return array;
}
0
Marina Lebedeva