Bagaimana untuk menukar tatasusunan Objek kepada tatasusunan menggunakan JavaScript?

WBOY
Lepaskan: 2023-09-22 11:29:02
ke hadapan
1513 orang telah melayarinya

如何使用 JavaScript 将 Object 数组转换为数组?

Kita boleh menukar tatasusunan Objek kepada tatasusunan JavaScript menggunakan kaedah Object.values(), kaedah Array puch() dan gelung untuk... . Mula-mula, kita gelung melalui setiap objek menggunakan for...of dan kemudian gunakan kaedah Object.values() untuk mengakses nilai objek tunggal. Kemudian gunakan kaedah Array Push() untuk menambah nilai pada tatasusunan. Dalam artikel ini, kami akan membincangkan kaedah ini secara terperinci.

Mari lihat contoh untuk memahami masalahnya.

Anda telah diberikan tatasusunan objek, dan tugasnya adalah untuk menukar tatasusunan objek kepada tatasusunan nilai objek. Berikut adalah contoh perkara yang ingin kita capai.

Diberikan tatasusunan objek -

let carObj = [
   { name: "John", car: "Ford" },
   { name: "Mark", car: "BMW" },
   { name: "Ben", car: "Toyota" }
] 
Salin selepas log masuk

hendaklah ditukar kepada -

let carObj = ["John", "Ford", "Mark", "BMW", "Ben", "Toyota" ] 
Salin selepas log masuk

Terdapat banyak cara untuk mencapai ini. Sebahagian daripadanya ialah -

  • Gunakan untuk...gelung

  • Gunakan kaedah tatasusunan.peta

Gunakan untuk...gelung

for...of loop digunakan untuk mengulang nilai tatasusunan atau sebarang objek boleh lelaran. Untuk menukar tatasusunan objek kepada tatasusunan menggunakan gelung for...of, kami menggunakan langkah berikut.

Langkah

  • Buat ruang kosong untuk menyimpan nilai hasil.

  • Gunakan untuk...untuk menggelung melalui tatasusunan objek

  • Kita tahu bahawa item tatasusunan adalah objek yang nilainya kita inginkan.

  • Tolak nilai objek semasa ke dalam tatasusunan kosong melalui kaedah tatasusunan.push dan Object.values().

Contoh

Dalam contoh ini, kami mempunyai pelbagai objek. Objek ini mengandungi nama dan mod kereta. Kami mengekstrak nilai ini dan menetapkannya ke dalam tatasusunan tunggal menggunakan gelung for..of.

<html>
<head>
   <title>How to convert Object’s array to an array using JavaScript?</title>
</head>
<body>
   <h3 id="demo">Converting Object’s array to an array using for...of loop</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" },
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      
      // Initialize an empty array
      let arr = [];
      
      // Loop through the car object
      for (i of carObj) {
         
         // Push the values of every object into arr
         arr.push(...Object.values(i))
      }
      
      // Print the arr
      document.write("Final Array: " + arr) 
   </script>
</body>
</html>
Salin selepas log masuk

Gunakan kaedah Array.map()

Kaedah Array.map() memanggil fungsi pada setiap elemen tatasusunan dan mengembalikan tatasusunan baharu. Untuk menukar tatasusunan objek kepada tatasusunan menggunakan kaedah Array.map(), kami menggunakan langkah berikut.

  • Gunakan kaedah peta pada tatasusunan objek.

  • Mengembalikan nilai kunci yang anda ingin ekstrak selepas setiap lelaran.

  • Anda akan mendapat tatasusunan semua nilai untuk kunci tertentu.

Contoh

Dalam contoh ini, kami mempunyai pelbagai objek. Objek ini mengandungi nama dan mod kereta. Kami mengekstrak semua kereta ke dalam tatasusunan berasingan dan semua nama ke dalam tatasusunan berasingan.

<html>
<head>
   <title>Example- How to convert Object's array to an array using JavaScript</title>
</head>
<body>
   <h3 id="demo">Converting Object's array to an array using Array.map() method</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" }, 
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      let nameArr = carObj.map((item) => item.name)
      let carArr = carObj.map((item) => item.car)
      
      // Print the Arrays
      document.write("Names Array : " + nameArr + "<br>")
      document.write("Cars Array : " + carArr)
   </script>
</body>
</html>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menukar tatasusunan Objek kepada tatasusunan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan