Các phương pháp duyệt mảng trong JavaScript

Có nhiều phương pháp để duyệt qua một mảng trong JavaScript. Chúng ta sẽ bắt đầu với các phương pháp cổ điển và sau đó tới các phương pháp mới hơn được bổ sung vào JavaScript gần đây.

Vòng lặp while

let currentIndex = 0;
const array = [1, 2, 3, 4, 5, 6];

while (currentIndex < array.length) {
  console.log(array[currentIndex]);
  currentIndex++;
}
/*
1
2
3
4
5
6
*/

Vòng lặp for

const array = [1, 2, 3, 4, 5, 6];

for (let currentIndex = 0; index < array.length; currentIndex++) {
  console.log(array[currentIndex]);
}
/*
1
2
3
4
5
6
*/

Vòng lặp (phương thức) forEach

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

array.forEach((currentValue, currentIndex, array) => {
  console.log(`At index ${currentIndex} in array ${array} the value is ${currentValue}`);
});
/*
"At index 0 in array 1,2,3,4,5 the value is 1"
"At index 1 in array 1,2,3,4,5 the value is 2"
"At index 2 in array 1,2,3,4,5 the value is 3"
"At index 3 in array 1,2,3,4,5 the value is 4"
"At index 4 in array 1,2,3,4,5 the value is 5"
*/

Phương thức map

Sử dụng forEach khá hữu dụng. Tuy nhiên nó không trả về một mảng mới mà chúng ta cần trong một số trường hợp. Phương thức map giải quyết vấn đề này bằng cách gọi một hàm callback với mọi phần tử của mảng và trả về phần tử tương ứng trong mảng mới được trả về:

const array = [1, 2, 3, 4, 5, 6];
const square = x => Math.pow(x, 2);

const squares = array.map(square);

console.log(`Original array: ${array}`);
console.log(`Squared array: ${squares}`);
/*
"Original array: 1,2,3,4,5,6"
"Squared array: 1,4,9,16,25,36"
*/

Cú pháp đẩy đủ của map là:

array.map(function(currentValue, currentIndex, array) {
  // trả về phần tử trong mảng mới
})

Trong đó currentIndex currentValue là các tham số không bắt buộc.

Phương thức reduce

Giả sử có mảng: array = [1, 2, 3, 4, 5, 6]. Giả sử cần tính tổng của các phần tử trong mảng này.

Bạn có thể sử dụng vòng lặp cổ điển như while hoặc for:

const array = [1, 2, 3, 4, 5, 6];
let currentIndex = 0;
let arraySum = 0;

while (currentIndex < array.length) {
  arraySum += array[currentIndex];
  currentIndex++;
}

console.log(`The sum of array: ${array} is ${arraySum}`);
// "The sum of array: 1,2,3,4,5,6 is 21"

Hoặc có thể dùng phương thức forEach:

const array = [1, 2, 3, 4, 5, 6];
let arraySum = 0;

array.forEach((currentValue) => {
  arraySum += currentValue;
});

console.log(`The sum of array: ${array} is ${arraySum}`);
// "The sum of array: 1,2,3,4,5,6 is 21"

Tuy nhiên những cách này không trực tiếp trả về tổng của các phần tử trong mảng. Bạn phải dùng một biến ở bên ngoài vòng lặp.

Phương thức reduce giúp giải quyết vấn đề này.

const array = [1, 2, 3, 4, 5, 6];

const arraySum = array.reduce((accumSum, currentValue) => accumSum + currentValue, 0);
console.log(`The sum of array: ${array} is ${arraySum}`);
// "The sum of array: 1,2,3,4,5,6 is 21"

currentValue là phần tử hiện tại của mảng, được duyệt lần lượt từ trái qua phải, accumSum là biến chứa tổng tích lũy. Sau mỗi lần chạy hàm callback accumSum nhận giá trị mới chính là accumSum + currentValue. Tham số thứ hai của reduce là giá trị ban đầu của accumSum (bằng 0).

Quá trình thực thi lệnh trên như sau:

Bước 1:
- accumSum = 0 (giá trị ban đầu)
- currentValue = 1
--> trả về accumSum + currentValue = 0 + 1 = 1
Bước 2:
- accumSum = 1 (giá trị trả về ở Step 1)
- currentValue = 2
--> accumSum + currentValue = 1 + 2 = 3
Bước 3:
- accumSum = 3
- currentValue = 3
--> 6
Bước 4:
- accumSum = 6
- currentValue = 4
--> 10
Bước 5:
- accumSum = 10
- currentValue = 5
--> 15
Bước 6:
- accumSum = 15
- currentValue = 6
-> 21

Giá trị trả về của reduce chính là accumSum sau bước cuối cùng (bằng 21).

Nếu không cung cấp giá trị ban đầu cho accumSum, nó được lấy bằng phần tử đầu tiên, và quá trình bắt đầu từ bước 2, kết quả không thay đổi.

const array = [1, 2, 3, 4, 5, 6];

const arraySum = array.reduce((arraySum, curentValue) => arraySum + curentValue);
console.log(`The sum of array: ${array} is ${arraySum}`);
// const array = [1, 2, 3, 4, 5, 6];

Cú pháp đầy đủ của reduce là:

arr.reduce(function(accumulator, currentValue, currentIndex, array) {
  // trả về giá trị accumulator ở gọi hàm callback sau
});

Phương thức filter

Lọc ra một hoặc nhiều phần tử của mảng thỏa mãn điều kiện nào đó. Các phần tử được trả về trong một mảng.

const array = [1, 2, 3, 4, 5, 6];
const evenArray = array.filter(currentValue => currentValue % 2 === 0);
console.log(`Even numbers in array ${array}: ${evenArray}`);
// "Even numbers in array 1,2,3,4,5,6: 2,4,6"

Phương thức filter nhận một hàm callback, được gọi với mỗi phần tử của mảng, trả về true nếu phần tử thỏa mãn điều kiện.

Cú pháp đầy đủ của filter là:

array.filter(function(currentValue, currentIndex, array, thisArg) {
  // trả về true nếu phần tử hiện tại thỏa điều kiện
});

trong đó thisArg là giá trị this được sử dụng trong hàm callback.

Phương thức every

Đôi khi ta cần kiểm tra xem rất cả phần tử của mảng có đều thỏa mãn một điều kiện nào đó hay không. Chẳng hạn kiểu tra xem mảng array = [1, 2, 3, 4, 5, 6] có mọi phần tử đều nhỏ hơn 7 không?

array.every nhận hàm callback, hàm này được gọi với mỗi phần tử. Nếu hàm này trả về false thì array.every kết thúc ngay và trả về false (tức có một phần tử vi phạm điều kiện).

Nếu mọi lần chạy, callback đều trả về true thì array.every trả về true (tức mọi phần tử đểu thỏa mãn điều kiện).

const array = [1, 2, 3, 4, 5, 6];

const underSeven = x => x < 7;

if (array.every(underSeven)) {
  console.log(`Every element in array is less than 7`);
} else {
  console.log(`At least one element in the array was bigger than 7`);
}
// "Every element in array is less than 7"

Cú pháp đầy đủ của every:

array.every(function(currentValue, currentIndex, array, thisArg) {
  // trả về true nếu phần tử hiện tại thỏa mãn điều kiện
})

Phương thức some

Phương thức some ngược với every trả về true nếu có ít nhất một phần tử thỏa mãn điều kiện. array.some kết thúc ngay và trả về true nếu có một lần chạy hàm callback nào đó trả về true; nó trả về false nếu mọi lần chạy hàm callback đều trả về false.

const array = [1, 2, 3, 4, 5, 6];
const underSeven = x => x > 7;

if (array.some(underSeven)) {
  console.log('At least one element bigger than 7 was found');
} else {
  console.log('No element bigger than 7 was found');
}
// "No element bigger than 7 was found"

Cú pháp đầy đủ của some là:

array.some(function(currentValue, currentIndex, array, thisArg) {
  // trả về true nếu phần tử hiện tại thỏa mãn điều kiện
})

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *