Khám Phá Thế Giới Mảng Trong Javascript: Từ Cơ Bản Đến Nâng Cao

Lời Mở Đầu

Mảng (Array) là một trong những kiểu dữ liệu phổ biến và hữu dụng nhất trong Javascript, cho phép bạn lưu trữ một tập hợp các phần tử có thứ tự. Từ việc quản lý danh sách đơn giản đến xử lý dữ liệu phức tạp, mảng đóng vai trò quan trọng trong việc xây dựng ứng dụng web động và hiệu quả.

Bài viết này sẽ hướng dẫn bạn từ A đến Z về cách khai báo, truy cập, thao tác và vận dụng mảng trong Javascript. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, hãy cùng nhau khám phá thế giới đa dạng của mảng và nâng cao kỹ năng lập trình của bạn!

Mảng Trong Javascript Là Gì?

Hãy tưởng tượng mảng như một chiếc hộp đựng nhiều ngăn, mỗi ngăn có thể chứa một giá trị bất kỳ như số, chuỗi, đối tượng hoặc thậm chí là một mảng khác. Các ngăn được đánh số thứ tự, bắt đầu từ 0, được gọi là chỉ số (index).

const mixedTypedArray = [100, true, 'freeCodeCamp', {}];

Trong ví dụ trên:

• mixedTypedArray là tên của mảng.
• Mảng chứa 4 phần tử với các kiểu dữ liệu khác nhau.
• Phần tử 100 có chỉ số là 0, true có chỉ số là 1, và cứ thế tiếp tục.

Khởi Tạo Mảng

Có nhiều cách để tạo mảng trong Javascript. Hai cách phổ biến nhất là:

Cách 1: Sử dụng cặp dấu ngoặc vuông [] và liệt kê các phần tử bên trong, cách nhau bởi dấu phẩy ,.

const salad = ['?', '?', '?', '?', '?', '?', '?'];

Cách 2: Sử dụng từ khóa new và constructor Array().

const salad = new Array('?', '?', '?', '?', '?', '?', '?');

Ngoài ra, bạn có thể sử dụng Array.of, Array.from hoặc toán tử spread ... để tạo mảng theo những cách linh hoạt hơn.

Truy Cập Phần Tử Trong Mảng

Để lấy giá trị của một phần tử cụ thể trong mảng, bạn sử dụng chỉ số của nó. Ví dụ:

const salad = ['?', '?', '?', '?', '?', '?', '?'];  salad[0]; // '?'  salad[2]; // '?'  salad[5]; // '?'

Bạn cũng có thể sử dụng vòng lặp for hoặc phương thức forEach để duyệt qua từng phần tử trong mảng.

const salad = ['?', '?', '?', '?', '?', '?', '?'];  for(let i=0; i < salad.length; i++) {    console.log(`Phần tử tại chỉ số ${i} là ${salad[i]}`);  }

Thêm Phần Tử Vào Mảng

Javascript cung cấp cho chúng ta các phương thức để thêm phần tử vào đầu hoặc cuối mảng:

• push(): Thêm phần tử vào cuối mảng.

const salad = ['?', '?', '?', '?', '?', '?', '?'];  salad.push('?'); // ["?", "?", "?", "?", "?", "?", "?", "?"]

• unshift(): Thêm phần tử vào đầu mảng.

const salad = ['?', '?', '?', '?', '?', '?', '?'];  salad.unshift('?'); // ["?", "?", "?", "?", "?", "?", "?", "?"]

Xóa Phần Tử Khỏi Mảng

Tương tự như thêm phần tử, chúng ta có thể xóa phần tử ở đầu hoặc cuối mảng:

• pop(): Xóa phần tử cuối mảng và trả về phần tử đã xóa.

const salad = ['?', '?', '?', '?', '?', '?', '?'];  salad.pop(); // '?'  console.log(salad); // ['?', '?', '?', '?', '?', '?']

• shift(): Xóa phần tử đầu mảng và trả về phần tử đã xóa.

const salad = ['?', '?', '?', '?', '?', '?', '?'];  salad.shift(); // '?'  console.log(salad); // ['?', '?', '?', '?', '?', '?'];

Sao Chép Mảng

Phương thức slice() cho phép bạn sao chép toàn bộ mảng hoặc một phần của nó.

const salad = ['?', '?', '?', '?', '?', '?', '?'];  const saladCopy = salad.slice();  console.log(saladCopy); // ['?', '?', '?', '?', '?', '?', '?']  salad === saladCopy; // returns false

Ngoài ra, toán tử spread ... cũng là một cách sao chép mảng nhanh chóng và tiện lợi.

Kiểm Tra Biến Có Phải Là Mảng

Phương thức isArray() giúp bạn kiểm tra xem một biến có phải là mảng hay không.

Array.isArray(['?', '?', '?', '?', '?', '?', '?']); // returns true  Array.isArray('?'); // returns false  Array.isArray({ 'tomato': '?'}); // returns false  Array.isArray([]); // returns true

Destructuring Mảng

ES6 giới thiệu cú pháp destructuring, cho phép bạn giải nén các phần tử của mảng thành các biến riêng biệt.

let [tomato, mushroom, carrot] = ['?', '?', '?'];  console.log(tomato, mushroom, carrot); // Output, ? ? ?

Các Hàm Thao Tác Với Mảng

Javascript cung cấp một loạt các hàm mạnh mẽ để thao tác với mảng:

• concat(): Nối hai hay nhiều mảng lại với nhau.
• join(): Chuyển đổi các phần tử của mảng thành chuỗi, ngăn cách bởi ký tự được chỉ định.
• fill(): Thay thế các phần tử của mảng bằng một giá trị cụ thể.
• includes(): Kiểm tra xem một mảng có chứa phần tử được chỉ định hay không.
• indexOf(): Tìm vị trí đầu tiên của phần tử được chỉ định trong mảng.
• lastIndexOf(): Tìm vị trí cuối cùng của phần tử được chỉ định trong mảng.
• reverse(): Đảo ngược thứ tự các phần tử trong mảng.
• sort(): Sắp xếp các phần tử trong mảng theo thứ tự tăng dần hoặc giảm dần.
• splice(): Thêm, xóa hoặc thay thế các phần tử tại vị trí bất kỳ trong mảng.

Kết Luận

Mảng là một phần không thể thiếu trong Javascript và việc nắm vững cách sử dụng chúng sẽ giúp bạn viết code hiệu quả và linh hoạt hơn. Hãy tiếp tục thực hành và khám phá thêm nhiều điều thú vị về mảng trong Javascript nhé!