Trong JavaScript, mảng (array) là một cấu trúc dữ liệu rất quan trọng, giúp lưu trữ nhiều giá trị trong một biến duy nhất. Mảng được sử dụng rất phổ biến trong việc xử lý dữ liệu. Để giúp lập trình viên thao tác và làm việc với mảng hiệu quả, JavaScript cung cấp một loạt các phương thức (methods) được tích hợp sẵn.
Trong bài viết này, chúng ta sẽ khám phá các methods phổ biến với mảng trong JavaScript, cùng với ví dụ chi tiết cho từng phương thức.
1. push() – Thêm Phần Tử Vào Cuối Mảng
Phương thức push() được sử dụng để thêm một hoặc nhiều phần tử vào cuối của mảng và trả về độ dài mới của mảng sau khi thêm phần tử.
Cú pháp:
array.push(element1, ..., elementN)
Ví dụ:
let fruits = ['apple', 'banana'];
fruits.push('orange', 'mango');
console.log(fruits);
// Output: ['apple', 'banana', 'orange', 'mango']
Trong ví dụ trên, mảng fruits ban đầu có hai phần tử là ‘apple’ và ‘banana’. Khi sử dụng phương thức push(), chúng ta thêm hai phần tử mới là ‘orange’ và ‘mango’ vào cuối mảng. Kết quả là mảng sau khi thêm sẽ là [‘apple’, ‘banana’, ‘orange’, ‘mango’].
2. pop() – Xóa Phần Tử Cuối Mảng
Phương thức pop() xóa phần tử cuối cùng trong mảng và trả về phần tử bị xóa. Mảng ban đầu sẽ bị thay đổi.
Cú pháp:
array.pop()
Ví dụ:
let fruits = ['apple', 'banana', 'orange']; let lastFruit = fruits.pop(); console.log(fruits); // Output: ['apple', 'banana'] console.log(lastFruit); // Output: 'orange'
Trong ví dụ này, phương thức pop() xóa phần tử cuối cùng là ‘orange’ và trả về phần tử vừa bị xoá. Mảng còn lại sau khi xóa là [‘apple’, ‘banana’].
3. shift() – Xóa Phần Tử Đầu Tiên Của Mảng
Phương thức shift() loại bỏ phần tử đầu tiên trong mảng và trả về phần tử đó. Các phần tử còn lại sẽ được dịch chuyển về phía trước.
Cú pháp:
array.shift()
Ví dụ:
let fruits = ['apple', 'banana', 'orange']; let firstFruit = fruits.shift(); console.log(fruits); // Output: ['banana', 'orange'] console.log(firstFruit); // Output: 'apple'
Phương thức shift() xóa phần tử đầu tiên là ‘apple’ và trả về phần tử vừa bị xoá. Mảng còn lại sau khi xóa là [‘banana’, ‘orange’].
4. unshift() – Thêm Phần Tử Vào Đầu Mảng
Phương thức unshift() thêm một hoặc nhiều phần tử vào đầu mảng và trả về độ dài mới của mảng.
Cú pháp:
array.unshift(element1, ..., elementN)
Ví dụ:
let fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits);
// Output: ['apple', 'banana', 'orange']
Phương thức unshift() thêm phần tử ‘apple’ vào đầu mảng. Kết quả là mảng mới sẽ là [‘apple’, ‘banana’, ‘orange’].
5. splice() – Thêm, Xóa Hoặc Thay Thế Phần Tử Trong Mảng
Phương thức splice() có thể được sử dụng để thêm, xóa hoặc thay thế phần tử từ một vị trí cụ thể trong mảng. Nó trả về các phần tử đã bị xóa.
Cú pháp:
array.splice(start, deleteCount, item1, ..., itemN)
Ví dụ xóa phần tử:
let fruits = ['apple', 'banana', 'orange', 'mango']; fruits.splice(2, 1); console.log(fruits); // Output: ['apple', 'banana', 'mango']
Ví dụ thêm phần tử:
let fruits = ['apple', 'banana', 'mango']; fruits.splice(2, 0, 'orange'); console.log(fruits); // Output: ['apple', 'banana', 'orange', 'mango']
Phương thức splice() được sử dụng để thêm phần tử ‘orange’ vào vị trí thứ 2 trong mảng hoặc xóa phần tử ‘orange’ khỏi vị trí thứ 2 tùy theo giá trị deleteCount.
6. slice() – Trích Xuất Một Phần Của Mảng
Phương thức slice() trả về một phần của mảng, bắt đầu từ start và kết thúc trước end. Phương thức này không thay đổi mảng gốc.
Cú pháp:
array.slice(start, end)
Ví dụ:
let fruits = ['apple', 'banana', 'orange', 'mango']; let citrus = fruits.slice(1, 3); console.log(citrus); // Output: ['banana', 'orange']
Phương thức slice() trích xuất một mảng con từ vị trí 1 đến 3 (không bao gồm vị trí 3) trong mảng fruits. Kết quả là mảng [‘banana’, ‘orange’].
7. concat() – Nối Hai Hoặc Nhiều Mảng
Phương thức concat() dùng để nối hai hoặc nhiều mảng với nhau và trả về mảng mới.
Cú pháp:
array1.concat(array2, array3, ...)
Ví dụ:
let fruits = ['apple', 'banana']; let moreFruits = ['orange', 'mango']; let allFruits = fruits.concat(moreFruits); console.log(allFruits); // Output: ['apple', 'banana', 'orange', 'mango']
Phương thức concat() nối hai mảng fruits và moreFruits, tạo thành mảng mới [‘apple’, ‘banana’, ‘orange’, ‘mango’].
8. indexOf() – Tìm Vị Trí Của Phần Tử
Phương thức indexOf() trả về vị trí của phần tử đầu tiên xuất hiện trong mảng. Nếu phần tử không tồn tại, nó trả về -1.
Cú pháp:
array.indexOf(element, start)
Ví dụ:
let fruits = ['apple', 'banana', 'orange'];
let index = fruits.indexOf('banana');
console.log(index);
// Output: 1
Phương thức indexOf() tìm phần tử ‘banana’ và trả về vị trí của nó là 1 (vị trí tính từ 0).
9. includes() – Kiểm Tra Sự Tồn Tại Của Phần Tử
Phương thức includes() kiểm tra xem phần tử có tồn tại trong mảng hay không và trả về true hoặc false.
Cú pháp:
array.includes(element, start)
Ví dụ:
let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana'));
// Output: true
console.log(fruits.includes('grape'));
// Output: false
Phương thức includes() trả về true nếu phần tử ‘banana’ tồn tại trong mảng, và false nếu phần tử ‘grape’ không tồn tại.
10. forEach() – Duyệt Qua Từng Phần Tử Trong Mảng
Phương thức forEach() thực thi một hàm trên mỗi phần tử của mảng.
Cú pháp:
array.forEach(function(currentValue, index, array) {
// Code thực thi cho mỗi phần tử
})
Ví dụ:
let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(item, index) {
console.log(index + ': ' + item);
});
// Output:
// 0: apple
// 1: banana
// 2: orange
Phương thức forEach() duyệt qua từng phần tử của mảng fruits và in ra vị trí của chúng cùng với giá trị tương ứng.
11. map() – Tạo Mảng Mới Bằng Cách Biến Đổi Các Phần Tử
Phương thức map() tạo ra một mảng mới từ kết quả của việc gọi một hàm trên từng phần tử của mảng cũ.
Cú pháp:
array.map(function(currentValue, index, array) {
// Code biến đổi
})
Ví dụ:
let numbers = [1, 2, 3, 4];
let squares = numbers.map(function(number) {
return number * number;
});
console.log(squares);
// Output: [1, 4, 9, 16]
Phương thức map() trả về mảng mới squares với các phần tử là bình phương của các số trong mảng numbers.
12. filter() – Lọc Các Phần Tử Dựa Trên Điều Kiện
Phương thức filter() tạo ra một mảng mới với các phần tử thỏa mãn điều kiện của một hàm được cung cấp.
Cú pháp:
array.filter(function(currentValue, index, array) {
// Điều kiện kiểm tra
})
Ví dụ:
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers);
// Output: [2, 4, 6]
Phương thức filter() trả về mảng mới chỉ chứa các số chẵn từ mảng numbers.
13. reduce() – Tính Toán Một Giá Trị Duy Nhất Từ Mảng
Phương thức reduce() thực thi một hàm trên từng phần tử của mảng để tạo ra một giá trị duy nhất (ví dụ: tính tổng của các phần tử).
Cú pháp:
array.reduce(function(accumulator, currentValue, index, array) {
// tính toán
}, initialValue)
Ví dụ:
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(total, number) {
return total + number;
}, 0);
console.log(sum);
// Output: 10
Phương thức reduce() cộng dồn tất cả các phần tử của mảng numbers, bắt đầu từ giá trị ban đầu là 0, và kết quả trả về là 10.
Kết luận
Mảng trong JavaScript là một công cụ mạnh mẽ và linh hoạt để lưu trữ và thao tác với dữ liệu. Các phương thức phổ biến như push(), pop(), map(), filter() và reduce() giúp lập trình viên làm việc với mảng dễ dàng và hiệu quả hơn. Nắm vững các phương thức này sẽ giúp bạn xử lý dữ liệu một cách dễ dàng và tối ưu hơn trong các dự án JavaScript của mình.