Câu hỏi phỏng vấn JavaScript: Gotchas phổ biến
Trong JavaScript, ban đầu có rất ít kỹ thuật không hoàn toàn hợp lý cho đến khi bạn phát hiện ra chúng. Như vậy, mọi người đều có danh sách các Gotcha JavaScript của riêng mình, nhưng những thứ như “JavaScript phân biệt chữ hoa chữ thường” không phải là một gotcha thực sự. Đối với tôi, đó là cách nó phải như vậy. Nó không phải là một thủ thuật khó hiểu. Nó chỉ là kỹ thuật theo cách đó.
"Gotcha" đúng với tôi là khi 1 == 1 và 1 == '1' là đúng, nhưng [] == [] không đúng. Mặc dù, đây là một trong những “gotchas” đơn giản hơn, nó vẫn không hiển thị trực quan ngay lập tức cho đến khi bạn đi sâu vào “tại sao”.
Trong hướng dẫn này, ta sẽ xem xét một số lỗi phổ biến mà bạn có thể tìm thấy trong một cuộc phỏng vấn JavaScript. Người phỏng vấn có thể sẽ không trực tiếp hỏi những câu hỏi này, nhưng họ có thể hỏi bạn điều gì đó liên quan đến họ hoặc để làm một vấn đề liên quan đến họ.
var so với let
Đây là một trong những gotchas cơ bản nhất - lúc đầu , từ khóa var và let có vẻ giống với tôi, tôi không thể biết có bất kỳ sự khác biệt nào. Tuy nhiên, đây là một cách phổ biến để thể hiện sự khác biệt:
// let
for(let i=0; i<10; i++) {
//...
}
console.log(i) // Reference Error: i is not defined
// var
for(var j=0; j<10; j++) {
//...
}
console.log(j) // 10
Một điểm khác biệt lớn là let là phạm vi khối - nghĩa là nó bị giới hạn ở bất kỳ khối nào mà nó được định nghĩa. Để console.log biết i là gì, bạn sẽ phải nhấc i ra khỏi vòng lặp for . Đó chính xác là những gì var làm đằng sau mức thấp . Từ khóa var là phạm vi chức năng, như trong, chỉ bị giới hạn bởi chức năng mẹ. Và tự động được lưu trữ bên ngoài khối mà nó được khai báo.
Bổ sung và Kết hợp
1 + 1; // 2, obviously
1 + "1"; // "11"
Như bạn thấy , JavaScript chuyển đổi số thành chuỗi. Hay không?
1 - "1"; // 0 (number)
1 * "1"; // 1 (number)
1 / "1"; // 1 (number)
"1" * "1"; // 1 (yep, still a number)
Không, thực tế JavaScript chuyển đổi chuỗi thành số trong hầu hết các trường hợp. Trong trường hợp của toán tử + , nó được nối thay vì thêm vào. Nối, như chuỗi: "your" + "name" // "your name" .
NaN Gotchas
NaN là viết tắt của "not a number". Đó là một trong những (“number” s?) Khó xử lý hơn trong JavaScript. Ví dụ:
NaN === NaN; // false
NaN == NaN; // false as well
typeof NaN; // number
"" == NaN; // false
Trên thực tế, bất kỳ thứ gì bằng "NaN" đều là sai, sự kiện mặc dù có rất nhiều thứ "không phải là số". Đó là lý do tại sao thay vào đó bạn phải sử dụng isNaN() . Nhưng ngay cả điều đó cũng có thể gây nhầm lẫn:
isNaN("string"); // true - what we would expect, as a string is not a number
isNaN(123); // false - also expected
// false means it's a number, right?
isNaN(""); // false - hmm...
isNaN("45"); // false - this is a string, I thought
isNaN([]); // false - wait so an empty array is a number?
isNaN([1, 2]); // true
isNaN({}); // true
isNaN(() => {}); // true
Bình đẳng / Chân thật vs Giả dối
Bạn có thể đã quen với sự khác biệt giữa == và === . == chỉ kiểm tra giá trị, trong khi === bao gồm kiểm tra kiểu. Đó là lý do tại sao 1 === "1" là sai, nhưng 1 == "1" là đúng. Nhưng, bạn có biết điều này là đúng: null == undefined . Nhưng tất nhiên, đây là kiểm tra lỏng lẻo với dấu == .
Ngoài ra còn có != nghĩa là "không bằng". Đây là true: null !== undefined , nhưng đây là false null != undefined . Tiếp theo? Về cơ bản, câu đầu tiên nói, "null không hoàn toàn bằng undefined", nhưng câu thứ hai nói, "null không phải là không lỏng lẻo bằng undefined" (phủ định kép, nghĩa là chúng bằng nhau một cách lỏng lẻo).
Nhưng ta hãy xem xét nhiều so sánh thậm chí còn phức tạp hơn. Tất cả những kiểm tra này là đúng:
false == '0' // true
0 == false // true
'' == 0 // true
false == '' // true
[] == '' // true, but we'll get to this
'1' == true // true
1 == true // true
'false' == true // true
Đây là những kiểm tra so sánh khó hiểu, nhưng chúng không đúng về mặt kỹ thuật so với giả. Chúng chỉ là các kiểm tra giá trị, vì hãy nhớ kết quả []==[] là sai, tuy nhiên, “[]” là giá trị trung thực. Cách để kiểm tra truthy vs falsy, được đặt mọi thứ trong một if khối. Ví dụ:
if ("") {
console.log(true);
} else {
console.log(false);
}
// logs false
//But look at this
if ([]) {
console.log(true);
}
// logs true - an empty array is still truthy
if ([] == "") {
console.log(true);
}
// logs true - but look at the first one - it logged false
Một đối tượng trống, {} , cũng ghi đúng. JavaScript khá thú vị khi nói đến đẳng thức và kiểu, nhưng tôi khuyên bạn nên sử dụng bộ ba bằng === hoặc !== để so sánh.
Bây giờ, ví dụ cuối cùng là một bức tranh tốt về sự khác biệt chính. Kiểm tra bình đẳng lỏng lẻo, kiểm tra giá trị, không nhất thiết là giả mạo / trung thực. if các khối kiểm tra độ giả / sự thật. Hãy xem, trong JavaScript, điều này là đúng: [] == false . Nhưng như ta đã thấy ở trên, một if kiểm tra khối một mảng trống rỗng như truthy. Rõ ràng, if(false) sẽ không đi đến đâu.
Chèn dấu chấm phẩy tự động
Tôi nhận thấy rằng nếu tôi quên thêm dấu chấm phẩy để kết thúc một dòng mã, nó không gây ra lỗi cho tôi. Mức thấp Chèn dấu chấm phẩy tự động chèn dấu chấm phẩy bị thiếu, điều này không sao, nhưng có thể tạo ra một thói quen xấu. Một số câu lệnh cần dấu chấm phẩy hoặc JavaScript có thể không biết chúng đã kết thúc, trong khi những câu khác, như ta sẽ thấy, chưa kết thúc chút nào, nhưng JavaScript nghĩ rằng nó đã có.
function increment(num) {
return
++num
}
console.log(increment(3))
Bây giờ đó không phải là ví dụ tốt nhất trên thế giới, nhưng nó có thể làm bạn ngạc nhiên khi nó trả về undefined . Đó là bởi vì dấu chấm phẩy được chèn bí mật vào cuối "return" và dòng mã tiếp theo sẽ không bao giờ đạt được. Một chút như thế này:
function increment(num) {
return;
++num;
}
console.log(increment(3));
Biến toàn cục
Cuối cùng, JavaScript có hành vi kỳ lạ này là tạo ra các biến global từ không khí mỏng. Vòng tròn này quay lại câu chuyện gotcha đầu tiên của ta về từ khóa let vs var .
Lưu ý ta đã nói rằng let là phạm vi khối, trong khi var là phạm vi chức năng? Sau đó là gì đây?
for(i = 0; i < 10; i++) {
// ...
}
console.log(i); // 10
Chú ý những gì ta đã làm? Không có định nghĩa cho biến "i": i=0 . Kết quả là gì? Một biến toàn cục đã được tạo. Đây là một điều nguy hiểm, bởi vì bây giờ biến i của ta là toàn cục.
Điều này cũng đúng trong bất kỳ hàm nào: function someFn() { someVar = 0; } . someVar ở đây trở thành một biến toàn cục và nó giống như nói window.var = 0 .
Kết luận
JavaScript có một số thứ phức tạp để chuyển và sự thật là những người phỏng vấn sẽ hỏi bạn về chúng, ngay cả khi thực tế bạn sẽ không bao giờ nhìn thấy chúng trong một tình huống thực tế. Nhưng, bạn phải làm gì?
Tin tốt là có rất nhiều tài liệu và video giảng dạy để chỉ cho bạn những điều này. Tôi khuyên bạn nên thực hiện tìm kiếm những thứ như “Câu hỏi phỏng vấn khó về JavaScript” hoặc “Câu hỏi khó về JavaScript”. Và ngay cả khi bạn không gặp họ trong một cuộc phỏng vấn, ít nhất bạn cũng biết họ về những vấn đề trong tương lai nếu chúng xuất hiện. Ngoài ra, bạn cũng có thể lừa bạn bè của bạn với họ!
Chúc may mắn và khi nghi ngờ, chỉ cần nhớ đây là những điều mà tất cả các nhà phát triển phải đối mặt - bạn không đơn độc!
Các tin liên quan
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 1: Tổng quan2020-02-21
Hiểu Radix Sắp xếp Thông qua JavaScript
2020-02-18
Cách xây dựng PWA trong Vanilla JavaScript
2020-02-17
Hiểu về Sắp xếp nhanh qua JavaScript
2020-02-14
Hiểu bản đồ và thiết lập đối tượng trong JavaScript
2020-02-12
Hiểu Hợp nhất Sắp xếp Thông qua JavaScript
2020-02-08
Tạo biểu mẫu tùy chỉnh bằng API dữ liệu biểu mẫu JavaScript
2020-02-06
Thuật toán sắp xếp cho người mới bắt đầu trong JavaScript: Bubble, Selection & Insertion Sort
2020-02-03
Tìm kiếm nhị phân tuyến tính Vs qua JavaScript
2020-01-29
Hiểu Đệ quy & Ghi nhớ qua JavaScript
2020-01-26
