Perbedaan antara peta dan pengurangan dalam javascript

Jika Anda memulai dengan JavaScript, mungkin Anda belum pernah mendengar tentang

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = officers.map(function (officer) {
  return officer.id
});

3, dan

var officersIds = officers.map(function (officer) {
  return officer.id
});

4. Bagi saya, butuh waktu lama karena saya harus mendukung Internet Explorer 8 hingga beberapa tahun yang lalu. Tetapi jika Anda tidak perlu kompatibel dengan browser yang sangat tua ini, Anda harus terbiasa dengan metode tersebut

Table of Contents Show

Pemformatan
Pengujian lebih mudah
Kapan menggunakan pengurangan dan pemetaan dalam JavaScript?
Apa itu filter () peta () dan kurangi ()?
Apakah peta lebih cepat daripada pengurangan?
Apa perbedaan antara filter dan pengurangan peta?

Perhatikan bahwa artikel ini kemungkinan besar berlaku untuk bahasa pemrograman apa pun yang mungkin Anda gunakan, karena ini adalah konsep yang ada di banyak bahasa lain

peta()

Izinkan saya menjelaskan cara kerjanya dengan contoh sederhana. Katakanlah Anda telah menerima larik yang berisi banyak objek – masing-masing mewakili satu orang. Namun, hal yang benar-benar Anda butuhkan pada akhirnya adalah sebuah array yang hanya berisi id dari setiap orang

// What you have
var officers = [
  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'Admiral Ozzel' },
  { id: 88, name: 'Commander Jerjerrod' }
];// What you need
[20, 24, 56, 88]

Ada banyak cara untuk mencapai ini. Anda mungkin ingin melakukannya dengan membuat larik kosong, lalu menggunakan

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = officers.map(function (officer) {
  return officer.id
});

6, atau

var officersIds = officers.map(function (officer) {
  return officer.id
});

7 sederhana untuk memenuhi tujuan Anda

Mari kita bandingkan

Menggunakan

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Perhatikan bagaimana Anda harus membuat array kosong sebelumnya?

var officersIds = officers.map(function (officer) {
  return officer.id
});

Kami bahkan bisa lebih ringkas dengan fungsi panah (membutuhkan dukungan ES6, Babel atau TypeScript)

const officersIds = officers.map(officer => officer.id);

Jadi bagaimana

var officersIds = officers.map(function (officer) {
  return officer.id
});

2 bekerja? . Callback berjalan untuk setiap nilai dalam larik dan mengembalikan setiap nilai baru dalam larik yang dihasilkan

Perlu diingat bahwa array yang dihasilkan akan selalu sama panjangnya dengan array asli

mengurangi()

Sama seperti

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = officers.map(function (officer) {
  return officer.id
});

3 juga menjalankan callback untuk setiap elemen array. Yang berbeda di sini adalah bahwa pengurangan meneruskan hasil panggilan balik ini (akumulator) dari satu elemen larik ke elemen larik lainnya

Akumulator bisa berupa apa saja (bilangan bulat, string, objek, dll. ) dan harus dibuat atau diteruskan saat memanggil

var officersIds = officers.map(function (officer) {
  return officer.id
});

Waktu untuk contoh. Katakanlah Anda memiliki susunan dengan pilot ini dan pengalaman mereka masing-masing selama bertahun-tahun

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

Kita perlu mengetahui total tahun pengalaman mereka semua. Dengan

var officersIds = officers.map(function (officer) {
  return officer.id
});

_3, ini cukup mudah

var totalYears = pilots.reduce(function (accumulator, pilot) {
  return accumulator + pilot.years;
}, 0);

Perhatikan bahwa saya telah menetapkan nilai awal sebagai 0. Saya juga bisa menggunakan variabel yang ada jika perlu. Setelah menjalankan panggilan balik untuk setiap elemen array, pengurangan akan mengembalikan nilai akhir akumulator kami (dalam kasus kami.

const officersIds = officers.map(officer => officer.id);

_6)

Mari kita lihat bagaimana ini bisa dipersingkat dengan fungsi panah ES6

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

Sekarang katakanlah saya ingin menemukan pilot mana yang paling berpengalaman. Untuk itu, saya juga bisa menggunakan pengurangan

var mostExpPilot = pilots.reduce(function (oldest, pilot) {
  return (oldest.years || 0) > pilot.years ? oldest : pilot;
}, {});

Saya menamai akumulator saya

const officersIds = officers.map(officer => officer.id);

_7. Panggilan balik saya membandingkan akumulator dengan setiap pilot. Jika seorang pilot memiliki pengalaman bertahun-tahun lebih dari

const officersIds = officers.map(officer => officer.id);

7, maka pilot itu menjadi

const officersIds = officers.map(officer => officer.id);

7 baru jadi itulah yang saya kembalikan

Seperti yang Anda lihat, menggunakan

var officersIds = officers.map(function (officer) {
  return officer.id
});

3 adalah cara mudah untuk menghasilkan satu nilai atau objek dari array

Saring()

Bagaimana jika Anda memiliki array, tetapi hanya menginginkan beberapa elemen di dalamnya?

Ini data kami

var pilots = [
  {
    id: 2,
    name: "Wedge Antilles",
    faction: "Rebels",
  },
  {
    id: 8,
    name: "Ciena Ree",
    faction: "Empire",
  },
  {
    id: 40,
    name: "Iden Versio",
    faction: "Empire",
  },
  {
    id: 66,
    name: "Thane Kyrell",
    faction: "Rebels",
  }
];

Katakanlah kita ingin dua array sekarang. satu untuk pilot pemberontak, satu lagi untuk imperial. Dengan

var officersIds = officers.map(function (officer) {
  return officer.id
});

_4 itu tidak bisa lebih mudah

var rebels = pilots.filter(function (pilot) {
  return pilot.faction === "Rebels";
});var empire = pilots.filter(function (pilot) {
  return pilot.faction === "Empire";
});

Itu dia. Dan bahkan lebih pendek lagi dengan fungsi panah

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Pada dasarnya, jika fungsi callback mengembalikan true, elemen saat ini akan berada di array yang dihasilkan. Jika mengembalikan false, itu tidak akan terjadi

Menggabungkan. peta(),. kurangi(), dan. Saring()

Karena ketiganya dipanggil dalam array dan karena

var officersIds = officers.map(function (officer) {
  return officer.id
});

2 dan

var officersIds = officers.map(function (officer) {
  return officer.id
});

4 keduanya mengembalikan array, kita dapat dengan mudah menyambungkan panggilan kita

Mari kita lihat contoh lainnya. Ini data kami

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Tujuan kami. dapatkan skor total pengguna kekuatan saja. Mari kita lakukan langkah demi langkah

Pertama, kita perlu menyaring personel yang tidak bisa menggunakan kekuatan

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Dengan itu kami memiliki 3 elemen tersisa di array yang dihasilkan. Kita sekarang perlu membuat array yang berisi skor total setiap Jedi

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Dan mari gunakan pengurangan untuk mendapatkan total

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Dan sekarang inilah bagian yang menyenangkan… kita dapat merangkai semua ini untuk mendapatkan apa yang kita inginkan dalam satu baris

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Dan lihat betapa cantiknya dengan fungsi panah

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Ledakan. 💥

Catatan. Dalam contoh saya sebelumnya,

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

_5 dan

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

6 bahkan tidak diperlukan. Kami dapat dengan mudah mencapai hasil yang sama hanya dengan

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

7. Saya meninggalkan mereka di sana demi contoh ini. Bisakah Anda menebak bagaimana kami hanya dapat menyimpan

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

7 dan mendapatkan hasil yang sama dengan satu baris kode?

Mengapa tidak menggunakan. untuk setiap()?

Saya dulu menggunakan

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

_9 loop di mana-mana, bukan

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = officers.map(function (officer) {
  return officer.id
});

3, dan

var officersIds = officers.map(function (officer) {
  return officer.id
});

4. Namun beberapa tahun yang lalu saya mulai bekerja lebih banyak dengan data yang berasal dari API. Di situlah saya mulai melihat keuntungan meninggalkan

var totalYears = pilots.reduce(function (accumulator, pilot) {
  return accumulator + pilot.years;
}, 0);

Pemformatan

Katakanlah Anda perlu menampilkan daftar orang, dengan nama dan jabatan mereka

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

API memberi Anda data di atas, tetapi Anda hanya memerlukan judul dan nama belakang setiap orang… Anda perlu memformat data. Namun, aplikasi Anda juga perlu memiliki satu tampilan untuk setiap orang, jadi Anda harus menulis fungsi pemformatan data yang berfungsi baik dalam tampilan daftar maupun dalam tampilan tunggal

