[JS Basics] Mảng trong JavaScript là gì? Cách sử dụng Array hiệu quả nhất

Mảng (Arrays) là một trong những cấu trúc dữ liệu quan trọng và được sử dụng phổ biến nhất trong JavaScript. Nắm vững về mảng không chỉ giúp bạn lưu trữ và quản lý dữ liệu hiệu quả, mà còn mở ra cánh cửa để xử lý các bài toán phức tạp hơn. Bài viết này sẽ đưa bạn đi từ những khái niệm cơ bản đến các phương thức nâng cao, giúp bạn trở thành một "cao thủ" làm việc với mảng trong JavaScript.

Array là gì? Array trong JavaScript có gì khác biệt?

Về cơ bản, một mảng là một tập hợp có thứ tự của các giá trị. Các giá trị này được gọi là phần tử của mảng. Điểm đặc biệt là các phần tử trong mảng có thể có kiểu dữ liệu khác nhau (ví dụ: số, chuỗi, đối tượng, thậm chí là mảng khác), điều này làm cho mảng trong JavaScript trở nên vô cùng linh hoạt.

• Sự khác biệt với ngôn ngữ khác: Trong nhiều ngôn ngữ lập trình khác, mảng thường có kích thước cố định và chỉ chứa một kiểu dữ liệu duy nhất. JavaScript thì khác, mảng của nó có thể thay đổi kích thước và chứa nhiều kiểu dữ liệu. Đây là một lợi thế lớn, nhưng cũng đòi hỏi bạn phải cẩn thận hơn khi thao tác.

Cách khởi tạo và truy cập Array

Khởi tạo

Có hai cách phổ biến để tạo một mảng:

1. Dùng dấu ngoặc vuông [] (cách được khuyên dùng nhất):

const fruits = ['Táo', 'Cam', 'Xoài']
const numbers = [1, 2, 3, 4, 5]

2. Dùng constructor new Array():

const newArray = new Array('Táo', 'Cam', 'Xoài')
const anotherArray = new Array(5) // Tạo mảng rỗng có 5 phần tử (undefined)

Lưu ý: Cẩn thận khi dùng new Array() với một tham số duy nhất là số, vì nó sẽ tạo ra một mảng rỗng có kích thước tương ứng, thay vì một mảng chứa số đó.

Truy cập

Bạn có thể truy cập các phần tử của mảng bằng cách sử dụng chỉ số (index). Chỉ số trong JavaScript bắt đầu từ 0.

const fruits = ['Táo', 'Cam', 'Xoài']

console.log(fruits[0]) // Output: 'Táo'
console.log(fruits[1]) // Output: 'Cam'

fruits[2] = 'Lê' // Thay đổi giá trị của phần tử thứ 3
console.log(fruits) // Output: ['Táo', 'Cam', 'Lê']

Để biết tổng số phần tử của mảng, bạn dùng thuộc tính length:

console.log(fruits.length) // Output: 3

Các phương thức thao tác Array phổ biến và mạnh mẽ 💪

Đây là phần cốt lõi và quan trọng nhất. Nắm vững các phương thức này sẽ giúp code của bạn trở nên gọn gàng, hiệu quả và dễ đọc hơn rất nhiều.

Thêm và xóa Phần tử

• push(): Thêm một hoặc nhiều phần tử vào cuối mảng.
• pop(): Xóa phần tử ở cuối mảng và trả về phần tử đó.
• unshift(): Thêm một hoặc nhiều phần tử vào đầu mảng.
• shift(): Xóa phần tử ở đầu mảng và trả về phần tử đó.

const array = ['a', 'b']
array.push('c') // array -> ['a', 'b', 'c']
const lastItem = array.pop() // lastItem -> 'c', array -> ['a', 'b']
array.unshift('z') // array -> ['z', 'a', 'b']
const firstItem = array.shift() // firstItem -> 'z', array -> ['a', 'b']

Lặp qua các Phần tử

• for loop truyền thống: Phù hợp khi bạn cần truy cập chỉ số.
• for...of: Lặp qua các giá trị của mảng, cú pháp gọn gàng hơn.
• forEach(): Lặp qua từng phần tử, tiện lợi và hiện đại hơn.

const numbers = [10, 20, 30]

numbers.forEach((number, index) => {
  console.log(`Phần tử thứ ${index} là: ${number}`)
})
// Output:
// Phần tử thứ 0 là: 10
// Phần tử thứ 1 là: 20
// Phần tử thứ 2 là: 30

Các phương thức biến đổi và truy vấn Array

Đây là những "đòn bẩy" giúp bạn xử lý dữ liệu mảng một cách mạnh mẽ.

• map(): Tạo một mảng mới bằng cách áp dụng một hàm lên từng phần tử của mảng ban đầu.

const numbers = [1, 2, 3]
const doubled = numbers.map((x) => x * 2) // doubled -> [2, 4, 6]

• filter(): Tạo một mảng mới chứa các phần tử thỏa mãn một điều kiện.

const numbers = [1, 2, 3, 4, 5]
const evens = numbers.filter((x) => x % 2 === 0) // evens -> [2, 4]

• reduce(): "Thu gọn" mảng về một giá trị duy nhất (có thể là số, chuỗi, hay đối tượng).

const numbers = [1, 2, 3, 4]
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0,
) // sum -> 10

• find(): Trả về giá trị của phần tử đầu tiên thỏa mãn điều kiện.
• findIndex(): Trả về chỉ số của phần tử đầu tiên thỏa mãn điều kiện.
• sort(): Sắp xếp các phần tử của mảng. Cần lưu ý về cách sắp xếp số.
• slice(): Tạo một mảng mới từ một phần của mảng hiện tại.
• splice(): Thay đổi nội dung của một mảng bằng cách xóa, thêm, hoặc thay thế các phần tử.

const students = ['An', 'Bình', 'Hương']
const findStudent = students.find((s) => s === 'Bình') // findStudent -> 'Bình'

students.splice(1, 1, 'Lan') // Xóa 'Bình' (1 phần tử từ chỉ số 1), thêm 'Lan' vào
// students -> ['An', 'Lan', 'Hương']

Multi-dimensional Arrays (Mảng đa chiều)

Mặc dù JavaScript không có mảng đa chiều chính thức, bạn có thể tạo một mảng lồng mảng (array of arrays) để mô phỏng chúng.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
]

console.log(matrix[1][2]) // Output: 6

Kết luận: Array là công cụ mạnh mẽ và linh hoạt

Mảng là một công cụ mạnh mẽ và linh hoạt trong JavaScript. Bằng cách nắm vững các phương thức cốt lõi như map, filter, reduce và các phương thức thao tác cơ bản khác, bạn sẽ không chỉ giải quyết được các bài toán một cách dễ dàng mà còn viết được code sáng sủa và dễ bảo trì hơn.

Hãy luyện tập thường xuyên để các thao tác với mảng trở thành phản xạ tự nhiên của bạn!