Fungsi peta: penukaran data satu-ke-satu
Kadangkala perlu mengubah suai data untuk mengembalikan sebahagian daripadanya atau melakukan operasi yang konsisten, ini ialah pemetaan.
方法 | 返回值 | 一对一 | 对所有元素运行 |
---|---|---|---|
.map((value, index, array) => *) | 数组 | 是 | 是 |
Setiap kali anda perlu menjana output untuk setiap input, map
biasanya kaedah pilihan. Ia menerima fungsi Peta yang beroperasi pada setiap rekod. Nilai yang dikembalikan oleh fungsi pemetaan akan muncul dalam tatasusunan baharu pada kedudukan yang sama dengan nilai asal.
Dari gelung untuk ke .map()
.map()
berfungsi dengan sempurna dengan asas untuk gelung.
Sebagai contoh, semua elemen dalam tatasusunan berikut perlu ditukar kepada huruf besar:
<code class="language-javascript">const data = ['a', 'b', 'c', 'd'];</code>
Berikut ialah beberapa kaedah pelaksanaan:
<code class="language-javascript">// 旧的命令式方法 - for 循环 function mapToUpper(data) { const newData = new Array(data.length); for (let i = 0; i < data.length; i++) { newData[i] = data[i].toUpperCase(); } return newData; } // 新的命令式方法 - for...of 循环 function mapToUpper(data) { const newData = []; for (let value of data) { newData.push(value.toUpperCase()); } return newData; } // 新的声明式方法 - .map() const mapToUpper = (data) => data.map(value => value.toUpperCase());</code>
Sesetengah variasi, seperti `const newData = new Array(data.length)` berbanding `const newData = []`, tidak dimandatkan oleh jenis gelung yang berbeza, sebaliknya mewakili beberapa perbezaan gaya pengekodan sejarah.
Penggunaan biasa `.map()` termasuk mendapatkan nilai daripada objek atau melakukan perubahan yang konsisten atau *transformasi* kepada data.
Selalunya anda perlu mendapatkan satu maklumat daripada setiap rekod yang lebih besar. `map` direka untuk ini.
<code class="language-javascript">const data = [{ name: 'Alec Berg', roles: ['Creator', 'Executive Producer'], }, { name: 'Bill Hader', roles: ['Creator', 'Executive Producer', 'Actor', 'Director'], }]; // 只需要姓名 data.map((entry) => entry.name); // [ 'Alec Berg', 'Bill Hader' ]</code>
Jika anda perlu memberikan diskaun pekerja untuk pesanan anda, `map` boleh melakukannya juga!
<code class="language-javascript">const cart = [{ itemId: 12345, name: 'shoes', price: 70.00, },{ itemId: 54321, name: 'shirt', price: 15.25, }]; // 应用折扣 const applyDiscount = (discountPercent, order) => { // 首先,获取“剩余”金额。 // 如果折扣为 10%,则乘数为 0.9 const multiplier = 1 - (discountPercent / 100); // 为每个项目创建一个新条目,其中包含折扣后的价格。 // 我们将包含旧价格以供参考。 return order.map((item) => ({ ...item, price: item.price * multiplier, originalPrice: item.price, })); };</code>
Tiada output diberikan di sini. Jika anda ingin mencuba sendiri, saya cadangkan menampalnya ke dalam konsol penyemak imbas atau alat seperti RunJS, yang saya gunakan untuk menulis dan menguji contoh ini.
Ini ialah versi khas penukaran data. Mulakan dengan "tiada maklumat", tetapi tindakan mempunyai tatasusunan memberikan setiap entri indeks, dan anda boleh menukar indeks (berasaskan sifar) kepada nombor pengiraan dengan menambah 1.
Tidak perlu menggunakan `value` (argumen pertama yang dibekalkan kepada fungsi *map*), tetapi ia mesti diberi nama untuk mengakses argumen kedua. Watak garis bawah ialah nama pembolehubah yang sah dan sering digunakan untuk mewakili nilai yang tidak diingini, seperti dalam contoh ini.
<code class="language-javascript">const getCountingNumbers = (upTo) => new Array(upTo) // 新数组是“稀疏的”,需要值才能映射 .fill('') // 第二个参数是数组索引。 .map((_, index) => index + 1); getCountingNumbers(5); // [ 1, 2, 3, 4, 5 ]</code>
Walaupun ini adalah contoh `.map()`, fungsi yang lebih baharu juga boleh melakukan ini: `Array.from()`.
<code class="language-javascript">const getCountingNumbers = (upTo) => Array.from( // 通过提供具有长度的对象来“伪造”类似数组的对象 { length: upTo }, // 使用与 .map() 相同的映射函数。 (_, index) => index + 1 );</code>
Mungkin kelihatan pelik untuk membincangkan kaedah lain apabila menggunakan `.map()`, tetapi di sebalik tabir, `Array.from()` akan memanggil `.map()` sekurang-kurangnya untuk contoh di atas.
Semoga ini membantu anda memahami cara menggunakan `.map()`. Transformasi data adalah teras kepada banyak alatan dan industri, jadi `.map()` ialah bahagian penting dalam banyak projek.
Jika anda mempunyai sebarang soalan atau komen tentang `.map()`, saya akan berbesar hati untuk berbincang!
Atas ialah kandungan terperinci Tatasusunan JavaScript: Peta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!