Cara mengonversi Objek {} ke Array [] dari pasangan nilai kunci dalam JavaScript

244

Saya ingin mengonversi objek seperti ini:

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

ke dalam array pasangan kunci-nilai seperti ini:

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

Bagaimana saya bisa mengonversi Objek ke Array pasangan nilai kunci dalam JavaScript?

Soptareanu Alex
sumber

Jawaban:

430

Anda dapat menggunakan Object.keys()dan map()melakukan ini

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

Nenad Vracar
sumber
7
@blvckasvp Apakah Anda menggunakan angka sebagai kunci Anda? Jika tidak, ketika mencoba mengubah kunci Anda ke nomor, itu akan gagal dan kembali NaN. Jika Anda ingin menggunakan string sebagai kunci Anda, ubah pengembalian dari [Number(key), obj[key]]ke [key, obj[key]]atau gunakan Object.entriessebagai @Pila yang disarankan dalam jawaban mereka
scottbot95
123

Cara terbaik adalah melakukan:

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

Panggilan entries, seperti yang ditunjukkan di sini, akan mengembalikan [key, value]pasangan, seperti yang diminta penanya.

Atau, Anda bisa menelepon Object.values(obj), yang hanya akan mengembalikan nilai.

Pila
sumber
6
Pengembang yang terhormat, silakan periksa tabel kompatibilitas ECMA sebelum mengadopsi fungsi-fungsi bagus yang hanya kompatibel dengan browser yang dirilis beberapa menit yang lalu.
andreszs
8
@andreszs Lihat Dapatkah Saya Menggunakan tabel, jika Anda tidak keberatan menjatuhkan dukungan IE (dan pada tahun 2019, saya berharap untuk kewarasan Anda bahwa Anda benar-benar tidak) maka Anda cukup baik untuk pergi. FF 47 dari Juni 2016 dan Chrome 54 dari Oktober tahun yang sama, Ujung 14 Agustus. Tidak persis beberapa menit yang lalu.
Kyll
FYI: Object.entries akan mengembalikan [key, value], tetapi key akan berupa string, nilainya akan berbeda.
SHAHBAZ
62

Object.entries()mengembalikan array yang elemen-elemennya adalah array yang sesuai dengan [key, value]pasangan properti enumerable yang ditemukan langsung object. Urutan properti adalah sama dengan yang diberikan dengan mengulangi nilai properti objek secara manual.

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

The Object.entrieskembali fungsi hampir output yang tepat yang Anda minta, kecuali tombol yang string bukan angka.

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

Jika Anda membutuhkan kunci untuk menjadi angka, Anda bisa memetakan hasilnya ke array baru dengan fungsi panggilan balik yang menggantikan kunci di setiap pasangan dengan nomor yang dipaksakan darinya.

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

Saya menggunakan fungsi panah dan Object.assignuntuk callback peta dalam contoh di atas sehingga saya dapat menyimpannya dalam satu instruksi dengan memanfaatkan fakta yang Object.assignmengembalikan objek yang ditugaskan, dan nilai pengembalian fungsi panah instruksi tunggal adalah hasil dari instruksi.

Ini setara dengan:

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

Seperti yang disebutkan oleh @TravisClarke di komentar, fungsi peta dapat disingkat menjadi:

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

Namun, itu akan membuat array baru untuk setiap pasangan nilai kunci, alih-alih mengubah array yang ada di tempat, karenanya menggandakan jumlah array pasangan nilai kunci yang dibuat. Meskipun larik entri asli masih dapat diakses, entri dan tidak akan menjadi sampah yang dikumpulkan.

