Hướng dẫn javascript refresher for interview - bồi dưỡng javascript cho cuộc phỏng vấn
Tôi đã cẩn thận trải qua hơn 50 tài nguyên, tôi đã trải qua 10 cuộc phỏng vấn JavaScript và tôi đã tìm được một công việc tại một công ty khởi nghiệp kỳ lân.50 resources, I've been through 10 JavaScript interviews, and I've landed a job at a unicorn startup. Show
Và trong suốt toàn bộ quá trình này, tôi bắt đầu thấy một mô hình trong các câu hỏi phỏng vấn JS thường gặp nhất. Trong bài viết này, tôi đã cố gắng liệt kê các khái niệm sẽ bao gồm 80% bất kỳ cuộc phỏng vấn tốt nào của JS.80% of any good JS interview. Vì vậy, nếu bạn đang chuẩn bị cho cuộc phỏng vấn JS tiếp theo thì đây là trò gian lận hoàn hảo để bạn xem xét và củng cố các kỹ năng của bạn. Đi qua điều này và bạn sẽ sẵn sàng để đá. 💃 Phản quốc
Mục lục 📜
Hãy cẩn thận: Trọng tâm ở đây phần lớn sẽ bao gồm các khái niệm liên quan đến cuộc phỏng vấn và không tạo ra một tập sách toàn diện để học ngôn ngữ. Hãy đối xử với điều này giống như một trò gian lận. The focus here will largely be to cover concepts relevant to the interview and not to create a comprehensive booklet for learning the language. Treat this more like a cheatsheet. Nếu bạn muốn lặn sâu và tìm hiểu thêm các khái niệm JS, hãy xem chương trình giảng dạy của Freecodecamp. Với điều đó ngoài đường - chúng ta hãy đi! Cơ bản JavaScriptHãy bắt đầu với một số khái niệm cơ bản mà mọi nhà phát triển JS cần biết. Các biến trong JavaScript 📥Các biến là các khối xây dựng của mọi ngôn ngữ lập trình. Bạn sử dụng chúng để lưu trữ các giá trị. Một biến có thể là một số, chuỗi và nhiều loại khác. Bây giờ, JS là một ngôn ngữ được gõ lỏng lẻo. Bạn không phải nêu loại biến. Bạn chỉ có thể khai báo nó, và JS sẽ tự mình tìm ra nó. Bây giờ, trong JavaScript, chúng tôi có 3 cách để khai báo các biến: 9, 0 và 1.3 ways to declare variables: 9, 0, and 1.Đây là những khác biệt chính: Hãy cố gắng hiểu chúng thông qua các ví dụ. Chúng tôi sẽ bao gồm phạm vi sau này. Hiện tại, hãy tập trung vào những khác biệt khác.
Lưu ý: Trong JavaScript, việc đặt một đại tá sau khi kết thúc tuyên bố là tùy chọn. Tôi sẽ bỏ qua nó ở đây vì mục đích đọc. In JavaScript, putting a semi-colon after the end of statement is optional. I will be skipping it here for the sake of readability. == VS === trong JavaScriptHãy so sánh một số biến. Có hai cách bạn có thể làm điều đó. 2 Chỉ kiểm tra giá trị 3 Kiểm tra giá trị + loại
Mảng trong JavaScriptBây giờ chúng ta đã biết một chút về các biến, chúng ta hãy chuyển sang các mảng và phương pháp mảng. Nếu chúng tôi đã tuyên bố rất nhiều biến số, thật hợp lý khi lưu trữ chúng ở đâu đó. Nếu không, sẽ rất khó để theo dõi tất cả chúng. Mảng là một cách để lưu trữ một biến.
Nhưng chỉ lưu trữ các biến trong một mảng là loại nhàm chán. Chúng ta có thể làm nhiều thứ hơn với mảng này (như truy cập các biến này hoặc thay đổi thứ tự chúng được lưu trữ hoặc cách chúng được lưu trữ). Đối với điều đó, JS có rất nhiều phương pháp. Hãy nhìn vào một số trong số họ bây giờ. Phương thức mảng JavaScript 🧰Các phương pháp mảng được sử dụng thường xuyên nhất trong JS là: 4, 5, 6, 7 và 8.Hãy bao gồm 4, 5 và 8. Bạn có thể khám phá thêm trong bài viết hữu ích này.Phương thức mảng // Return the words with more than 6 letters const words = ['react', 'script', 'interview', 'style', 'javascript'] const ans = words.filter((word) => word.length > 6) console.log(ans) // ['interview', 'javascript'] 4 4 tạo ra một bản sao mới của mảng gốc. Chúng tôi sử dụng nó khi chúng tôi muốn làm điều gì đó với các yếu tố của mảng ban đầu nhưng không muốn thay đổi nó. 4 lặp lại trên mảng gốc và lấy chức năng gọi lại (mà chúng tôi sẽ trình bày sau) làm đối số. Trong chức năng gọi lại, chúng tôi cho nó biết phải làm gì với các yếu tố.
Phương thức mảng // Return the words with more than 6 letters const words = ['react', 'script', 'interview', 'style', 'javascript'] const ans = words.filter((word) => word.length > 6) console.log(ans) // ['interview', 'javascript'] 5 5 tạo ra một mảng mới với các yếu tố đáp ứng (các) điều kiện đã cho.Hãy xem xét một ví dụ. Tôi đã sử dụng các chức năng mũi tên ở đây. Nếu bạn hơi khó chịu với các chức năng, bạn có thể bao gồm phần tiếp theo trước và quay lại.
Cố gắng tự mình thực hiện các bài tập trước để kiểm tra kiến thức của bạn. Nếu bạn đưa ra các giải pháp khác nhau hoặc tốt hơn, hãy cho tôi biết! Nói chung, theo dõi điều này: Bạn có thể làm điều đó mà không cần phương pháp mảng không?
Phương thức mảng // Return the words with more than 6 letters const words = ['react', 'script', 'interview', 'style', 'javascript'] const ans = words.filter((word) => word.length > 6) console.log(ans) // ['interview', 'javascript'] 8 8 rất giống với 4 nhưng có hai khác biệt chính:Trước hết, 4 trả về một mảng mới, nhưng 8 thì không.
Và thứ hai, bạn có thể thực hiện chuỗi phương thức trong 4 nhưng không phải trong 8.
Lưu ý: 4 and 8 don't mutate (change) the original
array.Lập trình chức năng trong JavaScriptChúng tôi đã sử dụng các chức năng ở trên. Hãy trình bày chi tiết hơn bây giờ. Giống như cách chúng tôi sử dụng các biến để lưu trữ các giá trị, chúng tôi có thể sử dụng các chức năng để lưu trữ một đoạn mã mà chúng tôi có thể sử dụng lại. Bạn có thể tạo chức năng theo hai cách:
Bây giờ, hãy bao gồm một số khái niệm quan trọng liên quan đến các chức năng. Phạm vi chức năng trong JavaScriptPhạm vi xác định từ nơi các biến có thể truy cập được. Có ba loại phạm vi:
Hãy nhớ rằng trước đó 9 là phạm vi toàn cầu trong khi 0 và 1 là phạm vi khối. Hãy hiểu điều đó bây giờ. 0Đóng cửa trong javascript (quan trọng) 🔒Chúng tôi đã sử dụng một đóng cửa mà không cần nhận ra nó. Trong ví dụ dưới đây, 9 là một biến đổi kín. 1Phần này sẽ có rất nhiều từ lạ mắt, vì vậy hãy chịu đựng tôi. Chúng tôi sẽ bao gồm từng người một. MDN nói:
Được rồi, môi trường từ vựng là gì? Nó thực chất là trạng thái xung quanh - bộ nhớ địa phương cùng với môi trường từ vựng của cha mẹ.local memory along with the lexical environment of its parent. Whaaat? 🤯 Tôi biết đó là một chút của một doozy. Hãy hiểu nó với một ví dụ đơn giản. 2Khi x được gọi, y được trả lại. Bây giờ, y đang chờ được thực hiện. Kiểu như một khẩu súng được nạp đang chờ được bắn! 🔫 Vì vậy, khi cuối cùng chúng tôi gọi Z, y được viện dẫn. Bây giờ, y phải đăng nhập 0 để trước tiên nó cố gắng tìm nó trong bộ nhớ cục bộ nhưng nó không có ở đó. Nó đi đến chức năng cha mẹ của nó. Nó tìm thấy 0 ở đó.local memory but it's not there. It goes to its parent function. It finds 0 there.Voila! Ở đó bạn có nó - đây là đóng cửa. Ngay cả khi các chức năng được trả về (trong trường hợp trên y), họ vẫn nhớ phạm vi từ vựng của chúng (nơi nó đến từ) Trích dẫn hoàn toàn không liên quan cho các cú đá 👻:
Tôi thề phần còn lại của bài viết là hợp pháp 🤞 Tiếp tục đọc. Ưu điểm của việc đóng cửa trong JavaScript
3
Giả sử bạn muốn tạo một ứng dụng truy cập. Mỗi khi bạn gọi nó, số lượng tăng thêm 1. Nhưng bạn không muốn phơi bày biến bên ngoài hàm. Làm thế nào để làm nó? Bạn đoán nó - đóng cửa! 4Đừng lo lắng về 2 và 3. Chúng tôi có cả một phần dành cho họ dưới đây.Nhược điểm của việc đóng cửa trong JavaScript 😅
Ví dụ, việc đóng kín sẽ không được thu thập rác. Điều này là do, ngay cả khi hàm bên ngoài đã chạy, hàm bên trong được trả về vẫn có một tham chiếu đến các biến đổi kín. Lưu ý: Bộ sưu tập rác về cơ bản sẽ tự động loại bỏ các biến không sử dụng khỏi bộ nhớ. Garbage collection basically removes unused variables from the memory automatically. Nâng cao trong javascript 🚩Đây là hành vi mặc định của JavaScript về việc di chuyển khai báo lên đầu chương trình.
Hãy xem xét một ví dụ: 5Phew! Tôi đã hoàn thành các chức năng ở đây, nhưng nếu bạn muốn nhiều hơn hãy xem bài nói chuyện tuyệt vời này của Anjana Vakil về lập trình chức năng. Đối tượng trong JavaScript 🔮Giống như các mảng, các đối tượng là một cách lưu trữ dữ liệu. Chúng tôi làm như vậy với sự trợ giúp của các cặp giá trị khóa. 6 9 là 0 và 1 là 2. Các khóa thường là tên của các thuộc tính của đối tượng.Chúng ta có thể lưu trữ tất cả các loại dữ liệu như chức năng bên trong một đối tượng. Bạn có thể khám phá thêm ở đây trên MDN. function consoleEven(arr) { let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1)) console.log(data) // undefined } consoleEven(arr) 2 trong JavaScript là gì?Bây giờ, làm việc với các đối tượng là khác nhau trong JS so với các ngôn ngữ lập trình phổ biến khác như C ++. Và để hiểu điều đó đúng cách, chúng ta cần nắm bắt tốt từ khóa 2.Hãy cố gắng hiểu nó từng bước. Trong một chương trình, đôi khi, chúng ta cần một cách để chỉ vào công cụ. Giống như nói chức năng này ngay ở đây thuộc về đối tượng này. 2 giúp chúng tôi có được bối cảnh này.Bạn sẽ hiểu những gì tôi đang nói tốt hơn khi chúng tôi xem xét một số ví dụ. Hiện tại, hãy nghĩ về 2 như một cái gì đó cung cấp bối cảnh. Và hãy nhớ điều quan trọng này: giá trị của nó phụ thuộc vào cách thức và nơi nó được gọi.Tôi biết rồi mà. Rất nhiều 2. Hãy đi qua tất cả điều này từ từ.Bắt đầu một chương trình mới và chỉ đăng nhập 2. 7Nó sẽ chỉ vào đối tượng cửa sổ. Bây giờ, hãy lấy một ví dụ với một đối tượng: 8Bây giờ, 2 sẽ trỏ đến đối tượng. Vậy chuyện gì đang xảy ra ở đây?Trong ví dụ đầu tiên, chúng tôi không có gì còn lại của 0 nên nó mặc định cho đối tượng 1. Nhưng trong ví dụ này, chúng ta có đối tượng 2.Nếu bạn làm: 9Chúng tôi một lần nữa nhận được đối tượng 1. Vì vậy, chúng ta có thể thấy rằng giá trị của 2 phụ thuộc vào cách thức và nơi chúng ta thực hiện cuộc gọi.Những gì chúng tôi vừa làm ở trên được gọi là ràng buộc ngầm. Giá trị của 2 bị ràng buộc với đối tượng.Implicit Binding. The value of 2 got bound to the object.Có một cách khác để sử dụng 2. Liên kết rõ ràng là khi bạn buộc một hàm sử dụng một đối tượng nhất định như 2 của nó.Explicit binding is when you force a function to use a certain object as its 2.Hãy hiểu tại sao chúng ta cần ràng buộc rõ ràng thông qua một ví dụ. 0Chúng tôi đang sử dụng 2 đúng cách, nhưng bạn có thể thấy vấn đề với mã trên không?Chúng tôi đang lặp lại mã. Và một trong những nguyên tắc của lập trình tốt là giữ cho mã của bạn khô ráo! (Đừng lặp lại chính mình) Vì vậy, chúng ta hãy thoát khỏi 9 và chỉ cần làm: 1 00 buộc 01 phải sử dụng đối tượng thứ hai làm 2.Có rất nhiều cách khác chúng ta có thể làm điều này. Cố gắng tự giải quyết vấn đề đã cho. 2Cuối cùng, hãy nhớ rằng tôi đã nói rằng có sự khác biệt giữa các chức năng mũi tên và các chức năng thông thường. Trường hợp của 2 là một trong số đó.Đối với hàm mũi tên, giá trị phụ thuộc vào phạm vi từ vựng - có nghĩa là hàm bên ngoài nơi hàm mũi tên được khai báo. Vì vậy, nếu chúng ta tạo ra 04 từ phía trên hàm mũi tên, sẽ không có gì hoạt động.Mũi tên về cơ bản kế thừa bối cảnh của cha mẹ mà trong trường hợp trên là 1.Nguyên mẫu và kế thừa nguyên mẫu trong JavaScript 👪
Tất cả điều này đến thông qua 06. 07 là đối tượng mà JS đang đặt tất cả.Hãy xem một số ví dụ. Bắn lên bảng điều khiển của bạn! 3Tất cả điều này được gọi là 08.Chúng ta cũng có thể làm tương tự với các đối tượng và chức năng là tốt. Chúng tôi sẽ luôn tìm thấy 09 đằng sau hậu trường. Đó là lý do tại sao bạn có thể đã nghe rằng mọi thứ trong JS là một đối tượng. 🤯Kế thừa nguyên mẫu trong JavaScript là gì? 4Lưu ý: Đừng sửa đổi các nguyên mẫu theo cách này. Nó chỉ để hiểu. Đây là cách đúng đắn để làm điều đó. Don't modify prototypes this way. It's just for understanding. Here's the right way to do it. 5Bằng cách này, 10 có quyền truy cập vào các thuộc tính của đối tượng. Vì vậy, bây giờ chúng ta có thể làm: 6Đây là kế thừa nguyên mẫu.prototypal inheritance. JavaScript không đồng bộ ⚡Vì vậy, JS là một ngôn ngữ duy nhất. Mọi thứ xảy ra cùng một lúc. Chỉ sau khi một điều được thực hiện, chúng ta mới có thể chuyển sang điều tiếp theo. Nhưng điều này tạo ra các vấn đề trong thế giới thực, đặc biệt, khi chúng ta đang làm việc với các trình duyệt. Ví dụ: khi chúng ta cần tìm nạp dữ liệu từ web - thường thì chúng ta không biết sẽ mất bao lâu để có được nó. Và liệu chúng tôi có thể có được dữ liệu thành công hay không. Để giúp điều này, JS không đồng bộ ra đời. Và khái niệm quan trọng nhất để hiểu là vòng lặp sự kiện. Vòng lặp sự kiện trong JavaScript ➰Thay vì cung cấp một lời giải thích nửa nướng ở đây, tôi khuyên bạn nên xem video này của Philip Roberts nếu bạn chưa có: Tìm hiểu tất cả về các vòng lặp sự kiện trong JS ở đây. Bộ hẹn giờ trong JavaScript - SetTimeout, SetInterVal, ClearInterVal ⏱Tôi hy vọng bạn đã xem video. Nó đề cập đến bộ hẹn giờ. Hãy nói về họ nhiều hơn bây giờ. Đây là những điều rất thường xuyên được hỏi về các cuộc phỏng vấn. Phương pháp 11 gọi hàm hoặc đánh giá một biểu thức sau một số mili giây được chỉ định. 12 làm tương tự cho các khoảng thời gian được chỉ định. 7Bạn sử dụng 13 để dừng bộ đếm thời gian. 8Hãy xem qua một số câu hỏi sử dụng các khái niệm này. 9Đây là một điều khó khăn hơn một chút: 0Và đây là một lời giải thích ngắn về những gì đang diễn ra ở đó: Khi 14 lại xuất hiện trong bức tranh, toàn bộ vòng lặp đã chạy và giá trị của 15 đã trở thành 6,Bây giờ, giả sử chúng tôi muốn kết quả là 1 2 3 4 5 - chúng ta phải làm gì? Thay vì 9 ➡ Sử dụng 0.Tại sao điều này sẽ hoạt động? 9 là phạm vi toàn cầu nhưng 0 là phạm vi địa phương. Vì vậy, đối với 0, một 21 mới được tạo cho mỗi lần lặp.Lời hứa trong JavaScript (quan trọng) 🤝Những lời hứa là trung tâm của JS không đồng bộ.
Một lời hứa có thể ở một trong ba tiểu bang này:
1Lưu ý: 22 and 23 are just conventional names. Call it pizza🍕 if you like.Thay vì 24, chúng ta cũng có thể sử dụng 25: 2Một trong những lợi thế của những lời hứa là chúng là một cú pháp sạch hơn nhiều. Trước khi chúng tôi hứa, chúng tôi có thể dễ dàng bị mắc kẹt trong cuộc gọi lại địa ngục 🌋 Các khái niệm JavaScript nâng cao để biếtPolyfills trong JavaScript
3Lưu ý cách chúng tôi sử dụng 2. Ở đây, về cơ bản chúng tôi đã tạo ra một mảng mới và đang thêm các giá trị vào nó.Async và trì hoãn trong JavaScriptNhững khái niệm này thường được hỏi về các cuộc phỏng vấn của các tập đoàn lớn như Amazon, Walmart và Flipkart. 🏢 Để hiểu 28 và 29, chúng ta cần có ý tưởng về cách trình duyệt hiển thị trang web. Đầu tiên, họ phân tích HTML và CSS. Sau đó, cây Dom được tạo ra. Từ những cái này, một cây kết xuất được tạo ra. Cuối cùng, từ cây kết xuất - một bố cục được tạo ra và bức tranh xảy ra.Để có cái nhìn chi tiết hơn, hãy xem video này. Async và Defer là các thuộc tính 30 có thể được tải cùng với các thẻ script. Chúng rất hữu ích để tải các tập lệnh bên ngoài vào trang web của bạn.Hãy hiểu với sự giúp đỡ của hình ảnh. Nếu có nhiều tập lệnh phụ thuộc vào nhau, hãy sử dụng 29. Tập lệnh trì hoãn được thực thi theo thứ tự mà chúng được xác định.Nếu bạn muốn tải tập lệnh bên ngoài không phụ thuộc vào việc thực thi bất kỳ tập lệnh nào khác, hãy sử dụng 28.Lưu ý: Thuộc tính Async không đảm bảo thứ tự thực thi các tập lệnh. The async attribute does not guarantee the order of execution of scripts. Debounting trong JavaScriptDebouncing là một chủ đề yêu thích khác của người phỏng vấn. Hãy hiểu nó bằng cách tạo một thanh tìm kiếm. Demo: https://codesandbox.io/s/debounce-putput-field-o5gml https://codesandbox.io/s/debounce-input-field-o5gml Tạo một trường đầu vào đơn giản trong 33 như thế này: 4Bây giờ, trong 34. Đừng quên thêm nó vào 33 trước: 5Đầu tiên, chúng tôi đã chọn đầu vào và thêm một 36 cho nó. Sau đó, chúng tôi đã tạo một chức năng gỡ lỗi có chức năng gọi lại và độ trễ.Bây giờ, bên trong chức năng Debounce, chúng tôi tạo bộ hẹn giờ bằng 14. Bây giờ, công việc của bộ đếm thời gian này là đảm bảo rằng cuộc gọi tiếp theo cho 38 chỉ xảy ra sau 300 ms. Đây là những gì gỡ rối là.Ngoài ra, chúng tôi sử dụng 39 để loại bỏ nó. Không muốn quá nhiều người trong số họ treo ngoài đó chiếm không gian bộ nhớ!Phew! Rất nhiều lý thuyết. Hãy làm một thử thách thú vị. Bạn hẳn đã thấy việc đếm ngược trước khi một trò chơi bắt đầu (nó diễn ra như 10, 9, 8, .... với một số độ trễ ở giữa). Cố gắng viết một chương trình cho nó. Đây là cách bạn làm điều đó: 6Bạn có thể giải quyết nó không? Bạn đã làm điều đó khác nhau? Hãy cho tôi biết giải pháp của bạn. Điều chỉnh trong JavaScript 🛑Hãy xem xét một ví dụ một lần nữa. Giả sử rằng trên mỗi cửa sổ thay đổi kích thước sự kiện, chúng ta gọi là một chức năng đắt tiền. Bây giờ, chúng tôi muốn nó sao cho hàm đắt tiền sẽ chỉ được thực hiện một lần trong khoảng thời gian nhất định. Đây là những gì điều tiết là. Tạo một 33 và 34 với mã sau: 7Gần như giống như gỡ lỗi. Sự khác biệt chính là biến 42. Chỉ, khi đúng, chúng ta đang gọi chức năng gọi lại. Và nó được đặt thành 43 bên trong 14. Vì vậy, giá trị là 43 chỉ sau giới hạn thời gian mong muốn.Vì vậy, sự khác biệt giữa các cuộc tranh luận và điều chỉnh đó là gìHãy lấy thanh tìm kiếm 🔍 ví dụ từ trên cao. Khi chúng tôi ghi chú trường đầu vào, chúng tôi sẽ nói chỉ tìm nạp dữ liệu khi sự khác biệt giữa hai sự kiện 46 là ít nhất 300 ms.Trong trường hợp điều chỉnh, chúng tôi thực hiện một cuộc gọi chức năng chỉ sau một khoảng thời gian nhất định. Giả sử rằng bạn đang tìm kiếm một bách khoa toàn thư trong thanh tìm kiếm. Cuộc gọi đầu tiên được thực hiện trên 47 và chúng tôi đã mất 300 ms để đạt 48. Cuộc gọi tiếp theo sẽ được thực hiện sau đó chỉ. Tất cả các sự kiện ở giữa sẽ bị bỏ qua.Vì vậy, để tóm tắt, gỡ lỗi là khi sự khác biệt giữa hai sự kiện 46 là 300 ms. Và điều chỉnh là khi sự khác biệt giữa hai cuộc gọi hàm là 300 ms. Về cơ bản, chức năng được gọi sau một khoảng thời gian nhất định.Lưu trữ trong JavaScript 💾Cuối cùng, một chủ đề nhỏ nhưng quan trọng để kết thúc mọi thứ. LocalStorage: Dữ liệu vẫn tồn tại ngay cả sau khi kết thúc phiên của bạn Data persists even after closing your session SessionStorage: Bạn mất dữ liệu khi phiên kết thúc, như khi bạn đóng trình duyệt trên tab. You lose your data when your session is over, like when you close the browser on the tab. 8Và chúng tôi đã hoàn thành! Tôi hy vọng bạn cảm thấy tự tin hơn về cuộc phỏng vấn JS tiếp theo của bạn bây giờ. Tôi chúc bạn mọi điều tốt đẹp nhất. Nếu bạn có bất kỳ truy vấn/đề xuất/phản hồi nào, bạn có thể liên hệ với tôi trên Twitter: https://twitter.com/rajatetc. Tài liệu tham khảo chính
Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu |