Giới thiệu
Chào mừng các bạn đến với Kỳ 22 của series JavaScript Nâng Cao. Có một câu nói vui rằng: "Trong cuộc sống chỉ có những thứ nhiều người chửi và những thứ không ai thèm dùng." JavaScript là một ví dụ điển hình. Nó có nhiều điểm thú vị nhưng cũng làm chúng ta đau đầu không ít. Tuy lý thuyết thì dễ hiểu, nhưng khi thực hành lại là một câu chuyện khác. Trong bài viết này, mình sẽ cùng nhau khám phá một số khía cạnh quan trọng của JavaScript để giúp các bạn hiểu rõ hơn.
1. Truy cập thuộc tính trong đối tượng
Đầu tiên, mình sẽ bắt đầu với câu hỏi nhỏ về cách truy cập các thuộc tính trong đối tượng (object). Hãy xem đoạn mã sau:
javascript
const colorConfig = {
red: true,
blue: false,
green: true,
black: true,
yellow: false,
};
const colors = ["pink", "red", "blue"];
console.log(colorConfig.colors[1]);Câu hỏi
Output của đoạn mã trên là gì?
- A:
true - B:
false - C:
undefined - D:
TypeError
Đáp án: D
Phân tích
Khi bạn truy cập colorConfig.colors, JavaScript không thể tìm thấy thuộc tính colors trong colorConfig. Do đó, kết quả là undefined và việc cố gắng truy cập phần tử thứ hai của undefined sẽ gây ra một lỗi TypeError. Cách truy cập chính xác là sử dụng console.log(colors[1]); để lấy ra giá trị "red".
2. So sánh emoji
Tiếp theo, hãy cùng xem xét phép so sánh emoji trong JavaScript:
javascript
console.log('❤️' === '❤️');Kết quả là:
- A:
true - B:
false
Đáp án: A
Giải thích
Hai chuỗi '❤️' đều giống nhau, do đó kết quả của phép so sánh này là true. Trong JavaScript, các emoji được xem như chuỗi và chúng được so sánh giống như các ký tự bình thường khác.
3. Các phương thức xử lý mảng
Trong phần này, chúng ta sẽ tìm hiểu các phương thức xử lý mảng và ảnh hưởng của chúng đến mảng gốc:
javascript
const emojis = ['✨', '🥑', '😍'];
emojis.map(x => x + '✨');
emojis.filter(x => x !== '🥑');
emojis.find(x => x !== '🥑');
emojis.reduce((acc, cur) => acc + '✨');
emojis.slice(1, 2);
emojis.splice(1, 2, '✨');Câu hỏi
Phép toán nào làm thay đổi mảng gốc?
- A:
All of them - B:
map, reduce, slice, splice - C:
map, slice, splice - D:
splice
Đáp án: D
Phân tích
Chỉ có splice() là phương thức có khả năng làm thay đổi mảng gốc. Các phương thức như map(), filter(), find(), và reduce() sẽ tạo ra một bản sao mới mà không làm thay đổi mảng ban đầu.
4. Sự tương tác giữa kiểu dữ liệu cơ bản và đối tượng
Xem xét đoạn mã sau:
javascript
const food = ['🍕', '🍫', '🥑', '🍔'];
const info = { favoriteFood: food[0] };
info.favoriteFood = '🍝';
console.log(food);Câu hỏi
Output của đoạn mã trên là gì?
- A:
['🍕', '🍫', '🥑', '🍔'] - B:
['🍝', '🍫', '🥑', '🍔'] - C:
['🍝', '🍕', '🍫', '🥑', '🍔'] - D:
ReferenceError
Đáp án: A
Giải thích
Mảng food không thay đổi vì khi gán giá trị cho favoriteFood, chúng ta chỉ đang sao chép giá trị của phần tử đầu tiên trong mảng. Việc thay đổi favoriteFood không ảnh hưởng đến mảng food.
5. Phương thức JSON.parse()
Cuối cùng, mình sẽ nói về phương thức JSON.parse():
Câu hỏi
Phép toán này dùng để làm gì?
- A: Parse JSON thành một giá trị JavaScript
- B: Parse một JavaScript object thành JSON
- C: Parse giá trị JavaScript bất kỳ thành JSON
- D: Parse JSON thành một JavaScript object
Đáp án: A
Giải thích
JSON.parse() cho phép chúng ta chuyển đổi một chuỗi JSON thành giá trị JavaScript, điều này cực kỳ hữu ích khi làm việc với dữ liệu từ server.
Kết luận
Qua bài viết này, chúng ta đã khám phá các khía cạnh quan trọng của JavaScript như cách truy cập thuộc tính, so sánh chuỗi, xử lý mảng, tương tác giữa các kiểu dữ liệu và sử dụng phương thức JSON.parse(). Hiểu rõ nội dung này sẽ giúp bạn phát triển kỹ năng lập trình một cách hiệu quả. Hãy theo dõi các Kỳ tiếp theo để đào sâu hơn về JavaScript! Nếu có bất kỳ câu hỏi nào, đừng ngần ngại bình luận nhé!
source: viblo