Itu berarti Anda tidak dapat memiliki

var totalYears = pilots.reduce(function (accumulator, pilot) {
  return accumulator + pilot.years;
}, 0);

_3 loop di dalam fungsi pemformatan Anda, atau Anda harus membungkus elemen tunggal Anda dalam sebuah array sebelum Anda meneruskannya ke fungsi hanya untuk membuatnya berfungsi, seperti itu

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Jadi loop Anda harus membungkus panggilan fungsi, seperti ini

var officersIds = [];officers.forEach(function (officer) {
  officersIds.push(officer.id);
});

Tapi

var officersIds = officers.map(function (officer) {
  return officer.id
});

5 tidak mengembalikan apa pun. Tidak bisa. Itu berarti Anda harus memasukkan hasilnya ke dalam array yang telah ditentukan sebelumnya

var officersIds = officers.map(function (officer) {
  return officer.id
});

Hasilnya, Anda memiliki 2 fungsi. fungsi

var totalYears = pilots.reduce(function (accumulator, pilot) {
  return accumulator + pilot.years;
}, 0);

_6 Anda dan fungsi Anda yang mendorong hasil dalam array Anda

Mengapa memiliki 2 fungsi ketika Anda hanya dapat memiliki satu?

var officersIds = officers.map(function (officer) {
  return officer.id
});

Pengujian lebih mudah

Jika Anda menulis pengujian unit untuk kode Anda, akan lebih mudah bagi Anda untuk menguji fungsi yang Anda panggil dengan

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = officers.map(function (officer) {
  return officer.id
});

3, atau

var officersIds = officers.map(function (officer) {
  return officer.id
});

Yang harus Anda lakukan adalah menyediakan data masuk untuk fungsi tersebut dan mengharapkan hasilnya keluar. Pada dasarnya "apa yang keluar jika ini diteruskan?". Lebih sedikit manipulasi, lebih sedikit

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

_0 dan

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

1. Ini mudah, pengujian sederhana

Cobalah

Cobalah untuk mengganti beberapa

var pilots = [
  {
    id: 10,
    name: "Poe Dameron",
    years: 14,
  },
  {
    id: 2,
    name: "Temmin 'Snap' Wexley",
    years: 30,
  },
  {
    id: 41,
    name: "Tallissan Lintra",
    years: 16,
  },
  {
    id: 99,
    name: "Ello Asty",
    years: 22,
  }
];

_9 loop Anda dengan

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = officers.map(function (officer) {
  return officer.id
});

var officersIds = officers.map(function (officer) {
  return officer.id
});

4 di mana tampaknya cocok. Saya jamin kode Anda tidak akan terlalu kikuk dan lebih mudah dibaca

Jika Anda menyukai artikel itu dan ingin mempelajari lebih banyak metode array, lihat artikel saya tentang cara menggunakan

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

6 dan

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

7 di JavaScript

Kapan menggunakan pengurangan dan pemetaan dalam JavaScript?

Mereka digunakan untuk menulis kode sederhana, pendek dan bersih untuk memodifikasi array daripada menggunakan loop. .

peta() metode. Itu menerapkan fungsi yang diberikan pada semua elemen array dan mengembalikan array yang diperbarui. .

kurangi() metode. Ini mengurangi semua elemen array menjadi satu nilai dengan menerapkan fungsi berulang kali

Apa itu filter () peta () dan kurangi ()?

Fungsi map(), filter(), dan reduce() semuanya melakukan hal yang sama. Mereka masing-masing mengambil fungsi dan daftar elemen, lalu mengembalikan hasil penerapan fungsi ke setiap elemen dalam daftar . Seperti yang dinyatakan sebelumnya, Python memiliki fungsi bawaan seperti map(), filter(), dan reduce().

Apakah peta lebih cepat daripada pengurangan?

Kami akan menggunakan variabel filterAndMapWinCount untuk melacak berapa kali. filter() +. map() lebih cepat dari. kurangi() .

Apa perbedaan antara filter dan pengurangan peta?

Saring. mengembalikan subset dari larik asli berdasarkan kriteria khusus. Dalam fungsi callback Anda, kembalikan nilai boolean untuk menentukan apakah setiap item akan disertakan atau tidak dalam larik baru. Mengurangi. dapat digunakan untuk mengembalikan hampir semua hal