JavaScript Nâng Cao - Phần 27: Tìm Hiểu Về Phương Thức flat(), Tham Chiếu và Class, Promise, Import/Export, và Proxy

Một Câu Nói Vui Về JavaScript

Trên đời có hai thứ: thứ nhiều người chửi và thứ không ai thèm dùng. Một trong những ví dụ điển hình chính là JavaScript. Nó có những điểm thú vị nhưng cũng làm đau đầu không ít lập trình viên. Lý thuyết dễ hiểu nhưng thực hành lại là vấn đề lớn. Trong bài viết này, tôi sẽ cùng các bạn đi sâu vào từng ví dụ cụ thể và phân tích nó để có cái nhìn sâu sắc hơn về JavaScript.

Lời Mở Đầu

Loạt bài viết này có thể khá dài, nên tôi sẽ cố gắng giải thích lại toàn bộ các lý thuyết liên quan đến JavaScript mà tôi đã đề cập trước đó. Mỗi phần có thể được nhắc lại nhiều lần để giúp các bạn nắm rõ hơn. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại câu hỏi trong phần bình luận dưới đây! Cảm ơn các bạn!

1. Phương thức flat() trong JavaScript

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

const emojis = ["🥑", ["✨", "✨", ["🍕", "🍕"]]];
console.log(emojis.flat(1));

• A: ['🥑', ['✨', '✨', ['🍕', '🍕']]]
• B: ['🥑', '✨', '✨', ['🍕', '🍕']]
• C: ['🥑', ['✨', '✨', '🍕', '🍕']]
• D: ['🥑', '✨', '✨', '🍕', '🍕']

Đáp án: B
Giải thích:
Phương thức flat() trong JavaScript giúp làm phẳng một mảng nhiều chiều. Đoạn code ở trên chỉ định độ sâu là 1, tức là chỉ làm phẳng một lớp của mảng. Kết quả là ['🥑', '✨', '✨', ['🍕', '🍕']], tương ứng với đáp án B.

2. Tham Chiếu và Object trong JavaScript

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

class Counter {
 constructor() {
  this.count = 0;
 }
 increment() {
  this.count++;
 }
}

const counterOne = new Counter();
counterOne.increment();
counterOne.increment();

const counterTwo = counterOne;
counterTwo.increment();

console.log(counterOne.count);

• A: 0
• B: 1
• C: 2
• D: 3

Đáp án: D
Giải thích:
Khi gán counterOne cho counterTwo, cả hai biến đều tham chiếu đến cùng một object. Do đó, khi increment() được gọi, giá trị của count sẽ tăng lên 3 và khi in ra counterOne.count, kết quả là 3

3. Promise, async/await và Event Loop trong JavaScript

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

const myPromise = Promise.resolve(Promise.resolve("Promise!"));

function funcOne() {
 myPromise.then(res => res).then(res => console.log(res));
 setTimeout(() => console.log("Timeout!"), 0);
 console.log("Last line!");
}

async function funcTwo() {
 const res = await myPromise;
 console.log(await res);
 setTimeout(() => console.log("Timeout!"), 0);
 console.log("Last line!");
}

funcOne();
funcTwo();

• A: Promise! Last line! Promise! Last line! Last line! Promise!
• B: Last line! Timeout! Promise! Last line! Timeout! Promise!
• C: Promise! Last line! Last line! Promise! Timeout! Timeout!
• D: Last line! Promise! Promise! Last line! Timeout! Timeout!

Đáp án: D
Giải thích:
Thứ tự thực thi trong JavaScript sẽ in ra các dòng như sau: đầu tiên in ra "Last line!", sau đó là "Promise!", tiếp theo là "Last line!" và cuối cùng là "Timeout!". Kết quả cuối cùng sẽ là D.

4. Import và Export trong JavaScript

Câu hỏi: Làm thế nào để gọi hàm sum trong index.js từ sum.js?

// sum.js
export default function sum(x) {
 return x + x;
}

// index.js
import * as sum from "./sum";

• A: sum(4)
• B: sum.sum(4)
• C: sum.default(4)
• D: Default aren't imported with *, only named exports

Đáp án: C
Giải thích:
Khi bạn sử dụng import * as sum, bạn đang import tất cả các exports dưới dạng một object. Đối với default export, bạn cần gọi nó qua sum.default(4).

5. Proxy trong JavaScript

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

const handler = {
 set: () => console.log("Added a new property!"),
 get: () => console.log("Accessed a property!")
};

const person = new Proxy({}, handler);

person.name = "Lydia";
person.name;

• A: Added a new property!
• B: Accessed a property!
• C: Added a new property! Accessed a property!
• D: Nothing gets logged

Đáp án: C
Giải thích:
Khi bạn thêm thuộc tính name, trap set được gọi, in ra "Added a new property!". Khi bạn truy cập thuộc tính này, trap get được gọi, in ra "Accessed a property!"

Kết Luận

Trên đây là các khái niệm quan trọng trong JavaScript, từ phương thức flat(), tham chiếu và class, Promise, đến việc sử dụng import/export và Proxy. Việc nắm vững những kiến thức này sẽ giúp bạn trở thành lập trình viên giỏi hơn và giải quyết các vấn đề hiệu quả hơn trong công việc. Nếu bạn có bất cứ câu hỏi hay thắc mắc nào, đừng ngại để lại câu hỏi trong phần bình luận dưới đây nhé! Mong rằng sẽ gặp lại các bạn trong kỳ tiếp theo của series này! 👋
source: viblo