Rumah > hujung hadapan web > tutorial js > Tatasusunan JavaScript: Peta

Tatasusunan JavaScript: Peta

Patricia Arquette
Lepaskan: 2025-01-23 02:36:37
asal
526 orang telah melayarinya

JavaScript Arrays: Map

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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.

Kes Penggunaan

Penukaran data

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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.

Kenaikan

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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.

Ringkasan

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!

sumber:php.cn
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan