JavaScript là một ngôn ngữ mạnh mẽ hỗ trợ rất nhiều hàm xử lý sẵn sàng đáp ứng các nhu cầu công việc. Sau đây mình xin giới thiệu đến các bạn các hàm xử lý mảng thông dụng trong JavaScript, lưu ý những bạn nào mới học lập trình chưa có kiến thức về function thì nên học về nó trước khi đọc bài viết này nhé!!!

 

1. map

Là một phương thức cho phép bạn áp dụng một hàm đến mỗi phần tử trong mảng và trả về một mảng mới với các kết quả tương ứng.

Ví dụ:

let numbers = [1, 2, 3, 4, 5];
let squareNumbers = numbers.map(function(num) {
  return num * num;
});
console.log(squareNumbers); 
// Output: [1, 4, 9, 16, 25]

Trong ví dụ này, chúng ta đã tạo một mảng numbers với các phần tử 1, 2, 3, 4 và 5. Tiếp theo, chúng ta sử dụng phương thức map() để áp dụng hàm tính bình phương đến mỗi phần tử trong mảng và trả về một mảng mới với các giá trị bình phương.

 

2. filter

Là một hàm xử lý mảng mà nó sẽ tạo ra một mảng mới bằng cách lọc các phần tử từ mảng gốc dựa trên một hàm điều kiện đã cho.

Ví dụ:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); 
// Output: [2, 4, 6, 8]

Trong ví dụ trên, chúng ta đã tạo ra một mảng evenNumbers bằng cách lọc các phần tử trong mảng numbers dựa trên điều kiện number % 2 === 0 (chỉ chọn các số chẵn).

 

3. reduce

Là một hàm xử lý mảng của JavaScript, nó được sử dụng để tổng hợp một mảng thành một giá trị duy nhất. Hàm này có hai tham số, là một hàm callback và giá trị ban đầu.

Ví dụ:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum);  // 15

Trong ví dụ này, hàm reduce() được gọi trên mảng numbers và truyền vào một hàm callback và giá trị ban đầu là 0. Hàm callback sẽ thực hiện phép cộng từng phần tử trong mảng và trả về kết quả cho giá trị tích lũy (accumulator). Khi mảng đã được duyệt hết, giá trị tích lũy cuối cùng sẽ được trả về bởi hàm reduce().

 

4. forEach

Là một phương thức cho phép lặp qua từng phần tử trong mảng và thực hiện một hành động cho mỗi phần tử. Nó gần tương tự với vòng lặp for.

Ví dụ:

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

numbers.forEach(function(number) {
  console.log(number);
});

// Output:
// 1
// 2
// 3
// 4
// 5

Trong ví dụ này, hàm forEach được gọi trên mảng numbers và một hàm xử lý được truyền vào như tham số. Hàm xử lý này sẽ được thực hiện cho mỗi phần tử trong mảng, và giá trị của phần tử đó được truyền vào như tham số number.

 

5. some

Hàm some trong JavaScript là một hàm xử lý mảng cung cấp cho bạn một cách để kiểm tra xem một phần tử có trong mảng này có thỏa mãn điều kiện nào đó hay không. Nó trả về true hoặc false dựa trên kết quả của kiểm tra.

Ví dụ:

let numbers = [1, 2, 3, 4, 5];
let result = numbers.some(function(element) {
  return element > 4;
});
console.log(result); // true

Trong ví dụ trên, hàm some sẽ trả về true vì có ít nhất một phần tử trong mảng numbers lớn hơn 4.

 

6. every

Là một phương thức xác định xem tất cả các phần tử trong mảng có thỏa mãn điều kiện nào đó hay không. Nếu tất cả các phần tử trong mảng đều thỏa mãn điều kiện, nó sẽ trả về giá trị true, còn không nó sẽ trả về false.

Ví dụ:

let numbers = [1, 2, 3, 4, 5];
let allPositive = numbers.every(function(value) {
  return value > 0;
});
console.log(allPositive); // true

let someNegative = numbers.every(function(value) {
  return value < 0;
});
console.log(someNegative); // false

Trong ví dụ trên, hàm every được sử dụng để xác định xem tất cả các phần tử trong mảng numbers có dương hay không. Khi gọi hàm allPositive, nó sẽ trả về true vì tất cả các phần tử trong mảng đều là số dương. Tuy nhiên, khi gọi hàm someNegative, nó sẽ trả về false vì chưa có phần tử nào trong mảng là số âm.

 

7. find

Là một hàm xử lý mảng được sử dụng để tìm kiếm giá trị đầu tiên trong mảng thỏa mãn điều kiện được cung cấp trong hàm callback. Hàm này sẽ trả về giá trị đầu tiên tìm được hoặc trả về undefined nếu không tìm thấy giá trị nào thỏa điều kiện.

Ví dụ:

let numbers = [1, 2, 3, 4, 5, 6];
let firstOdd = numbers.find(function(element) {
  return element % 2 !== 0;
});

console.log(firstOdd); // 1

Trong ví dụ trên, hàm find() được sử dụng để tìm giá trị đầu tiên trong mảng numbers mà chia hết cho 2 ra kết quả khác 0 (tức là số lẻ). Hàm trả về giá trị 1, là giá trị đầu tiên trong mảng mà thỏa mãn điều kiện.

 

8. findIndex

Là một phương thức trả về vị trí đầu tiên của phần tử trong mảng đủ điều kiện theo hàm truyền vào. Nếu không tìm thấy phần tử nào phù hợp, hàm sẽ trả về giá trị -1.

Ví dụ:

let numbers = [1, 4, 6, 9, 12, 13, 15];
let firstEven = numbers.findIndex(function(element) {
  return element % 2 == 0;
});
console.log(firstEven); // Output: 0

Trong ví dụ trên, chúng ta đang tìm vị trí của phần tử đầu tiên chia hết cho 2 trong mảng numbers. Kết quả trả về là 0, tức là phần tử đầu tiên trong mảng là số chẵn.

Lưu ý các cặp hàm dễ bị lầm lẫn với nhau:

Trong các hàm xử lý mảng array, có một số hàm có thể dễ bị lầm lẫn với nhau, vì chúng có các tính năng tương tự nhau hoặc có thể trả về kết quả tương tự. Một số hàm như vậy là:

- map và reduce: Cả hai hàm đều cho phép bạn xử lý từng phần tử của mảng, tuy nhiên, map sẽ trả về một mảng mới với các giá trị đã được chỉnh sửa, trong khi reduce sẽ trả về một giá trị duy nhất.

- filter và find: Cả hai hàm đều cho phép bạn tìm kiếm các phần tử trong mảng, tuy nhiên filter sẽ trả về một mảng mới chứa các phần tử thỏa mãn điều kiện, trong khi find sẽ trả về giá trị đầu tiên thỏa mãn điều kiện.