Jika Anda memulai dengan JavaScript, mungkin Anda belum pernah mendengar tentang var officersIds = officers.map(function (officer) {
return officer.id
});2, 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
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 havevar 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
});5, 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
});_5
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
});2, 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
});3
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
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
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
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);
});_0
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);
});_1
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);
});_2
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);
});_3
Dan mari gunakan pengurangan untuk mendapatkan total
var officersIds = [];officers.forEach(function (officer) {officersIds.push(officer.id);
});_4
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);
});_5
Dan lihat betapa cantiknya dengan fungsi panah
var officersIds = [];officers.forEach(function (officer) {officersIds.push(officer.id);
});_6
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?
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
});2, 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);3
Pemformatan
Katakanlah Anda perlu menampilkan daftar orang, dengan nama dan jabatan mereka
var officersIds = [];officers.forEach(function (officer) {officersIds.push(officer.id);
});_7
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
officersIds.push(officer.id);
});_8
Jadi loop Anda harus membungkus panggilan fungsi, seperti ini
var officersIds = [];officers.forEach(function (officer) {officersIds.push(officer.id);
});_9
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
return officer.id
});0
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
});_1
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
});2, var officersIds = officers.map(function (officer) {
return officer.id
});3, atau var officersIds = officers.map(function (officer) {
return officer.id
});4
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
CobalahCobalah 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
});2, var officersIds = officers.map(function (officer) {
return officer.id
});3, 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