Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat tatasusunan yang mengandungi objek separa daripada tatasusunan lain dalam JavaScript?

Bagaimana untuk membuat tatasusunan yang mengandungi objek separa daripada tatasusunan lain dalam JavaScript?

WBOYke hadapan: 2023-08-29 10:01:02781semak imbas

Array ialah salah satu jenis data yang paling biasa digunakan dalam JavaScript. Ia digunakan untuk menyimpan set data dan membenarkan capaian dan manipulasi data yang cekap. Tatasusunan boleh mengandungi sebarang jenis data, termasuk nilai primitif, objek, dan juga tatasusunan lain.

Teknik mencipta tatasusunan objek separa daripada tatasusunan ialah teknik yang berharga apabila bekerja dengan set data yang kompleks. Objek separa mengandungi hanya subset data dalam tatasusunan asal, membolehkan kami menumpukan pada set data tertentu. Ini amat berguna apabila bekerja dengan set data yang besar, kerana ia memudahkan untuk memproses hanya data yang diperlukan.

Anda boleh mencipta tatasusunan objek separa daripada tatasusunan lain dalam JavaScript menggunakan kaedah map(). Kaedah map() membolehkan anda mengulangi tatasusunan dan mencipta tatasusunan baharu, yang hasilnya memanggil fungsi yang disediakan pada setiap elemen dalam tatasusunan asal.

Tatabahasa

Sintaks untuk mencipta tatasusunan objek separa daripada tatasusunan lain dalam JavaScript adalah seperti berikut -

let originalArray = [
   { property1: value1, property2: value2, ... },
   { property1: value1, property2: value2, ... },
   ...
];

let partialObjects = originalArray.map(item => {
   return { partialProperty1: item.property1, partialProperty2: item.property2 };
});

Dalam sintaks ini, originalArray ialah nama tatasusunan asal yang mengandungi objek dari mana objek separa itu akan dibuat. Panggil kaedah peta pada tatasusunan ini, menghantar fungsi sebagai hujah. Fungsi ini dipanggil pada setiap elemen tatasusunan asal dan digunakan untuk mencipta tatasusunan baru objek separa.

Fungsi yang dihantar kepada kaedah peta memerlukan satu hujah, iaitu satu elemen tatasusunan asal. Ia sering dipanggil projek. Dalam fungsi ini anda boleh mengembalikan objek yang mengandungi hanya sifat yang anda ingin ekstrak daripada objek asal.

Anda juga boleh menggunakan tugasan pemusnah untuk mencapai hasil yang sama.

let partialObjects = originalArray.map(({property1, property2}) => 
({partialProperty1: property1, partialProperty2: property2}));

Sila ambil perhatian bahawa kaedah peta tidak mengubah suai tatasusunan asal, tetapi mencipta tatasusunan baharu yang mengandungi objek separa.

Kaedah untuk mencipta tatasusunan objek separa

Gunakan kaedah map()

Dalam JavaScript, fungsi map() ialah kaedah yang boleh dipanggil pada tatasusunan untuk mencipta tatasusunan baharu, dengan hasilnya fungsi yang disediakan dipanggil pada setiap elemen dalam tatasusunan asal. Tatasusunan baharu akan mempunyai bilangan elemen yang sama seperti tatasusunan asal, tetapi setiap elemen akan diubah mengikut fungsi yang disediakan oleh kaedah map().

Contoh

Berikut ialah contoh cara membuat tatasusunan objek separa daripada tatasusunan lain menggunakan kaedah map() -

<html>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019 },
         { id: 2, name: "PQR", model: 2022 },
         { id: 3, name: "XYZ", model: 2021 },
      ];   

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map((item) => {
         return { name: item.name, model: item.model };
      });

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
          
   </script>
</body>
</html>

Dalam contoh di atas, kami mempunyai tatasusunan primitif yang mengandungi objek dengan sifat id, nama dan umur. Kami menggunakan kaedah peta untuk mengulangi tatasusunan dan mencipta tatasusunan baharu partialObjects yang mengandungi hanya sifat id dan nama setiap objek dalam tatasusunan asal.

Gunakan pemusnah

Dalam kaedah ini, kami menggunakan tugasan penstrukturan dan operator baki untuk mengekstrak hartanah. Tugasan pemusnahan akan mengekstrak sifat model dan id daripada setiap objek dalam tatasusunan arrayItems, manakala pengendali yang lain akan mengekstrak semua sifat yang tinggal ke dalam objek baharu bernama rehat.

Contoh

<html>
<head>
   <title>Creating an array of partial objects from another array using destructuring </title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];
      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map(({ model, id, ...rest }) => rest);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Gunakan kaedah reduce()

Kaedah

reduce() ialah kaedah lain yang membolehkan anda mengulangi tatasusunan dan menggunakan hasilnya untuk mencipta satu nilai atau objek. Ini berguna jika anda perlu mencipta satu objek dengan sifat separa daripada berbilang objek.

Contoh

<html>
<head>
   <title>Creating an array of partial objects from another array using reduce() method</title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      const partialArrayItems = arrayItems.reduce((res, item) => {
         res.push({ id: item.id, model: item.model });
         return res;
      }, []);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Kesimpulan

Ringkasnya, kaedah map() ialah alat yang berkuasa untuk mencipta tatasusunan baharu daripada tatasusunan sedia ada dalam JavaScript. Ia membolehkan anda mengulang tatasusunan, melakukan beberapa operasi pada setiap elemen dan mencipta tatasusunan baharu dengan hasilnya. Ia berguna apabila berurusan dengan tatasusunan objek dan anda hanya perlu mengekstrak sifat tertentu daripada setiap objek.

Perlu diingat bahawa kaedah map() tidak mengubah suai tatasusunan asal, tetapi mencipta tatasusunan baharu. Jadi jika anda ingin mengubah suai tatasusunan asal, gunakan kaedah forEach().

Atas ialah kandungan terperinci Bagaimana untuk membuat tatasusunan yang mengandungi objek separa daripada tatasusunan lain dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 数据类型运算符 foreach map 对象

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menukar aksara kepada kod ASCII menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menukar aksara kepada kod ASCII menggunakan JavaScript?

Artikel berkaitan

Lihat lagi