Massiv metodlari bilan ma'lumotni o'zgartirish

Umumiy ko'rinish

map, filter, reduce va find — bu ma'lumotni UI'da ko'rsatishdan oldin qayta shakllantirish uchun asosiy vositalardir. Ularning barchasi callback (siz uzatadigan va har bir element uchun bir marta ishga tushadigan function) qabul qiladi va — reduce'ga boshqacha aytmasangiz undan tashqari — ular asl array'ni tegmasdan qoldiradi. Bu "aslini o'zgartirma" (mutate qilmaslik) odati React'ga mukammal mos keladi, chunki React o'zgartirilganlar o'rniga yangi array'larni yoqtiradi.

Har bir misol uchun bitta kichik foydalanuvchilar ro'yxatini ishlatamiz.

const users = [
  { id: 1, name: "Ana", active: true },
  { id: 2, name: "Bo", active: false },
  { id: 3, name: "Cy", active: true },
];

map — har bir elementni o'zgartirish

map bir xil uzunlikdagi yangi array qaytaradi, unda har bir element siz qaytargan narsa bilan almashtiriladi. "Menda objectlar bor, menga bitta maydonning ro'yxati kerak" uchun ajoyib.

const names = users.map((user) => user.name);
// ["Ana", "Bo", "Cy"]

filter — ba'zi elementlarni saqlash

filter faqat callback'ingiz true qaytaradigan elementlarni o'z ichiga olgan yangi, ehtimol qisqaroq array qaytaradi.

const activeUsers = users.filter((user) => user.active);
// [{ id: 1, ... }, { id: 3, ... }]  — Bo is gone

find — birinchi mos kelganini olish

find bitta element qaytaradi (array emas), mos keladigan birinchisini yoki hech biri mos kelmasa undefined.

const bo = users.find((user) => user.name === "Bo");
// { id: 2, name: "Bo", active: false }

reduce — array'ni bitta qiymatga qadar qaynatish

reduce array bo'ylab yuradi va bitta natija quradi (jami, hisob, object). U (accumulator, item) callback'ini va boshlang'ich qiymatni qabul qiladi. Accumulator bir qadamdan keyingisiga ko'chiriladi.

const activeCount = users.reduce(
  (total, user) => (user.active ? total + 1 : total),
  0 // starting value for total
);
// 2

Ularni zanjir qilishingiz ham mumkin, chunki map va filter array'lar qaytaradi:

const activeNames = users
  .filter((user) => user.active)
  .map((user) => user.name);
// ["Ana", "Cy"]

React'da bu aynan ma'lumotni render qilingan qatorlarga aylantirish usulidir: elementlarni hosil qilish uchun users.map(...), ba'zilarini yashirish uchun filter, bittasini qidirish uchun find.

Suhbat maslahatlari

• Har biri nima qaytarishini ayting: map bir xil uzunlikdagi array, filter qisqaroq array, find bitta element, reduce bitta qiymat.
• Bu methodlar asl array'ni o'zgartirmasligini (mutate qilmaslik) eslatib o'ting — shuning uchun React kodi ularga tayanadi.
• Agar reduce'da qotib qolsangiz, oddiy for loop ham xuddi shu ishni bajara olishini ayting; to'g'rilik dabdabalikdan ustun turadi.