ES6 đã giới thiệu 4 phương thức mới để thao tác với mảng:

1.map - Ánh xạ (một đối ứng một)

2.reduce - Tổng hợp (nhiều thành một)

3.filter - Lọc

4.forEach - Lặp/Duyệt.

1. Map

Để hiểu nhanh hơn, chúng ta hãy xem xét ví dụ mã:

let soNguyen = [3, 5, 7, 9];
let ketQua = soNguyen.map(giaTri => giaTri * giaTri);
console.log(ketQua);

Kết quả trả về:

Mã trên biểu thị rằng mỗi phần tử trong mảng soNguyen đều được bình phương, tức là mỗi phần tử đều thực hiện phương thức này.

2. Reduce

Phương thức này có thể phức tạp hơn một chút so với map. Chúng ta thường sử dụng nó để tính tổng giá trị giỏ hàng, tính giá trị trung bình, v.v. Hãy xem một ví dụ:

let danhSachSo = [10, 20, 30, 40];
let tong = danhSachSo.reduce(function(tam, phanTu, chiSo) {
    console.log(tam, phanTu, chiSo);
});

Kết quả trả về như sau:

Từ kết quả, ta có thể thấy rằng phanTu là phần tử hiện tại, chiSo là chỉ mục (bắt đầu từ 0), còn tam đóng vai trò như một giá trị trung gian. Trong ví dụ này, nó lần lượt là 10, 30 (10+20), 60 (30+30), và cuối cùng là 100 (60+40).

Vì vậy, nếu chúng ta muốn tìm giá trị lớn nhất trong mảng trên, có thể viết như sau:

let danhSachSo = [10, 20, 30, 40];
let giaTriLonNhat = danhSachSo.reduce(function(tam, phanTu, chiSo) {
    if (chiSo === danhSachSo.length - 1) {
        return tam > phanTu ? tam : phanTu;
    } else {
        return tam > phanTu ? tam : phanTu;
    }
});
console.log(giaTriLonNhat);

3. Filter

Lọc. Khi sử dụng tính năng tìm kiếm, lọc điều kiện là một chức năng rất phổ biến. Vậy phương thức này được sử dụng như thế nào?

Ví dụ, chúng ta có một dữ liệu JSON và muốn lấy các giá trị thỏa mãn một điều kiện nhất định, có thể viết như sau:

let danhSachMonAn = [
    {ten: 'Bún chả', gia: '45'},
    {ten: 'Phở', gia: '50'},
    {ten: 'Bánh mì', gia: '25'},
    {ten: 'Cơm tấm', gia: '35'}
];

let monAnRe = danhSachMonAn.filter(mon => mon.gia < 30);
console.log(monAnRe);

Kết quả trả về:

Có phải cảm giác sử dụng rất dễ dàng không?

4. forEach

Nhìn vào tên phương thức này, có thể đoán được chức năng của nó. Nó dùng để lặp qua các phần tử của mảng. Hãy xem ví dụ:

let soNguyen = [15, 25, 35, 45, 55];
let tongTichLuy = 0;

soNguyen.forEach((giaTri, chiSo) => {
    tongTichLuy += giaTri;
    console.log(`Tại vị trí ${chiSo}, tổng tích lũy là: ${tongTichLuy}`);
});

Kết quả trả về như sau:

chiSo biểu thị chỉ mục, còn giaTri biểu thị giá trị của phần tử hiện tại.

Đây chính là 4 phương thức mới trong ES6 để thao tác với mảng. Bài viết này chỉ trình bày những kiến thức cơ bản, được ghi lại trong quá trình tự học, vì vậy đừng nghĩ rằng nó quá đơn giản nhé~~