F8

FULLSTACK HUB

← Tất cả ghi chú
JavaScript 1 tháng 7, 2026 lúc 13:40
Thuộc bài học:[Buổi 16] - Day 16: Array, String, Number trong JavaScript

Set và sort trong Array

Ái chà, chưa học tới mà đề bài đã lôi ra bắt xài thì đúng là hơi "khoai", nhưng yên tâm, hai món vũ khí này cực kỳ dễ xài và sẽ là trợ thủ đắc lực cho bạn trong suốt chặng đường cày cuốc JS ở F8.

Học ngay cho nóng nhé, bảo đảm biết xong bạn sẽ nghiện vì code quá ngắn!

1. Set — "Câu lạc bộ VIP" (Khắc tinh của sự trùng lặp)

  • Bản chất: Set là một cấu trúc dữ liệu kiểu mới trong JavaScript (ES6). Quy tắc duy nhất của nó là: Mọi thứ bên trong phải là ĐỘC NHẤT. Giống như một câu lạc bộ VIP, nếu tên bạn đã có trong danh sách rồi thì bảo vệ sẽ không cho bạn vào thêm lần nào nữa.

  • Cách dùng để xóa trùng lặp Mảng: Bạn quăng một cái mảng chứa cả đống từ trùng lặp vào Set, nó sẽ tự động ném hết đồ thừa đi. Sau đó, bạn dùng toán tử Spread (...) quen thuộc để gom mấy từ còn sót lại vào một cái mảng mới.

Cú pháp thần thánh "Xóa trùng lặp trong 1 nốt nhạc":

const mangCoTrungLap = ["javascript", "là", "ngôn", "ngữ", "javascript", "chạy", "trên", "server", "javascript"];
// Bước 1: Quăng mảng vào Set để nó tự hủy mấy từ trùng
const boLocVIP = new Set(mangCoTrungLap); 
console.log(boLocVIP); // Set(7) { 'javascript', 'là', 'ngôn', 'ngữ', 'chạy', 'trên', 'server' }
// Lưu ý: Lúc này nó là kiểu Set, chưa phải là Mảng []


// Bước 2: Dùng Spread (...) ép nó biến lại thành mảng
const mangSạch = [...boLocVIP];
console.log(mangSạch); // ['javascript', 'là', 'ngôn', 'ngữ', 'chạy', 'trên', 'server']

🔥 Tip viết gộp (Chaining): Người ta không rảnh viết 2 dòng đâu, gộp luôn thế này: const mangSach = [...new Set(mangCoTrungLap)];

Tại sao phải có chữ new? Set(...) cộc lốc không được à?

Trong JavaScript, Set không phải là một hàm (function) bình thường như kiểu map(), filter() hay parseInt().

Set là một Bản thiết kế (Constructor / Class).

  • Hãy tưởng tượng Set là bản vẽ thiết kế của một "Câu lạc bộ VIP".

  • Khi bạn muốn xây dựng nên một cái câu lạc bộ thực tế để nhét dữ liệu vào, bạn BẮT BUỘC phải dùng từ khóa new. Chữ new chính là lệnh điều động thợ xây: "Ê JavaScript, hãy dựa theo bản thiết kế Set, xây cho tao MỘT CÁI MỚI (new) để tao chứa đồ".

  • Nếu bạn chỉ viết Set(mangCoTrungLap) mà không có new, JavaScript sẽ báo lỗi đỏ lòm ngay lập tức: TypeError: Constructor Set requires 'new'. Vì bạn đang bắt một cái "bản vẽ thiết kế" đi chạy code, nó không làm được!

Tóm lại: Cứ thấy chữ cái đầu tiên viết hoa (như Set, Map, Date, Promise), thì 99% bạn phải chèn chữ new ở đằng trước để "đẻ" ra một đối tượng thực tế.

Quăng mảng vào, sao không chui ra cái mảng?

Đây là sự khác biệt về Cấu trúc dữ liệu. Mảng (Array) và Set là 2 "đứa con" hoàn toàn khác nhau của JavaScript.

  • Mảng (Array): Giống như một chuyến xe buýt. Ai lên trước ngồi ghế số 0, ai lên sau ngồi ghế số 1. Và xe buýt thì cho phép 2 người trùng tên (ví dụ 2 ông tên "javascript") lên ngồi ở 2 ghế khác nhau.
  • Set: Giống như một cái túi thần kỳ. Nó không có số ghế (không có index 0, 1, 2). Nó chỉ quan tâm là món đồ này "đã có trong túi chưa". Nếu có rồi thì vứt món thứ 2 đi.
Khi bạn chạy lệnh new Set(mangCoTrungLap), bản chất là bạn đang lấy tất cả hành khách trên "xe buýt" (Array), nhồi hết vào trong "cái túi" (Set). Cái túi nó tự động vứt đi những ông trùng tên. Lúc này, dữ liệu của bạn đang nằm trong hình hài của CÁI TÚI (Set). Nó trông như thế này: Set { 'javascript', 'là', 'ngôn', 'ngữ', ... }.
Tại sao phải biến nó lại thành Mảng?

Vì cái túi (Set) KHÔNG CÓ các hàm xịn xò như .sort(), .join(), hay .map(). Bạn không thể bảo cái túi là "hãy sắp xếp theo bảng chữ cái đi" được. 

Do đó, sau khi dùng Set để lọc trùng xong, bạn phải "đổ" đồ trong túi ra lại một chiếc xe buýt mới (Array) thì mới xài tiếp hàm .sort() được.

Đó là lý do chúng ta có cú pháp kết hợp mảng và ngoặc vuông [...] (đổ đồ từ túi ra xe buýt):

let mangSach = [...new Set(mangCoTrungLap)]; // Biến nó lại thành Mảng []

2. sort() — Bậc thầy xếp hàng (Sắp xếp Alphabet)

  • Bản chất: Đúng như tên gọi, nó sẽ sắp xếp lại toàn bộ các phần tử trong mảng.

  • Cơ chế MẶC ĐỊNH: Nếu bạn gọi .sort() không truyền tham số gì, nó sẽ tự động ép mọi thứ về dạng chuỗi (String) và sắp xếp theo bảng chữ cái A-Z. Quá hoàn hảo cho yêu cầu của bài tập này!

const dongLonXon = ["và", "biến", "chạy", "javascript", "duyệt"];


// Gọi hàm sort() chọc thẳng vào mảng
dongLonXon.sort();


console.log(dongLonXon); 
// Kết quả: [ 'biến', 'chạy', 'duyệt', 'javascript', 'và' ] (Chữ b -> c -> d -> j -> v)

🚨 Cú lừa "Vấp cỏ" về sort (Sau này sẽ học kỹ hơn): sort() sắp xếp chữ thì ngon, nhưng sắp xếp Số thì cực ngu! Nếu bạn có mảng [10, 2, 5], gọi .sort() nó sẽ xếp thành [10, 2, 5] (vì số 1 của 10 đứng trước số 2). Nhưng ở bài này ta chỉ đang xếp chữ, nên dùng .sort() chay là đủ xài!