Rumah > Artikel > hujung hadapan web > Bagaimana untuk melangkau elemen dalam .map()?

Bagaimana untuk melangkau elemen dalam .map()?

WBOYke hadapan: 2023-08-24 13:57:031301semak imbas

如何跳过 .map() 中的元素？

Dalam JavaScript, kadangkala kita perlu melangkau elemen tatasusunan semasa menggunakan kaedah map(). Sebagai contoh, hanya jika nilai tatasusunan adalah terhingga, kita perlu memetakan nilai dari satu tatasusunan ke tatasusunan yang lain selepas melakukan beberapa operasi matematik pada elemen.

Dalam kes ini, pengguna boleh menggunakan kaedah berikut untuk melangkau elemen tatasusunan semasa menggunakan kaedah map().

Gunakan pernyataan if-else

Dalam kaedah array.map(), kita boleh menggunakan pernyataan if-else untuk melangkau elemen. Jika elemen memenuhi syarat pernyataan if-else, elemen tersebut perlu dikembalikan untuk pemetaan jika tidak, kita boleh mengembalikan nilai nol.

Tatabahasa

Pengguna boleh menggunakan pernyataan if-else untuk melangkau elemen dalam kaedah map() mengikut sintaks berikut.

array.map((number) => {
   if (condition) {
   
      // return some value
   }
   return null;
})

Dalam sintaks di atas, jika keadaan pernyataan if-else dinilai kepada benar, kami akan mengembalikan beberapa nilai jika tidak, kami mengembalikan null.

Contoh 1

Dalam contoh di bawah, kami telah mencipta tatasusunan yang mengandungi nilai berangka. Matlamat kami adalah untuk mendarab setiap elemen positif dengan dua dan memetakannya kepada tatasusunan pengganda. Dalam kaedah map(), kami menyemak sama ada tatasusunan adalah positif menggunakan keadaan "elemen > 0", dan jika ia bernilai benar, kembalikan nombor yang didarab dengan 2.

Dalam output, pengguna dapat melihat bahawa apabila kita mengembalikan nilai nol, indeks tatasusunan muncul sebagai null.

<html>
<body>
   <h2>Using the <i> if-else </i> statement to skip over element in the array.map() method</h2>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById('output');
   let array = [10, 20, 34, 4, 5, 6, 0, -1, 3, 2, 4, -2];
   let multiplier = array.map((number) => {
      if (number > 0) {
         return number * 2;
      } else {
         return null;
      }
   })
   output.innerHTML += "The final array after skipping the negative number in the map() method is - " + multiplier;
</script>
</html>

Gunakan kaedah penapis() dalam kombinasi dengan kaedah map()

Kita boleh menggunakan kaedah filter() sebelum kaedah map(). Menggunakan kaedah filter() kita boleh mengalih keluar beberapa elemen dan menapis elemen yang diperlukan dalam tatasusunan lain.

Selepas itu, kita boleh menggunakan kaedah peta dengan tatasusunan yang dicipta oleh kaedah penapis(), supaya secara tidak langsung kita boleh melangkau elemen dalam kaedah map().

Tatabahasa

Pengguna boleh menggunakan kaedah penapis() mengikut sintaks berikut untuk melangkau elemen dalam kaedah map().

let filteredValues = array.filter((string) => {
   
   // filtering condition
})
let str_array = filteredValues.map((element) => {
   
   // map value
})

Dalam sintaks di atas, pertama, kami menapis nilai daripada tatasusunan dan menggunakan kaedah map() pada nilai yang ditapis.

Contoh 2

Kami telah mencipta tatasusunan yang mengandungi nilai rentetan yang berbeza dalam contoh di bawah. Matlamat kami adalah untuk menukar semua rentetan kepada huruf besar di mana aksara pertama adalah huruf besar. Jadi, mula-mula, kami menggunakan kaedah penapis() untuk menapis semua rentetan yang aksara pertamanya adalah huruf besar dan menyimpannya dalam tatasusunan nilai yang ditapis.

