Массивын методууд (map, filter, reduce)
Өмнөх хичээлд push, pop, find зэрэг үндсэн методуудтай танилцсан. Энэ хичээлд массивын хамгийн хүчирхэг гурван методыг судлана: map, filter, reduce. Эдгээрийг сурснаар давталт бичих хэрэгцээ эрс багасаж, код нь хамаагүй цэвэр болно.
Гурав нь arrow функцтай хамт хэрэглэхэд хамгийн тохиромжтой.
map — массивыг хувиргах
map нь массивын бүх элементэд нэг үйлдэл хийж, шинэ массив буцаана. Анхны массивыг өөрчилдөггүй.
const scores = [40, 75, 90, 55, 80];
// Бүх оноог 10 хувиар нэмнэ
const boosted = scores.map((score) => score * 1.1);
console.log(boosted); // [44, 82.5, 99, 60.5, 88]
console.log(scores); // [40, 75, 90, 55, 80] — өөрчлөгдөөгүй
Object-н массивтай:
const students = [
{ name: "Болд", xp: 120 },
{ name: "Номин", xp: 340 },
{ name: "Дорж", xp: 80 },
];
// Зөвхөн нэрсийн жагсаалт гаргана
const names = students.map((student) => student.name);
console.log(names); // ["Болд", "Номин", "Дорж"]
// Түвшин нэмсэн шинэ объект үүсгэнэ
const withLevel = students.map((student) => ({
...student,
level: Math.floor(student.xp / 100) + 1,
}));
console.log(withLevel);
// [{ name: "Болд", xp: 120, level: 2 }, ...]
filter — нөхцөл хангасан элементийг шүүх
filter нь нөхцөлд тохирсон элементүүдийг шинэ массивт цуглуулна. true буцааснаас хадгална, false буцааснаас хасна.
const scores = [45, 72, 88, 55, 91, 60, 38];
// 60-аас дээш оноонуудыг шүүнэ
const passed = scores.filter((score) => score >= 60);
console.log(passed); // [72, 88, 91, 60]
// 60-аас доош — тэнцээгүй
const failed = scores.filter((score) => score < 60);
console.log(failed); // [45, 55, 38]
Object-н массивтай:
const courses = [
{ title: "JavaScript", isFree: true },
{ title: "TypeScript", isFree: false },
{ title: "Python", isFree: true },
{ title: "React", isFree: false },
];
const freeCourses = courses.filter((course) => course.isFree);
console.log(freeCourses);
// [{ title: "JavaScript", isFree: true }, { title: "Python", isFree: true }]
reduce — массивыг нэг утга болгон нэгтгэх
reduce нь массивыг нэг утга болгон буулгана — нийлбэр, их/бага, объект бүтээх гэх мэт. Хамгийн уян хатан, хамгийн хүчирхэг метод.
// Бүтэц: reduce(callback, эхний утга)
// callback-ийн параметр: (хуримтлагдсан утга, одоогийн элемент)
const scores = [10, 20, 30, 40];
const total = scores.reduce((sum, score) => sum + score, 0);
console.log(total); // 100
Алхам бүрт яг юу болдгийг харцгаая:
// sum=0, score=10 → 10
// sum=10, score=20 → 30
// sum=30, score=30 → 60
// sum=60, score=40 → 100
Их утгыг олох:
const xpList = [120, 340, 80, 470, 200];
const maxXP = xpList.reduce((max, xp) => (xp > max ? xp : max), 0);
console.log(maxXP); // 470
Гурвыг гинжлэн хэрэглэх
map, filter, reduce гурвыг дараалуулан хэрэглэж нарийн тооцоо хийж болно. Энэ хэлбэрийг method chaining гэдэг.
const students = [
{ name: "Болд", xp: 120, active: true },
{ name: "Номин", xp: 340, active: true },
{ name: "Дорж", xp: 80, active: false },
{ name: "Энх", xp: 290, active: true },
];
// Идэвхтэй сурагчдын нийт XP
const totalActiveXP = students
.filter((s) => s.active) // Идэвхтэйг шүүнэ
.map((s) => s.xp) // Зөвхөн xp-г авна
.reduce((sum, xp) => sum + xp, 0); // Нийтлэнэ
console.log(totalActiveXP); // 750 (120 + 340 + 290)
Нэг мөрт бичиж ч болно — гэхдээ дээрх хэлбэр нь уншихад илүү хялбар.
forEach vs map — ялгаа
const nums = [1, 2, 3];
// forEach — үр дүн буцаадаггүй, зөвхөн үйлдэл хийнэ
nums.forEach((n) => console.log(n)); // 1, 2, 3
// map — шинэ массив буцаана
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]
Шинэ массив хэрэггүй, зөвхөн хэвлэх эсвэл хадгалах гэвэл forEach. Хувиргасан шинэ массив хэрэгтэй бол map.
Дараагийн хичээлд:
Object — нэрлэсэн өгөгдлүүдийн цуглуулга буюу key-value бүтцийг судлана. Бодит программын өгөгдлийн ихэнх хэсэг object хэлбэртэй байдаг.