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 }]
3. reduce()
Giảm một mảng xuống còn một giá trị duy nhất bằng cách áp dụng một hàm cho từng phần tử trong mảng, trả về một giá trị duy nhất.
Syntax
array.reduce((accumulator, currentValue, index, array) => {
// logic xử lý
}, initialValue);
- accumulator: Biến tích lũy, lưu trữ giá trị trả về từ lần gọi hàm trước đó.
- currentValue: Phần tử hiện tại đang được xử lý.
- index (option): Chỉ số của phần tử hiện tại.
- array (option): Mảng gốc.
- initialValue: Giá trị khởi tạo cho accumulator.
Example
// Tính tổng các giá trị của các phần tử trong mảng
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
// Chuyển mảng 2 chiều thành mảng 1 chiều
const data = [[1, 2], [3, 4]];
const flat = data.reduce((acc, curr) => acc.concat(curr), []);
console.log(flat); // [1, 2, 3, 4]
// Nhóm các đối tượng theo thuộc tính
const students = [
{ name: 'Alice', grade: 'A' },
{ name: 'Bob', grade: 'B' },
{ name: 'Alice', grade: 'B' }
];
const grouped = students.reduce((acc, student) => {
if (!acc[student.name]) {
acc[student.name] = [];
}
acc[student.name].push(student.grade);
return acc;
}, {});
// Create new array
[
"Alice": ['A', 'B']
"Bob": ['B']
]
4. find()
Cho phép bạn tìm kiếm và trả về phần tử đầu tiên trong mảng thỏa mãn điều kiện trong hàm callback. Nếu không tìm thấy phần tử nào thỏa mãn điều kiện, find() sẽ trả về undefined. Sử dụng find() khi bạn cần tìm một phần tử duy nhất trong mảng mà thỏa mãn một điều kiện cụ thể. Nếu bạn cần tất cả các phần tử thỏa mãn điều kiện, hãy sử dụng filter().
Syntax
array.find(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 (không bắt buộc).
+ array: Mảng mà phần tử hiện tại thuộc về (không bắt buộc).
- thisArg: Giá trị để sử dụng làm this khi gọi hàm callback (không bắt buộc).
Example
// Tìm phần tử đầu tiên lớn hơn 10 trong mảng
const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(element => element > 10);
console.log(found); // 12
// Tìm user có id = 2
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Doe' }
];
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jane' }
5. some()
Được sử dụng để kiểm tra xem có ít nhất 1 phần tử trong mảng thoả mãn điều kiện của hàm callback, nếu có trả về true, ngược lại trả về false. Hàm some sẽ return true ngay khi tìm thấy phần từ đầu tiên thoả mãn điều kiên.
Syntax
array.some(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ý trong mảng.
+ index (tùy chọn): Chỉ số của phần tử hiện tại.
+ array (tùy chọn): Mảng mà hàm some đang được gọi.
+ thisArg (tùy chọn): Giá trị để sử dụng làm this khi gọi hàm callback.
Example
// Kiểm tra xem trong mảng có số chẵn hay không?
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
6. every()
Hàm every được sử dụng để kiểm tra tất cả các phần tử trong mảng thoả mãn điều kiện, nếu đúng trả về true, sai thì return false.
Syntax
array.every(callback(element, index, array), thisArg)
Example
// Kiểm tra các phần tử trong mảng đều là số chẵn
const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true
7. forEach()
Dùng để lặp các phần tử trong mảng. Nó không trả về giá trị nào (undefined) và không thể dừng lại giữa chừng bằng cách sử dụng break hoặc return như các vòng lặp khác.
Syntax
array.forEach(function(currentValue, index, array) {
// Thực hiện hành động với currentValue
}, thisArg);
Example
// Lặp mảng số
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number);
});
// Lặp và truy cập phần tử gốc
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index, array) => {
console.log(`Current: ${number}, Previous: ${array[index - 1]}`);
});
8. concat()
Dùng để gộp 2 hay nhiều mảng thành một mảng mới, không làm thay đổi mảng gốc.
Syntax
array1.concat(array2, array3, ..., arrayX)
Example
// Gộp 2 mảng
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const children = arr1.concat(arr2);
console.log(children); // Kết quả: ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]
// Nối các giá trị vào mảng
const arr1 = ["Cecilie", "Lone"];
const alphaNumeric = arr1.concat(1, [2, 3]);
console.log(alphaNumeric); // Kết quả: ["Cecilie", "Lone", 1, 2, 3]
slice()
Dùng để lấy các phần tử trong mảng. Hàm sẽ trả về mảng mới, không làm thay đổi mảng gốc.
Syntax
array.slice(start, end);
- start: Vị trí bắt đầu trích xuất (chỉ số 0), mặc đinh là 0 - end: Vị trí kết thúc trích xuất (không bao gồm), mặc định bằng số phần tử trong mảng.
Example
// Lấy các phần tử từ vị trí 1 đến 2
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ['Orange', 'Lemon']
// Lấy 2 phần tử cuối mảng
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const lastTwo = fruits.slice(-2);
console.log(lastTwo); // ['Apple', 'Mango']
// Lấy các phần tử từ vị trí 2 đến cuối mảng
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
const tropical = fruits.slice(2);
console.log(tropical); // ['Orange', 'Mango', 'Pineapple']
// Lấy các element từ vị trị 1 đên cuối mảng -1
const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
const sliceExample = fruits.slice(1, -1);
console.log(sliceExample); // ['Banana', 'Orange', 'Mango']
10. splice()
Dùng để thêm mới hoặc xoá phần tử trong mảng theo vị trí, hàm splice sẽ thay đổi mảng gốc. Nó không tạo ra mảng mới
Syntax
array.splice(start, deleteCount, item1, item2, ...)
- start: Vị trí bắt đầu để thay đổi mảng (chỉ số, bắt đầu từ 0). - deleteCount: Số lượng phần tử cần xóa từ vị trí bắt đầu. Nếu không chỉ định, tất cả các phần tử từ vị trí bắt đầu sẽ bị xóa. - item1, item2, ...: Các phần tử mới cần thêm vào mảng.
Example
// Xóa 1 phần tử tại vị trí số 2
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1);
console.log(fruits); // ["Banana", "Orange", "Mango"]
// Thêm "Apple" vào ví trí thứ 2 mà không xóa phần tử nào
const fruits = ["Banana", "Orange", "Mango"];
fruits.splice(2, 0, "Apple");
console.log(fruits); // ["Banana", "Orange", "Apple", "Mango"]
// Xóa 2 phần tử từ vị trí 1 và thêm "Lemon", "Kiwi"
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1, 2, "Lemon", "Kiwi");
console.log(fruits); // ["Banana", "Lemon", "Kiwi", "Mango"]
// Thêm "courses" và "profile" vào trước "contact"
const sidebarMenu = ['home', 'about', 'contact'];
sidebarMenu.splice(2, 0, 'courses', 'profile');
console.log(sidebarMenu); // ['home', 'about', 'courses', 'profile', 'contact']
11. includes()
Syntax
Kiểm tra xem một mảng có chứa một giá trị cụ thể hay không. Phương thức này trả về true nếu giá trị được tìm thấy và false nếu không.
array.includes(searchElement, fromIndex);
searchElement: Giá trị mà bạn muốn tìm trong mảng.
fromIndex: (Tùy chọn) Vị trí bắt đầu tìm kiếm trong mảng. Mặc định là 0.
Example
let A = [1, 2, 3, 4, 5];
let result = A.includes(2);
console.log(result); // true
let names = ['gfg', 'cse', 'geeks', 'portal'];
let result = names.includes('cat');
console.log(result); // false
12. indexOf()
Sử dụng để tìm chỉ số (index) của một phần tử trong mảng. Nếu phần tử không tồn tại trong mảng, phương thức này sẽ trả về -1
Syntax
array.indexOf(searchElement, fromIndex)
- searchElement: Phần tử cần tìm trong mảng.
- fromIndex (tùy chọn): Chỉ số bắt đầu tìm kiếm. Nếu không được chỉ định, tìm kiếm sẽ bắt đầu từ chỉ số 0.
Example
// Tìm index của phần tử trong mảng
const array = [2, 9, 9];
console.log(array.indexOf(2)); // 0
console.log(array.indexOf(7)); // -1
console.log(array.indexOf(9, 2)); // 2
// Tìm các index của phần tử có giá trị a, trong mảng.
const indices = [];
const array = ["a", "b", "a", "c", "a", "d"];
const element = "a";
let idx = array.indexOf(element);
while (idx !== -1) {
indices.push(idx);
idx = array.indexOf(element, idx + 1);
}
console.log(indices); // [0, 2, 4]
13. lastIndexOf()
Syntax
array.lastIndexOf(searchElement)
Example
const numbers = [1, 2, 3, 4, 3];
const index = numbers.lastIndexOf(3);
console.log(index); // 4
14. join()
Chuyển các phần tử trong mảng thành chuỗi.
Syntax
array.join(separator)
Example
const words = ['Hello', 'world'];
const sentence = words.join(' ');
console.log(sentence); // "Hello world"
15. reverse()
Dùng để đảo ngược một mảng trong JavaScript. Nó sẽ thay đổi mảng hiện tại, không tạo mảng mới.
Syntax
array.reverse()
Example
// Thay đổi mảng gốc
const array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // Kết quả: [5, 4, 3, 2, 1]
// Tạo mảng mới và reverse
const originalArray = [1, 2, 3, 4, 5];
const reversedArray = originalArray.slice().reverse();
console.log(originalArray); // Kết quả: [1, 2, 3, 4, 5]
console.log(reversedArray); // Kết quả: [5, 4, 3, 2, 1]
Tổng kết
Trên đây là một số phương thức trong javascript hay dùng đề xử lý mảng. Hi vọng bài viết sẽ hữu ích cho mọi người. Thank for reading...Tài liệu tham khảo
https://dev.to/dipakahirav/15-javascript-array-functions-you-should-master-as-a-senior-dev-54gg
Author