Sekarang, meskipun menggunakan metode in-place kami masih menggunakan dua array yang menahan pasangan nilai kunci (input dan output array), jumlah total array hanya berubah satu. Input dan output array sebenarnya tidak diisi dengan array, melainkan referensi ke array dan referensi tersebut memakan jumlah ruang yang dapat diabaikan.

  • Memodifikasi setiap pasangan nilai kunci di tempat menghasilkan jumlah pertumbuhan memori yang dapat diabaikan, tetapi mengharuskan mengetik beberapa karakter lagi.
  • Membuat array baru untuk setiap pasangan nilai kunci menghasilkan dua kali lipat jumlah memori yang diperlukan, tetapi membutuhkan mengetik beberapa karakter lebih sedikit.

Anda bisa melangkah lebih jauh dan menghilangkan pertumbuhan dengan memodifikasi array entri di tempat alih-alih memetakannya ke array baru:

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


sumber
1
Saya suka pendekatan fungsional. Sebagai alternatif yang lebih pendek:Object.entries(obj).map(e => [+e[0], e[1]]);
Travis Clarke
21

Untuk merangkum beberapa jawaban ini sekarang pada 2018, di mana ES6 adalah standar.

Dimulai dengan objek:

let const={"1":9,"2":8,"3":7,"4":6,"5":5,"6":4,"7":3,"8":2,"9":1,"10":0,"12":5};
  • Hanya secara membabi buta mendapatkan nilai-nilai pada array, tidak peduli dengan kunci:

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]

  • Sederhana mendapatkan pasangan pada array:

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]]

  • Sama seperti sebelumnya, tetapi dengan tombol angka pada setiap pasangan:

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]]

  • Menggunakan properti objek sebagai kunci untuk array baru (bisa membuat array jarang):

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]

Metode terakhir ini, bisa juga mengatur ulang susunan array tergantung nilai kunci. Terkadang ini bisa menjadi perilaku yang diinginkan (terkadang tidak). Tetapi keuntungannya sekarang adalah bahwa nilai-nilai diindeks pada slot array yang benar, penting dan sepele untuk melakukan pencarian di atasnya.

  • Peta bukannya Array

Terakhir (bukan bagian dari pertanyaan awal, tetapi untuk kelengkapan), jika Anda perlu mencari dengan mudah menggunakan kunci atau nilainya, tetapi Anda tidak ingin array jarang, tidak ada duplikat dan pemesanan ulang tanpa perlu mengkonversi ke kunci numerik ( bahkan dapat mengakses kunci yang sangat kompleks), maka array (atau objek) bukanlah yang Anda butuhkan. Saya akan merekomendasikan Mapsebagai gantinya:

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
CarlosH.
sumber
2
Poin keempat dan selanjutnya sama sekali tidak relevan dengan pertanyaan, dan sisa jawaban Anda hanya merangkum tiga jawaban teratas di sini. Jawaban ini tidak membawa apa pun ke diskusi yang belum ada di sini atau tidak sepenuhnya tidak relevan.
Ya, sebagai status baris pertama, ini adalah ringkasan jawaban, kemudian perbarui untuk menggunakan teknik ES6 modern alih-alih fungsi pukulan penuh. Jawaban keempat berguna ketika Anda memindahkan array JSON dari bahasa yang mendukung array asosiatif (misalnya PHP).
Carlos.
Semua metode yang disediakan di sini sudah disediakan dalam bentuk sederhana di dua dari tiga jawaban teratas, mereka tidak dalam fungsi jadi saya tidak tahu apa yang Anda lakukan di sana. Sejauh 4, seperti yang saya katakan itu sama sekali tidak relevan dengan pertanyaan yang diajukan. Mungkin relevan dengan pertanyaan yang berbeda, tetapi bukan yang ini. Apapun, JSON adalah JSON apakah itu dibuat menggunakan PHP, JavaScript, atau Haskell.
18

Namun solusi lain jika Object.entriestidak akan berhasil untuk Anda.

const obj = {
      '1': 29,
      '2': 42
    };
const arr = Array.from(Object.keys(obj), k=>[`${k}`, obj[k]]);
console.log(arr);

