JavaScript Nâng Cao - Kỳ 12: Tìm Hiểu Về Set, Module, Phép Toán Delete, Destructuring và Spread Operator

Giới Thiệu

Trong thế giới lập trình, có một câu nói hài hước rằng: "Có hai loại thứ trong cuộc sống: một thứ bị nhiều người chửi bới và một thứ không ai thèm dùng." JavaScript, mặc dù rất phổ biến, cũng không tránh khỏi những điều thú vị nhưng gây đau đầu cho người dùng. Lý thuyết có vẻ dễ hiểu, nhưng khi áp dụng vào thực tế lại là một câu chuyện khác. Trong bài viết này, chúng ta sẽ đi sâu vào một số khía cạnh thú vị của JavaScript thông qua từng ví dụ đặc trưng.

Chương trình này có thể sẽ kéo dài, nhưng tôi sẽ cố gắng giải thích các lý thuyết trong từng kỳ, giúp cho những bạn chưa đọc các bài viết trước cảm thấy dễ dàng hơn trong việc tiếp cận kiến thức.

Hãy bắt đầu hành trình khám phá JavaScript nào! 🚀

Nếu bạn có câu hỏi, đừng ngần ngại để lại bình luận dưới bài viết. Một lời chào đơn giản cũng sẽ giúp tôi có thêm động lực để hoàn thành chuỗi bài viết này. Cảm ơn các bạn! 🤗

1. Hiểu Về Set và Các Giá Trị Duy Nhất

Câu hỏi: Output của đoạn code sau là gì?

const set = new Set([1, 1, 2, 3, 4]);
console.log(set);

• A: [1, 1, 2, 3, 4]
• B: [1, 2, 3, 4]
• C: {1, 1, 2, 3, 4}
• D: {1, 2, 3, 4}

Đáp án: D

1.1. Set Trong JavaScript

Set là một cấu trúc dữ liệu quý giá trong JavaScript, được giới thiệu từ ES6. Nó cho phép lưu trữ các giá trị duy nhất với đủ các kiểu dữ liệu.

1.2. Đặc Điểm Của Set

1. Giá Trị Duy Nhất: Mỗi giá trị chỉ có thể xuất hiện một lần.
2. Thứ Tự Chèn: Giữ nguyên thứ tự thêm.
3. Không Có Chỉ Mục: Không thể truy cập các phần tử bằng chỉ mục.

1.3. Phân Tích Code

Khi chúng ta khởi tạo Set với mảng [1, 1, 2, 3, 4], giá trị 1 được bỏ qua do đã có. Kết quả trả về sẽ là D: {1, 2, 3, 4}.

1.4. Ví Dụ Minh Họa

const fruits = new Set(['apple', 'banana', 'apple', 'orange', 'banana']);
console.log(fruits); // Set(3) { 'apple', 'banana', 'orange' }

1.5. Tóm Tắt

Set rất hữu ích cho việc làm việc với tập hợp các giá trị duy nhất.

2. Tìm Hiểu Về Module và Các Giá Trị Chỉ Đọc

Câu hỏi: Output của đoạn code sau là gì?

// counter.js
let counter = 10;
export default counter;

// index.js
import myCounter from "./counter";
myCounter += 1; // Lỗi ở đây
console.log(myCounter);

• A: 10
• B: 11
• C: Error
• D: NaN

Đáp án: C

2.1. Module Trong JavaScript

Modules giúp chia nhỏ code thành các phần riêng biệt và dễ quản lý.

2.2. Tính Chất Chỉ Đọc

Khi import, biến được xử lý như chỉ đọc, không thể thay đổi trực tiếp.

2.3. Phân Tích Code

Khi thay đổi myCounter, sẽ xảy ra lỗi. Đó là vì giá trị được import không thể sửa đổi.

2.4. Cách Thay Đổi Giá Trị

Cần xuất một function thay vì biến.

export function incrementCounter() {
  counter += 1;
  return counter;
}

2.5. Tóm Tắt

Nhớ rằng các giá trị đã import là chỉ đọc để tránh lỗi khi làm việc với modules.

3. Phép Toán Delete Trong JavaScript

Câu hỏi: Output của đoạn code này là gì?

const name = "Lydia";
age = 21;
console.log(delete name);
console.log(delete age);

• A: false, true
• B: "Lydia", 21
• C: true, true
• D: undefined, undefined

Đáp án: A

3.1. Phép Toán Delete

delete chỉ có hiệu lực với thuộc tính của đối tượng, không ảnh hưởng đến các biến.

3.2. Phân Tích Code

• delete name trả về false vì name là biến const.
• delete age trả về true vì age là một thuộc tính toàn cục.

3.3. Ví Dụ Minh Họa

const obj = {x: 1, y: 2};
let z = 3;
console.log(delete obj.x);  // true
console.log(delete z);      // false

3.4. Tóm Tắt

Sử dụng delete với chu ý đến ngữ cảnh và kiểu dữ liệu.

4. Destructuring Trong JavaScript

Câu hỏi: Output của đoạn code sau là gì?

const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;
console.log(y);

• A: [[1, 2, 3, 4, 5]]
• B: [1, 2, 3, 4, 5]
• C: 1
• D: [1]

Đáp án: C

4.1. Destructuring

Giúp trích xuất giá trị từ mảng hoặc đối tượng thành biến riêng biệt.

4.2. Phân Tích Code

[y] lấy phần tử đầu tiên là 1 từ mảng numbers.

4.3. Ví Dụ Minh Họa

const colors = ['red', 'green', 'blue'];
const [firstColor] = colors;
console.log(firstColor);  // 'red'

4.4. Tóm Tắt

Destructuring giúp truy xuất giá trị từ mảng một cách dễ dàng.

5. Spread Operator Trong JavaScript

Câu hỏi: Output của đoạn code sau là gì?

const user = { name: "Lydia", age: 21 };
const admin = { admin: true, ...user };
console.log(admin);

• A: { admin: true, user: { name: "Lydia", age: 21 } }
• B: { admin: true, name: "Lydia", age: 21 }
• C: { admin: true, user: ["Lydia", 21] }
• D: { admin: true }

Đáp án: B

5.1. Spread Operator

Cho phép chúng ta trải các phần tử của đối tượng thành các phần tử riêng lẻ.

5.2. Phân Tích Code

...user sẽ sao chép tất cả thuộc tính của object user vào trong object admin.

5.3. Tóm Tắt

Spread Operator giúp kết hợp và sao chép thuộc tính từ các objects một cách dễ dàng.
source: viblo