JavaScript Array Functions

Các hàm hay dùng nhất để xử lý dữ liệu dạng mảng trong javascript. Những hàm này cho phép bạn xử lý dữ liệu một cách hiệu quả, clean code, và triển khai các chức năng nâng cao một cách dễ dàng.

1. map()

Hàm map() tạo ra một mảng mới chứa kết quả của việc gọi một hàm đã cho, trên từng phần tử trong mảng gốc.

map() thường được sử dụng để biến đổi dữ liệu trong mảng, như chuyển đổi kiểu dữ liệu hoặc thay đổi cấu trúc của đối tượng.

Cách hoạt động

Không thay đổi mảng gốc: map() tạo ra một mảng mới mà không làm thay đổi mảng ban đầu.
Chạy hàm callback: Hàm callback được gọi cho mỗi phần tử trong mảng, và giá trị trả về của hàm callback sẽ được thêm vào mảng mới.

Syntax

const newArray = array.map((element, index, array) => {
  // Thực hiện một số thao tác với element
  return newValue; // Giá trị mới sẽ được thêm vào newArray
});

- element: Phần tử hiện tại đang được xử lý.
- index (tùy chọn): Chỉ số của phần tử hiện tại.
- array (tùy chọn): Mảng mà map() được gọi trên đó.

Example

// Double các phần tử trong mảng
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Kết quả: [2, 4, 6, 8, 10]

2. filter()

Cho phép bạn lọc các phần tử trong mảng dựa trên một điều kiện nhất định. Hàm này sẽ tạo ra một mảng mới chứa các phần tử mà hàm callback trả về giá trị true. Hàm filter() không thay đổi mảng gốc, nếu không có phần tử nào thỏa mãn điều kiện, nó sẽ trả về một mảng rỗng.

Syntax

const newArray = array.filter(callback(element, index, array), thisArg);

- callback: Hàm được gọi cho mỗi phần tử trong mảng.
Nó nhận ba tham số:
- element: Phần tử hiện tại đang được xử lý.
- index: Chỉ số của phần tử hiện tại.
- array: Mảng gốc mà filter() được gọi.
- thisArg (tùy chọn): Giá trị để sử dụng làm this khi gọi hàm callback.

Example

// Lấy các phần tử lớn hơn 10
const numbers = [5, 10, 15, 20];
   const filteredNumbers = numbers.filter(num => num > 10);
   console.log(filteredNumbers); // [15, 20]

// Lọc các đối tượng theo thuộc tính
const students = [
       { name: "John", age: 18 },
       { name: "Jane", age: 22 },
       { name: "Jim", age: 17 }
   ];
   const adults = students.filter(student => student.age >= 18);
   console.log(adults); // [{ name: "John", age: 18 }, { name: "Jane", age: 22 }]