Mảng (Array) là cấu trúc dữ liệu nền tảng trong JavaScript, cho phép lưu trữ và xử lý tập hợp các giá trị theo thứ tự. Dưới đây là tổng quan toàn diện về cách khai báo, truy cập, biến đổi và xử lý mảng bằng các phương thức hiện đại.

Khai báo và truy xuất phần tử

Mảng có thể được khởi tạo bằng cú pháp chữ (literal) hoặc thông qua hàm tạo Array:

const colors = ['vàng', 'xanh lá', 'tím']; // Khai báo bằng literal
const numbers = new Array(1, 2, 3);       // Khai báo bằng constructor

Mỗi phần tử trong mảng được định danh bởi chỉ số nguyên không âm, bắt đầu từ 0. Truy cập phần tử thực hiện qua dấu ngoặc vuông:

console.log(colors[1]); // "xanh lá"
console.log(numbers[0]); // 1

Thuộc tính length trả về số lượng phần tử hiện tại:

console.log(colors.length); // 3

Thao tác thêm/xóa phần tử

• Thêm vào cuối: push() — nhận một hoặc nhiều tham số, trả về độ dài mới.
• Thêm vào đầu: unshift() — tương tự push(), nhưng chèn từ vị trí đầu tiên.
• Xóa cuối: pop() — loại bỏ và trả về phần tử cuối cùng.
• Xóa đầu: shift() — loại bỏ và trả về phần tử đầu tiên.
• Xóa/tái cấu trúc linh hoạt: splice(startIndex, deleteCount, ...items) — hỗ trợ xóa, chèn hoặc thay thế tại vị trí xác định.

const fruits = ['táo', 'cam'];
fruits.push('lê');        // ['táo', 'cam', 'lê']
fruits.unshift('dưa');    // ['dưa', 'táo', 'cam', 'lê']
fruits.pop();             // ['dưa', 'táo', 'cam']
fruits.splice(1, 1, 'nho'); // ['dưa', 'nho', 'cam']

Sắp xếp và so sánh

Phương thức sort() sắp xếp mảng trực tiếp (mutating). Khi làm việc với số, cần truyền hàm so sánh để tránh sắp xếp theo chuỗi:

const scores = [85, 92, 76, 99];
scores.sort((a, b) => a - b);   // tăng dần → [76, 85, 92, 99]
scores.sort((a, b) => b - a);   // giảm dần → [99, 92, 85, 76]

Các phương thức lặp không thay đổi mảng gốc

Các hàm như map(), forEach(), filter(), và join() tạo ra kết quả mới hoặc thực hiện hành động mà không làm thay đổi mảng ban đầu.

Chuyển đổi từng phần tử — map()

Tạo mảng mới bằng cách áp dụng hàm chuyển đổi lên mỗi phần tử:

const names = ['An', 'Bình', 'Chi'];
const fullNames = names.map((name, idx) => `${name} (${idx + 1})`);
// ['An (1)', 'Bình (2)', 'Chi (3)']

Duyệt tuần tự — forEach()

Thực thi một hàm callback trên từng phần tử, thường dùng để in ra, gửi yêu cầu, hoặc cập nhật trạng thái bên ngoài:

fullNames.forEach((item, i) => {
  console.log(`Vị trí ${i}: ${item}`);
});

Lọc phần tử — filter()

Trả về mảng mới chứa các phần tử thỏa mãn điều kiện kiểm tra:

const ages = [18, 22, 16, 30, 14];
const adults = ages.filter(age => age >= 18); // [18, 22, 30]

Nối thành chuỗi — join()

Chuyển mảng thành chuỗi, sử dụng ký tự phân cách tùy chọn:

console.log(['HTML', 'CSS', 'JS'].join(' → ')); // "HTML → CSS → JS"
console.log(['a', 'b', 'c'].join('')); // "abc"

Minh họa trực quan: Biểu đồ cột động

Dưới đây là ví dụ minh họa việc render biểu đồ cột đơn giản dựa trên dữ liệu nhập từ người dùng — sử dụng mảng để lưu trữ và vòng lặp để sinh HTML:

<style>
.chart-container {
  display: flex;
  height: 250px;
  border-left: 2px solid #e74c3c;
  border-bottom: 2px solid #e74c3c;
  margin: 40px auto;
  width: 600px;
  align-items: flex-end;
  justify-content: space-around;
  padding-bottom: 10px;
}
.bar {
  width: 60px;
  background: linear-gradient(to top, #e74c3c, #c0392b);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.bar span {
  font-weight: bold;
  color: white;
  margin-top: -25px;
}
.bar h4 {
  margin-bottom: -30px;
  font-size: 0.85rem;
  color: #34495e;
}
</style>

<div id="chart"></div>

<script>
  const quarters = [];
  for (let q = 1; q <= 4; q++) {
    const input = prompt(`Nhập doanh thu quý ${q} (đơn vị triệu):`);
    quarters.push(Number(input) || 0);
  }

  const chartEl = document.getElementById('chart');
  chartEl.innerHTML = quarters.map((value, i) => 
    <div class="bar" style="height: ${Math.max(20, value)}px">
      <span>${value}</span>
      <h4>Quý ${i + 1}</h4>
    </div>
  ).join('');
</script>