01/10/2018, 10:19
Map và reduce array trong JavaScript
Dạo gần đây mình hay dùng 2 hàm: map và reduce trong JS nên muốn chia sẻ với mọi người về tính tiện lợi của nó. Các ví dụ dưới đây mình viết theo ES6 cho gọn.
Đầu tiên là hàm map: Mục tiêu của hàm này là xỷ lý (thay đổi) giá trị của các phần tử trong array và giữ nguyên số phần tử của array gốc.
Ví dụ: Khi mình có nhu cầu upper case cho tất cả các phần tử trong 1 mảng:
const myArr = ['item1', 'item2', 'item3'];
const myUpperArr = myArr.map(value => value.toUpperCase());
console.log(myUpperArr); // ['ITEM1', 'ITEM2', 'ITEM3]
Tiếp theo là hàm reduce: Mục tiêu của hàm này là tính toán ra 1 giá trị từ các phần tử trong mảng, kết quả trả về là dạng vô hướng (số, chuỗi, object…)
Ví dụ: Khi mình cần tính tổng giá của các mặt hàng trong 1 đơn hàng:
const orderItems = [
{
id: 1,
title: 'item 1',
unit_price: 2,
quantity: 3
}, {
id: 2,
title: 'item 1',
unit_price: 3,
quantity: 2
}, {
id: 3,
title: 'item 1',
unit_price: 4,
quantity: 1
}
]
const total = orderItems.reduce((total, item) => (total + item.unit_price * item.quantity), 0); // Số 0 cuối cùng là giá trị khởi tạo
console.log(total); // 16
Tham khảo thêm:
https://www.w3schools.com/jsref/jsref_map.asp
https://www.w3schools.com/jsref/jsref_reduce.asp
Bài liên quan
