Duyệt mảng (Array Iteration) trong JavaScript

Trong lập trình JavaScript, mảng (Array) là một trong những cấu trúc dữ liệu quan trọng và được sử dụng phổ biến để lưu trữ và quản lý tập hợp dữ liệu. Khi làm việc với mảng, một trong những thao tác cơ bản và quan trọng nhất là duyệt mảng (Array Iteration), tức là lặp qua từng phần tử để thực hiện các thao tác như tính toán, lọc dữ liệu, tìm kiếm hoặc chuyển đổi mảng.

JavaScript cung cấp nhiều cách để duyệt mảng, từ các vòng lặp cơ bản như for, while đến các phương thức có sẵn như forEach(), map(), filter(), reduce(), giúp lập trình viên xử lý dữ liệu hiệu quả hơn. Việc lựa chọn phương pháp duyệt phù hợp không chỉ giúp tối ưu hiệu suất mà còn giúp mã nguồn trở nên dễ đọc, ngắn gọn và dễ bảo trì hơn.

Bài viết này sẽ giúp bạn tìm hiểu các phương pháp duyệt mảng phổ biến trong JavaScript, so sánh ưu nhược điểm của từng phương thức và cách ứng dụng chúng vào thực tế.

Duyệt mảng trong JavaScript

Duyệt mảng (Array Iteration) là quá trình lặp qua từng phần tử trong một mảng để thực hiện các thao tác như truy xuất, thay đổi giá trị, tính toán hoặc lọc dữ liệu. Đây là một kỹ thuật quan trọng trong lập trình vì hầu hết các thao tác xử lý dữ liệu đều liên quan đến việc duyệt qua mảng.

Trong JavaScript, có nhiều cách để duyệt mảng, bao gồm các vòng lặp truyền thống (for, while, do...while) và các phương thức có sẵn (forEach(), map(), filter(), reduce(), v.v.), giúp lập trình viên xử lý dữ liệu hiệu quả hơn.

Tại sao cần duyệt mảng?

Việc duyệt mảng là cần thiết trong nhiều trường hợp khi làm việc với dữ liệu. Một số lý do quan trọng bao gồm:

• Xử lý dữ liệu từng phần tử trong mảng: Lặp qua từng phần tử để thực hiện các thao tác như in ra màn hình, thay đổi giá trị hoặc kiểm tra điều kiện.
• Áp dụng các phép toán: Tính tổng, tìm giá trị lớn nhất, nhỏ nhất hoặc thực hiện các phép toán phức tạp hơn.
• Lọc dữ liệu: Lọc ra các phần tử thỏa mãn điều kiện nhất định (ví dụ: tìm các số chẵn trong một mảng số nguyên).
• Chuyển đổi mảng: Tạo một mảng mới dựa trên các giá trị của mảng ban đầu (ví dụ: nhân đôi giá trị của từng phần tử).
• Tối ưu hóa hiệu suất và đơn giản hóa mã nguồn: Sử dụng các phương thức phù hợp giúp mã dễ đọc, dễ bảo trì và tối ưu hiệu suất.

Các phương pháp duyệt mảng phổ biến trong JavaScript

Có hai nhóm phương pháp chính để duyệt mảng:

Duyệt mảng bằng vòng lặp cơ bản

• for: Vòng lặp truyền thống, cho phép kiểm soát chỉ mục (index) của từng phần tử.
• while: Vòng lặp tiếp tục chạy khi điều kiện còn đúng.
• do...while: Tương tự while, nhưng đảm bảo vòng lặp chạy ít nhất một lần.

Duyệt mảng bằng phương thức có sẵn trong JavaScript

• forEach(): Duyệt qua từng phần tử mà không trả về giá trị.
• map(): Duyệt qua mảng và trả về một mảng mới sau khi xử lý từng phần tử.
• filter(): Trả về một mảng mới gồm các phần tử thỏa mãn điều kiện cho trước.
• reduce(): Tính toán giá trị tích lũy dựa trên các phần tử trong mảng.
• find(), findIndex(): Tìm phần tử đầu tiên hoặc chỉ mục của phần tử đầu tiên thỏa mãn điều kiện.
• some(), every(): Kiểm tra điều kiện của một hoặc tất cả các phần tử trong mảng.

Việc lựa chọn phương pháp phù hợp tùy thuộc vào yêu cầu cụ thể của bài toán và hiệu suất mong muốn. Trong các phần tiếp theo, chúng ta sẽ đi sâu vào từng phương pháp duyệt mảng và cách sử dụng chúng hiệu quả.

Duyệt mảng bằng vòng lặp cơ bản trong JavaScript

Vòng lặp cơ bản trong JavaScript giúp duyệt mảng bằng cách lặp qua từng phần tử thông qua chỉ mục (index). Chúng ta có thể dùng các vòng lặp như for, while, và do...while để thực hiện điều này.

for loop (Vòng lặp for thông thường)

