8.1 Phương thức forEach()
Các phương thức duyệt qua mảng trong JavaScript cung cấp công cụ mạnh mẽ để làm việc với mảng, cho phép thực hiện
các thao tác khác nhau trên các phần tử của chúng. Trong chủ đề này, chúng ta sẽ xem xét các phương thức duyệt qua chính, bao gồm
forEach(), map(), filter(), reduce(), some(),
every(), find(), và findIndex().
Phương thức forEach() thực hiện hàm được chỉ định một lần cho mỗi phần tử của mảng. Phương thức này không trả về mảng mới và không bị gián đoạn.
Cú pháp:
array.forEach(function(element, index, array) {
// phần thân hàm
});
Ví dụ:
Phương thức forEach() đi qua từng phần tử của mảng numbers[] và xuất ra chỉ mục và giá trị của nó.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
console.log(`Index: ${index}, Value: ${number}`);
});
// Kết quả:
// Index: 0, Value: 1
// Index: 1, Value: 2
// Index: 2, Value: 3
// Index: 3, Value: 4
// Index: 4, Value: 5
8.2 Phương thức map()
Phương thức map() tạo ra một mảng mới với kết quả của việc gọi hàm chỉ định cho từng phần tử của mảng.
Cú pháp:
const newArray = array.map(function(element, index, array) {
// phần thân hàm
return giá_trị_mới;
});
Hàm chuyển đổi cũng có thể được viết dưới dạng hàm mũi tên:
const newArray = array.map((element, index, array) => giá_trị_mới);
Ví dụ:
Phương thức map() tạo ra một mảng mới squared[], chứa các số bình phương từ mảng numbers[].
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(number => number * number);
console.log(squared); // [1, 4, 9, 16, 25]
8.3 Phương thức filter()
Phương thức filter() tạo ra một mảng mới với tất cả các phần tử đáp ứng điều kiện được đặt ra trong hàm truyền vào.
const newArray = array.filter(function(element, index, array) {
// phần thân hàm
return điều_kiện;
});
Hàm lọc cũng có thể được viết dưới dạng hàm mũi tên:
const newArray = array.filter((element, index, array) => điều_kiện);
Ví dụ:
Phương thức filter() tạo ra một mảng mới evenNumbers[], chứa chỉ những số chẵn từ mảng numbers[].
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
8.4 Phương thức reduce()
Phương thức reduce() áp dụng một hàm vào một accumulator và từng phần tử trong mảng (từ trái sang phải), giảm nó thành một giá trị duy nhất.
Cú pháp:
const result = array.reduce(function(accumulator, current, index, array) {
// phần thân hàm
return giá_trị_mới_của_accumulator;
}, initialValue);
Hàm accumulator cũng có thể được viết dưới dạng hàm mũi tên:
const result = array.reduce((accumulator, current, index, array) =>
giá_trị_mới, initialValue
);
Ví dụ:
Phương thức reduce() giảm mảng numbers[] thành một giá trị duy nhất sum, tổng hợp tất cả các phần tử của mảng.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, number) => acc + number, 0);
console.log(sum); // 15
8.5 Phương thức some()
Phương thức some() kiểm tra xem ít nhất một phần tử trong mảng có thỏa mãn điều kiện được đặt ra trong
hàm truyền vào hay không. Trả về true hoặc false.
Cú pháp:
const result = array.some(function(element, index, array) {
// phần thân hàm
return điều_kiện;
});
Hàm kiểm tra cũng có thể được viết dưới dạng hàm mũi tên:
const result = array.some((element, index, array) => điều_kiện);
Ví dụ:
Phương thức some() kiểm tra xem trong mảng numbers[] có ít nhất một số chẵn không và trả về true.
const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true
8.6 Phương thức every()
Phương thức every() kiểm tra xem tất cả các phần tử trong mảng có thỏa mãn điều kiện được đặt ra trong hàm truyền vào hay không. Trả về true hoặc false.
Cú pháp:
const result = array.every(function(element, index, array) {
// phần thân hàm
return điều_kiện;
});
Hàm kiểm tra cũng có thể được viết dưới dạng hàm mũi tên:
const result = array.every((element, index, array) => điều_kiện);
Ví dụ:
Phương thức every() kiểm tra xem tất cả các phần tử trong mảng numbers[] có dương không và trả về true.
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(number => number > 0);
console.log(allPositive); // true
8.7 Phương thức find()
Phương thức find() trả về phần tử đầu tiên của mảng thỏa mãn điều kiện được đặt ra trong hàm truyền vào.
Nếu không có phần tử nào thỏa mãn điều kiện đó, phương thức trả về undefined.
Cú pháp:
const result = array.find(function(element, index, array) {
// phần thân hàm
return điều_kiện;
});
Hàm kiểm tra cũng có thể được viết dưới dạng hàm mũi tên:
const result = array.find((element, index, array) => điều_kiện);
Ví dụ:
Phương thức find() trả về số chẵn đầu tiên từ mảng numbers[].
const numbers = [1, 2, 3, 4, 5];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 2
8.8 Phương thức findIndex()
Phương thức findIndex() trả về chỉ số của phần tử đầu tiên trong mảng thỏa mãn điều kiện được đặt ra trong hàm truyền vào.
Nếu không có phần tử nào thỏa mãn điều kiện đó, phương thức trả về -1.
Cú pháp:
const result = array.findIndex(function(element, index, array) {
// phần thân hàm
return điều_kiện;
});
Hàm kiểm tra cũng có thể được viết dưới dạng hàm mũi tên:
const result = array.findIndex((element, index, array) => điều_kiện);
Ví dụ:
Phương thức findIndex() trả về chỉ số của số chẵn đầu tiên trong mảng numbers[].
const numbers = [1, 2, 3, 4, 5];
const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenIndex); // 1
GO TO FULL VERSION