Selepas itu, kami akan memetakannya kepada tatasusunan baharu selepas menukarnya kepada huruf besar menggunakan kaedah map() dengan tatasusunan Nilai yang ditapis.

<html>
<body>
   <h2>Using the <i> array.filter() </i> method to skip over element in the array.map() method.</h2>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById('output'); 
   let array = ["Hello", "hi", "JavaScript", "typescript", "C", "CPP", "html"];
   let filteredValues = array.filter((string) => {
      if (string.charCodeAt(0) > 96 && string.charCodeAt(0) < 123) {
         return true;
      }
      return false;
   })
   let str_array = filteredValues.map((element) => {
      return element.toUpperCase();
   })
   output.innerHTML += "The filtered values from the array are " + filteredValues + "<br/>";
   output.innerHTML += "The final array after skipping some strings in the map() method is - " + str_array + "<br>";
</script>
</html>

Gunakan kaedah array.reduce()

Kaedah

map() memetakan elemen kepada tatasusunan baharu. Kita juga boleh menggunakan kaedah reduce() untuk mencapai tujuan yang sama. Kita boleh menggunakan kaedah reduce() untuk mendapatkan tatasusunan kosong dan elemen peta kepada tatasusunan satu demi satu.

Tatabahasa

Pengguna boleh menggunakan kaedah reduce() seperti dalam sintaks di bawah untuk berfungsi seperti kaedah map() dan melangkau beberapa elemen.

let final_Array = numbers.reduce(function (array, element) {
   if (condition) {
      
      // perform some operation
      
      // push the final element to the array
      
      // return array
   }
   
   // return array
}, []);

Dalam sintaks di atas, kami menolak elemen ke dalam tatasusunan berdasarkan syarat tertentu, jika tidak, kami mengembalikan tatasusunan tanpa menolak elemen itu ke tatasusunan untuk melangkau elemen.

Contoh 3

Dalam contoh di bawah, matlamat kami adalah untuk memetakan semua elemen yang boleh dibahagikan dengan dua kepada dirinya sendiri. Oleh itu, kita lulus fungsi panggil balik sebagai parameter pertama kaedah reduce() dan tatasusunan kosong sebagai parameter kedua.

Dalam fungsi panggil balik, jika syarat dipenuhi, kami menolak elemen ke tatasusunan dan mengembalikan tatasusunan. Jika tidak, kami mengembalikan tatasusunan tanpa sebarang perubahan.

Akhir sekali, kaedah reduce() mengembalikan tatasusunan yang mengandungi semua elemen dipetakan, yang kami simpan dalam pembolehubah Final_array, yang pengguna boleh lihat dalam output.

<html>
<body>
   <h2>Using the <i> array.reduce() </i> method to skip over element in the array.map() method.</h2>
   <div id = "output"></div>
</body>
<script>
   let output = document.getElementById('output'); 
   let numbers = [10, 33, 34, 55, 57, 58, 90, 87, 85, 53];
   let final_Array = numbers.reduce(function (array, element) {
      if (element % 2 == 0) {
         array.push(element);
      }
      return array;
   }, []);
   output.innerHTML += "The final array after skipping some strings in the map() method is - " + final_Array + "<br>";
</script>
</html>

Kami mempelajari tiga cara untuk melangkau elemen dalam kaedah map(). Kaedah pertama menyimpan elemen kosong dan mengambil lebih banyak ruang, kaedah kedua meningkatkan kerumitan masa kerana kami menggunakan kaedah penapis() sahaja. Kaedah ketiga adalah yang terbaik kerana ia mengoptimumkan ruang dan masa.

Atas ialah kandungan terperinci Bagaimana untuk melangkau elemen dalam .map()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript Array NULL if Filter 回调函数字符串 map

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menambah pelicinan imej pada imej menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menambah pelicinan imej pada imej menggunakan FabricJS?

Artikel berkaitan

Lihat lagi