bigh_29
sumber
1
Ini berhasil untuk saya. Saya mengalami masalah ketika mengimpor JSON menambahkan indeks yang membuatnya tidak mungkin menggunakan Angulars ngFor loop. Ini menghapus indeks sambil mempertahankan struktur.
RAC
@RAC +1 untuk menggunakan "indeks" alih-alih "indeks". Tradisi Inggris awal, kuno (mis. Sewenang-wenang dan tidak berarti)!
Venryx
12

Dalam 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);

biola

Nageshwar Reddy Pandem
sumber
Tidak yakin mengapa ini dibatalkan, bekerja dengan sangat baik
sMyles
1
Saya tidak downvote, tetapi perhatikan bahwa .map((value)=>(value))porsinya tidak berarti - itu hanya mengembalikan entri-array yang persis sama dengan yang diperoleh dari Object.entries(obj)panggilan.
Venryx
8

Gunakan Object.keysdan Array#mapmetode.

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

Pranav C Balan
sumber
7

Gunakan Object.entriesuntuk mendapatkan setiap elemen Objek dalam key & valueformat, lalu mapmelalui mereka seperti ini:

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

Tetapi, jika Anda yakin bahwa kunci akan dalam urutan progresif Anda dapat menggunakan Object.valuesdan Array#mapmelakukan sesuatu seperti ini:

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

BlackBeard
sumber
5

Jika Anda menggunakan lodash, bisa sesederhana ini:

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

Dengan lodash, selain jawaban yang diberikan di atas, Anda juga dapat memiliki kunci di larik keluaran.

Tanpa kunci objek di larik output

untuk:

const array = _.values(obj);

Jika obj adalah sebagai berikut:

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

Maka array akan menjadi:

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

Dengan kunci objek di larik output

Jika Anda menulis sebagai gantinya ('genre' adalah string yang Anda pilih):

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

Kamu akan mendapatkan:

[ 
  { id: 1, title: aaaa , genre: art”}, 
  { id: 22, title: 7777”, genre: fiction }
]
Yossi
sumber
4

Saya akan menyarankan solusi paling sederhana ini untuk digunakan Object.entries()

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.entries(obj)

console.log(result);

Tumpukan besi
sumber
1

Anda dapat menggunakan Object.values([]), Anda mungkin memerlukan polyfill ini jika Anda belum:

const objectToValuesPolyfill = (object) => {
  return Object.keys(object).map(key => object[key]);
};
Object.values = Object.values || objectToValuesPolyfill;

https://stackoverflow.com/a/54822153/846348

Maka Anda bisa melakukan:

var object = {1: 'hello', 2: 'world'};
var array = Object.values(object);

Hanya ingat bahwa array dalam js hanya dapat menggunakan kunci numerik jadi jika Anda menggunakan sesuatu yang lain dalam objek maka mereka akan menjadi `0,1,2 ... x``

Berguna untuk menghapus duplikat misalnya jika Anda memiliki kunci unik.

var obj = {};
object[uniqueKey] = '...';
OZZIE
sumber
0

Gunakan untuk dalam

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));
wkyniston
sumber
0

Konversi objek rekursif ke array

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;
}
Marina Lebedeva
sumber
0

Kami dapat mengubah jenis Nomor ke String untuk Kunci seperti di bawah ini:

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

Nagnath Mungade
sumber
0

Ini solusi saya, saya punya masalah yang sama dan sepertinya solusi ini cocok untuk saya.

yourObj = [].concat(yourObj);
Qui-Gon Jinn
sumber
0

Ini adalah implementasi barebone sederhana saya:

let 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 objectToArray = obj => {
      let sol = [];
      for (key in obj) {
        sol.push([key, obj[key]]);
      }
      return sol;
    };

objectToArray(obj)
Ketan Ramteke
sumber
0

Solusi sederhana

`

var result = Object.keys(records).map(function (value) {
         return { [value]: records[value] };
});
console.log(result);

Folorunso
sumber
-1

Anda dapat menggunakan _.castArray (obj) .

contoh: _.castArray({ 'a': 1 }); // => [{ 'a': 1 }]

Chopper Lee
sumber