Vòng lặp for là một trong những cách phổ biến nhất để duyệt mảng. Cấu trúc của vòng lặp for gồm 3 phần:

for (khởi tạo; điều kiện lặp; bước lặp) {
    // Thực hiện hành động với từng phần tử trong mảng
}

• Khởi tạo (let i = 0): Bắt đầu vòng lặp với giá trị chỉ mục (index).
• Điều kiện lặp (i < array.length): Kiểm tra xem chỉ mục có nằm trong giới hạn của mảng không.
• Bước lặp (i++): Tăng hoặc giảm chỉ mục sau mỗi lần lặp.

Ví dụ: Duyệt qua từng phần tử trong mảng và in ra màn hình

let numbers = [10, 20, 30, 40, 50];

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]); 
}

Ưu điểm của for loop:
Kiểm soát tốt chỉ mục của mảng.
Có thể nhảy bước (i += 2) hoặc dừng sớm (break).

Ví dụ: Duyệt qua mảng với bước nhảy 2

let numbers = [10, 20, 30, 40, 50, 60];

for (let i = 0; i < numbers.length; i += 2) {
    console.log(numbers[i]); 
}

10
30
50

while (điều kiện) {
    // Thực hiện hành động với từng phần tử trong mảng
}

let numbers = [10, 20, 30, 40, 50];
let i = 0;

while (i < numbers.length) {
    console.log(numbers[i]);
    i++; // Tăng chỉ mục sau mỗi lần lặp
}

10
20
30
40
50

let numbers = [10, 20, 30, 40, 50];
let i = 0;

while (i < numbers.length && numbers[i] <= 30) {
    console.log(numbers[i]);
    i++;
}

do {
    // Thực hiện hành động với phần tử đầu tiên trong mảng
} while (điều kiện);

let numbers = [10, 20, 30, 40, 50];
let i = 0;

do {
    console.log(numbers[i]);
    i++;
} while (i < numbers.length);

let i = 10; // Chỉ mục lớn hơn độ dài mảng
let numbers = [1, 2, 3, 4, 5];

do {
    console.log(numbers[i]); // Vẫn chạy ít nhất một lần (sẽ bị lỗi do chỉ mục không hợp lệ)
    i++;
} while (i < numbers.length);

undefined (lỗi do i > numbers.length ngay từ đầu)

array.forEach(callback(currentValue, index, array));

let numbers = [10, 20, 30, 40];

numbers.forEach((num) => {
    console.log(num);
});

10
20
30
40

let newArray = array.map(callback(currentValue, index, array));

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);

console.log(doubled);

[2, 4, 6, 8]

let newArray = array.filter(callback(currentValue, index, array));

let numbers = [10, 15, 20, 25, 30];
let evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);

[10, 20, 30]

let result = array.reduce(callback(accumulator, currentValue, index, array), initialValue);

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum);

15

let value = array.find(callback(currentValue, index, array));

let numbers = [10, 15, 25, 30];
let result = numbers.find(num => num > 20);

console.log(result);

25

let numbers = [10, 15, 25, 30];
let index = numbers.findIndex(num => num > 20);

console.log(index);

2

let result = array.some(callback(currentValue, index, array));

let numbers = [10, 20, 30, 40];
let hasLargeNumber = numbers.some(num => num > 50);

console.log(hasLargeNumber);

false

let result = array.every(callback(currentValue, index, array));

let numbers = [10, 20, 30, 40];
let allGreaterThanFive = numbers.every(num => num > 5);

console.log(allGreaterThanFive);

true

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

// Duyệt bằng for
let doubledFor = [];
for (let i = 0; i < numbers.length; i++) {
    doubledFor.push(numbers[i] * 2);
}

// Duyệt bằng forEach
let doubledForEach = [];
numbers.forEach(num => {
    doubledForEach.push(num * 2);
});

// Duyệt bằng map
let doubledMap = numbers.map(num => num * 2);

console.log(doubledFor);       // [2, 4, 6, 8, 10]
console.log(doubledForEach);   // [2, 4, 6, 8, 10]
console.log(doubledMap);       // [2, 4, 6, 8, 10]

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

// map(): Nhân đôi số trong mảng
let doubled = numbers.map(num => num * 2);

// filter(): Lọc số lớn hơn 2
let filtered = numbers.filter(num => num > 2);

// reduce(): Tính tổng
let sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(filtered); // [3, 4, 5]
console.log(sum);      // 15

let products = [
    { name: "Laptop", price: 1000 },
    { name: "Phone", price: 500 }
];

let productNames = products.map(product => `${product.name} - $${product.price}`);

console.log(productNames);

["Laptop - $1000", "Phone - $500"]

let cart = [
    { name: "Laptop", price: 1000 },
    { name: "Phone", price: 500 }
];

let totalPrice = cart.reduce((total, item) => total + item.price, 0);

console.log(totalPrice);

1500