Học viên: Phạm Thanh Huấn
Lớp: Web Frontend - React Js 29
Emai: HuanPT99@gmail.com
Link tham khảo: https://medium.com/@jsutcliffe1991/javascript-array-methods-map-6ad3bfa50aef

Các phương thức array Javascript: .map()

.map() là một trong những phương thức array JavaScript được sử dụng phổ biến nhất. Nó thường được áp dụng trong các frameworks hiện đại như React vì tính linh hoạt và khả năng thực tế của nó.

Trước đó, tôi đã viết về phương thức .forEach(), cho phép chúng ta lặp qua một array. Phương thức này là một cách tuyệt vời để lặp qua một array và truy cập vào từng phần tử, tuy nhiên, như đã được trình bày trong bài viết, chúng ta không thể trả về giá trị thông qua phương thức này, và giá trị trả về sẽ là undefined. (Đáng chú ý rằng trong bài viết cũng đã nêu rõ rằng .forEach() có thể rất hữu ích mặc dù điều này.)

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.forEach((item) => {
    return item + 1;
}));

// Console: undefined

Phương thức .map() xây dựng lên điều này, nhưng khác với việc luôn trả về undefined, nó trả về một array mới với khả năng thay đổi từng phần tử. Điều này cực kỳ hữu ích khi giải quyết vấn đề và phát triển logic, giảm số dòng code một cách mạnh mẽ và cải thiện hiệu suất.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.map((item) => {
    return item + 1
}));
// console: [ 2, 3, 4, 5, 6 ]

/// SAME OUTPUT IN VIA .foreach()

const numbers = [1, 2, 3, 4, 5];
let output = [];

numbers.forEach((item) => {
    output.push(item + 1)
});

console.log(output)

// console: [ 2, 3, 4, 5, 6 ]

Đoạn code này minh họa cách chúng ta có thể nhanh chóng đạt được kết quả mong muốn khi triển khai .map(). Đáng chú ý là chúng ta có thể lưu trữ phương thức .map() trong một biến và tương tự như phương thức .forEach(), chúng ta có thể truy cập chỉ số của từng phần tử trong array.

const numbers = [1, 2, 3, 4, 5];

const mapped = numbers.map((item, index) => {
    if (index > 2) {
        return item + 1;
    } else {
        return item;
    }
});

console.log(mapped)

// console: [ 1, 2, 3, 5, 6 ]

Đoạn code trên minh họa cách chúng ta có thể thay đổi các phần tử tại các chỉ số cụ thể, với các phần tử ở chỉ số 2 trở lên được cộng thêm 1 và tất cả các chỉ số khác trả về các phần tử ở trạng thái ban đầu. Kết quả này được lưu trữ trong một biến và một array mới được trả về khi ghi biến này ra console.

Một cách tuyệt vời để thực hành sử dụng các phương thức như .map() là thử hoàn thành các thử thách trên Codewars.

Cảm ơn mọi người đã dành thời gian đọc bài dịch của mình!