Array Iteration giúp cho sự đa dạng và linh hoạt của các mô hình lặp qua mảng trong JavaScript, giúp những người phát triển viết code sạch sẽ và dễ đọc hơn. Trong JavaScript, có nhiều phương thức cho mảng, giúp lặp qua từng phần tử của mảng và có thể được sử dụng tùy thuộc vào mục đích cụ thể của bạn. Bạn cũng có thể sử dụng một vòng lặp for đơn giản để lặp qua mảng trong JavaScript. Tuy nhiên, việc sử dụng các hàm có sẵn thường được ưu tiên, miễn là chúng đáp ứng được mục đích của bạn.
Dưới đây là mô tả ngắn gọn về các phương thức lặp qua mảng trong JavaScript:
- forEach(): Duyệt qua từng phần tử trong mảng và thực hiện một hàm callback cho mỗi phần tử.
- map(): Tạo ra một mảng mới bằng cách thực hiện một hàm callback cho từng phần tử trong mảng.
- filter(): Tạo ra một mảng mới chứa các phần tử thoả mãn điều kiện kiểm tra được đặt ra.
- reduce(): Chạy một hàm callback trên từng phần tử của mảng để tạo ra một giá trị cuối cùng.
- reduceRight(): Tương tự như
reduce(), nhưng bắt đầu từ phần tử cuối cùng và di chuyển về phần tử đầu tiên. - every(): Kiểm tra xem tất cả các phần tử trong mảng có thoả mãn điều kiện kiểm tra hay không.
- some(): Kiểm tra xem có ít nhất một phần tử trong mảng thoả mãn điều kiện kiểm tra hay không.
- indexOf(): Tìm kiếm vị trí đầu tiên của một phần tử trong mảng.
- lastIndexOf(): Tìm kiếm vị trí cuối cùng của một phần tử trong mảng.
- find(): Trả về giá trị của phần tử đầu tiên trong mảng thoả mãn điều kiện kiểm tra.
- findIndex(): Trả về chỉ số của phần tử đầu tiên trong mảng thoả mãn điều kiện kiểm tra.
Các phương thức này giúp làm cho mã nguồn trở nên sáng sủa và dễ đọc hơn khi bạn làm việc với mảng trong JavaScript.
forEach()
forEach() là một phương thức của mảng trong JavaScript, được sử dụng để duyệt qua từng phần tử trong mảng và thực hiện một hàm callback cho mỗi phần tử.
Ví dụ:
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(function(value, index, array) {
txt += value + "<br>";
});Trong trường hợp này, hàm callback nhận giá trị (value), chỉ số (index) và mảng gốc (array). Hàm callback nối giá trị của mỗi phần tử với chuỗi "<br>" và gán kết quả vào biến txt.
Nếu mảng numbers là [45, 4, 9, 16, 25], thì biến txt sẽ chứa chuỗi:
45<br>4<br>9<br>16<br>25<br>Lưu ý rằng, sau vòng lặp, chuỗi có thể được sử dụng để hiển thị hoặc thực hiện các thao tác khác tùy thuộc vào mục đích của bạn.
map()
map() là một phương thức tạo ra một mảng mới bằng cách thực hiện một hàm cho từng phần tử trong mảng ban đầu.
Ví dụ:
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(function(value, index, array) {
return value * 2;
});Trong trường hợp này, hàm callback nhận giá trị (value), chỉ số (index) và mảng gốc (array). Hàm callback trả về giá trị mới bằng cách nhân giá trị của từng phần tử với 2.
Nếu mảng numbers1 là [45, 4, 9, 16, 25], thì mảng mới numbers2 sẽ là [90, 8, 18, 32, 50].
flatMap()
flatMap() là một phương thức được thêm vào trong ES2019. Nó kết hợp map() và flat(). Phương thức này trước tiên thực hiện map() trên từng phần tử của mảng và sau đó sẽ gộp mảng.
Ví dụ:
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);Trong ví dụ này, hàm callback nhận giá trị của mỗi phần tử (x) và nhân nó với 2. Kết quả là một mảng mới (newArr) với mỗi phần tử của myArr được nhân với 2.
Nếu mảng myArr là [1, 2, 3, 4, 5, 6], thì mảng mới newArr sẽ là [2, 4, 6, 8, 10, 12].
filter()
filter() tạo ra một mảng mới chứa các phần tử thoả mãn một điều kiện kiểm tra. Hàm callback của filter trả về true hoặc false để quyết định xem phần tử có nên được bao gồm trong mảng mới hay không.
Ví dụ:
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(function(value, index, array) {
return value > 18;
});Ví dụ trên sử dụng phương thức filter để tạo một mảng mới chứa các phần tử từ mảng numbers có giá trị lớn hơn 18.
Nếu mảng numbers là [45, 4, 9, 16, 25], thì mảng mới over18 sẽ chứa các phần tử lớn hơn 18, tức là [45, 25].
reduce()
reduce() chạy một hàm trên từng phần tử của mảng để tạo ra một giá trị duy nhất (tổng hoặc kết quả cuối cùng). Hàm callback của reduce nhận bốn tham số: tổng (total), giá trị phần tử (value), chỉ số (index) và mảng (array).
Ví dụ:
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(function(total, value, index, array) {
return total + value;
}, 0);Ví dụ trên sử dụng phương thức reduce để tính tổng của các phần tử trong mảng numbers.
Nếu mảng numbers là [45, 4, 9, 16, 25], thì kết quả của biến sum sẽ là tổng của các phần tử trong mảng, tức là 99 (45 + 4 + 9 + 16 + 25).
reduceRight()
reduceRight() hoạt động giống như reduce(), nhưng bắt đầu từ phần tử cuối cùng của mảng và di chuyển về phần tử đầu tiên.
Dưới đây là một ví dụ minh họa sử dụng reduceRight():
const numbers = [1, 2, 3, 4];
// Sử dụng reduceRight() để tính tổng các phần tử từ phải sang trái
const sum = numbers.reduceRight(function (accumulator, currentValue) {
console.log("Accumulator:", accumulator, "Current Value:", currentValue);
return accumulator + currentValue;
});
console.log("Final Sum:", sum);Kết quả của đoạn mã trên sẽ là:
Accumulator: 4 Current Value: 3
Accumulator: 7 Current Value: 2
Accumulator: 9 Current Value: 1
Final Sum: 10Trong ví dụ này, reduceRight() được sử dụng để tính tổng các phần tử trong mảng numbers từ phải sang trái. Hàm callback nhận vào hai tham số, accumulator là giá trị tích lũy và currentValue là giá trị của phần tử hiện tại. Mỗi lần lặp, giá trị của accumulator được cập nhật với tổng của nó và currentValue.
every() và some()
every() kiểm tra xem tất cả các giá trị trong mảng có thoả mãn một điều kiện kiểm tra hay không. some() kiểm tra xem có ít nhất một giá trị nào đó thoả mãn điều kiện kiểm tra hay không.
Ví dụ:
const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(function(value, index, array) {
return value > 18;
});
let someOver18 = numbers.some(function(value, index, array) {
return value > 18;
});allOver18: Kết quả sẽ là false. Biến này kiểm tra xem tất cả các giá trị trong mảng numbers có lớn hơn 18 hay không. Trong trường hợp này, có các giá trị như 45, 25 lớn hơn 18, nhưng không phải tất cả, nên kết quả là false.
someOver18: Kết quả sẽ là true. Biến này kiểm tra xem có ít nhất một giá trị trong mảng numbers lớn hơn 18 hay không. Trong trường hợp này, có các giá trị như 45, 25 lớn hơn 18, nên kết quả là true.
indexOf() và lastIndexOf()
indexOf() tìm kiếm một phần tử trong mảng và trả về vị trí của nó (vị trí đầu tiên). lastIndexOf() tìm kiếm từ cuối mảng và trả về vị trí cuối cùng của phần tử.
Dưới đây là một ví dụ minh họa sử dụng indexOf() và lastIndexOf():
const fruits = ["Apple", "Orange", "Banana", "Apple", "Mango"];
// Sử dụng indexOf() để tìm vị trí của phần tử "Apple" (vị trí đầu tiên)
const firstIndex = fruits.indexOf("Apple");
console.log("Index of 'Apple':", firstIndex); // Kết quả: Index of 'Apple': 0
// Sử dụng lastIndexOf() để tìm vị trí cuối cùng của phần tử "Apple"
const lastIndex = fruits.lastIndexOf("Apple");
console.log("Last Index of 'Apple':", lastIndex); // Kết quả: Last Index of 'Apple': 3Trong mảng fruits, “Apple” xuất hiện ở vị trí đầu tiên (index 0) và cũng xuất hiện ở vị trí thứ tư (index 3). Do đó, indexOf("Apple") trả về vị trí đầu tiên (0) và lastIndexOf("Apple") trả về vị trí cuối cùng (3).
find() và findIndex()
find() trả về giá trị của phần tử đầu tiên trong mảng thoả mãn điều kiện kiểm tra. findIndex() trả về chỉ số của phần tử đầu tiên thoả mãn điều kiện kiểm tra.
Dưới đây là một ví dụ minh họa sử dụng find() và findIndex():
const numbers = [10, 20, 30, 40, 50];
// Sử dụng find() để tìm giá trị đầu tiên lớn hơn 30
const foundValue = numbers.find(function (value) {
return value > 30;
});
console.log("First value > 30:", foundValue); // Kết quả: First value > 30: 40
// Sử dụng findIndex() để tìm chỉ số của phần tử đầu tiên lớn hơn 30
const foundIndex = numbers.findIndex(function (value) {
return value > 30;
});
console.log("Index of first value > 30:", foundIndex); // Kết quả: Index of first value > 30: 3Trong ví dụ này, find() được sử dụng để tìm giá trị đầu tiên lớn hơn 30 trong mảng numbers và findIndex() được sử dụng để tìm chỉ số của phần tử đầu tiên thoả mãn điều kiện kiểm tra (lớn hơn 30).
Array.from(), Array.keys(), Array.entries()
Array.from() tạo ra một mảng từ một đối tượng có thuộc tính độ dài hoặc một đối tượng có thể lặp.
// Sử dụng Array.from() để chuyển đổi một chuỗi thành một mảng
const str = "Hello";
const strArray = Array.from(str);
console.log(strArray); // ["H", "e", "l", "l", "o"]Array.keys() trả về một đối tượng iterator với các chỉ số của mảng.
const fruits = ["Apple", "Banana", "Orange"];
// Sử dụng Array.keys() để lấy một đối tượng iterator với các chỉ số của mảng
const keys = fruits.keys();
// Duyệt qua iterator và in ra các chỉ số
for (let key of keys) {
console.log(key); // 0, 1, 2
}Array.entries() trả về một đối tượng iterator với cặp khóa/giá trị của mảng.
const fruits = ["Apple", "Banana", "Orange"];
// Sử dụng Array.entries() để lấy một đối tượng iterator với cặp khóa/giá trị của mảng
const entries = fruits.entries();
// Duyệt qua iterator và in ra các cặp khóa/giá trị
for (let [index, value] of entries) {
console.log(index, value);
// 0 "Apple"
// 1 "Banana"
// 2 "Orange"
}Trong các ví dụ trên, Array.from() được sử dụng để tạo mảng từ một chuỗi. Array.keys() và Array.entries() được sử dụng để lấy các chỉ số và cặp khóa/giá trị từ mảng.
Array.includes()
Array.includes() kiểm tra xem một phần tử có tồn tại trong mảng hay không.
Dưới đây là một ví dụ về cách sử dụng Array.includes() để kiểm tra xem một phần tử có tồn tại trong mảng hay không:
const numbers = [1, 2, 3, 4, 5];
// Kiểm tra xem số 3 có tồn tại trong mảng không
const isNumberThreePresent = numbers.includes(3);
// In kết quả
console.log(isNumberThreePresent); // true
// Kiểm tra xem số 8 có tồn tại trong mảng không
const isNumberEightPresent = numbers.includes(8);
// In kết quả
console.log(isNumberEightPresent); // falseTrong ví dụ trên, Array.includes() được sử dụng để kiểm tra xem số 3 và số 8 có tồn tại trong mảng numbers hay không. Kết quả được in ra là true cho số 3 và false cho số 8.
Spread (…)
Toán tử ... (spread) mở rộng một iterable (như một mảng) thành các phần tử đơn lẻ.
Dưới đây là một ví dụ về cách sử dụng toán tử spread (...) để mở rộng một iterable (như một mảng) thành các phần tử đơn lẻ:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// Mở rộng mảng arr1 và arr2 thành một mảng mới
const combinedArray = [...arr1, ...arr2];
// In kết quả
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]Trong ví dụ trên, toán tử spread (...) được sử dụng để mở rộng các phần tử của arr1 và arr2 thành một mảng mới được gọi là combinedArray. Mảng mới này bao gồm tất cả các phần tử của arr1 theo sau bởi tất cả các phần tử của arr2.
