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.
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
- Kiến thức cơ bản về web và lập trình
- Làm quen với HTML/CSS và JavaScript [đặc biệt là ES6+ Cú pháp]
Mục lục 📜
- Khái niệm cơ bản của JavaScript - Các biến và phương thức mảng JS
- Lập trình chức năng trong JavaScript - Phạm vi, đóng cửa và nâng
- Các đối tượng trong JavaScript - Nguyên mẫu và "Điều này"
- JavaScript không đồng bộ - vòng lặp sự kiện, bộ hẹn giờ và lời hứa
- Các khái niệm JavaScript nâng cao để biết - Async/Defer, Polyfills, Debouncing và Throttling
- Lưu trữ trong JavaScript
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 JavaScript
Hã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:
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
9, // 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']
0 và // 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']
1.3 ways to declare variables: const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
9, // 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']
0, and // 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']
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.
var a = 3
var a = 4
console.log[a] // 4 as var variables can be redeclared + updated
let b = 3
let b = 4
console.log[b] // Syntax Error as let variables cannot be redeclared
// If we just do, it will work because it can be updated
b = 4
const c = 3
const c = 4
console.log[c] // Syntax Error as const variables cannot be redeclared or updated
const d
// Will this throw an error? Go through the table and try to find the answer.
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 JavaScript
Hãy so sánh một số biến. Có hai cách bạn có thể làm điều đó.
// 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']
2 Chỉ kiểm tra giá trị// 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']
3 Kiểm tra giá trị + loại
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
Mảng trong JavaScript
Bâ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.
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
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à:
// 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, // 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, // 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']
6, // 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']
7 và // 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.Hãy bao gồm
// 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, // 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 và // 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. 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
// 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']
// 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 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ó.// 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 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ố.const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
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
// 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']
// 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 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.
// 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']
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?
let newArr = []
for [let i = 0; i < words.length; i++] {
if [words[i].length > 6] {
newArr.push[words[i]]
}
}
console.log[newArr]
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
// 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']
// 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 rất giống với // 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 nhưng có hai khác biệt chính:Trước hết,
// 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 trả về một mảng mới, như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 thì không.// Return a new array where even numbers are multiplied by 2
let arr = [1, 2, 3, 4, 5, 6, 7]
function consoleEven[arr] {
let data = arr.map[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // [1, 4, 3, 8, 5, 12, 7]
}
// ? is the ternary operator. If the condition is true - first statement is returned otherwise the second one.
consoleEven[arr]
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
Và thứ hai, bạn có thể thực hiện chuỗi phương thức trong
// 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 nhưng không phải trong // 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.
// Convert the new array back to original
function consoleEven[arr] {
let data = arr
.map[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
.map[[item] => [item % 2 === 0 ? item / 2 : item / 1]]
console.log[data]
}
consoleEven[arr]
Lưu ý:
4 và // 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 Đừng đột biến [thay đổi] mảng ban đầu. // 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']
// 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 and // 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 don't mutate [change] the original
array.Lập trình chức năng trong JavaScript
Chú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:
function a[]{
console.log['I am a normal function'];
}
const b = [] => {
console.log['I am an arrow function']
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = [name] => {
console.log[`My name is ${name}`]
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = [] => {
const prefix = 'Mr'
return [name] => {
console.log[`${prefix} ${name}, welcome!`]
}
}
console.log[greet[]['Jack']]
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 JavaScript
Phạ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:
- Toàn cầu [Tuyên bố ngoài bất kỳ chức năng nào]
- Hàm [khai báo bên trong một hàm]
- Khối [khai báo bên trong một khối]
Hãy nhớ rằng trước đó
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
9 là phạm vi toàn cầu trong khi // 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']
0 và // 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']
1 là phạm vi khối. Hãy hiểu điều đó bây giờ.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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,
// Return a new array where even numbers are multiplied by 2
let arr = [1, 2, 3, 4, 5, 6, 7]
function consoleEven[arr] {
let data = arr.map[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // [1, 4, 3, 8, 5, 12, 7]
}
// ? is the ternary operator. If the condition is true - first statement is returned otherwise the second one.
consoleEven[arr]
9 là một biến đổi kín.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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:
Một chức năng được gói cùng với môi trường từ vựng của nó tạo thành một đóng cửa.
Đượ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.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
0 ở đó.local memory but it's not there. It goes to its parent function. It finds
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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ú đá 👻:
Họ có thể quên những gì bạn đã nói - nhưng họ sẽ không bao giờ quên bạn cảm thấy thế nào - Carl W. Buehner
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
- Cà ri
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
3- Ẩn/đóng gói dữ liệu
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!
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
4Đừng lo lắng về
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
2 và
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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 😅
- Việc tiêu thụ quá mức của bộ nhớ hoặc rò rỉ bộ nhớ có thể xảy ra.
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.
9 Tuyên bố được nâng lên và khởi tạo vớiconst a = [1,2,3,4,5] // Create a new array which multiplies every element by 2 const d = a.map[function[item]{ return item*2 }] console.log[d] // [2,4,6,8,10]
5.function consoleEven[arr] { let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]] console.log[data] // undefined } consoleEven[arr]
- Các tuyên bố
0 và// 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']
1 được nâng lên nhưng không được khởi tạo.// 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 Định nghĩa cũng được nâng lên và lưu trữ như hiện tại.function consoleEven[arr] { let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]] console.log[data] // undefined } consoleEven[arr]
Hãy xem xét một ví dụ:
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
6
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
9 là
// Convert the new array back to original
function consoleEven[arr] {
let data = arr
.map[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
.map[[item] => [item % 2 === 0 ? item / 2 : item / 1]]
console.log[data]
}
consoleEven[arr]
0 và
// Convert the new array back to original
function consoleEven[arr] {
let data = arr
.map[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
.map[[item] => [item % 2 === 0 ? item / 2 : item / 1]]
console.log[data]
}
consoleEven[arr]
1 là
// Convert the new array back to original
function consoleEven[arr] {
let data = arr
.map[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
.map[[item] => [item % 2 === 0 ? item / 2 : item / 1]]
console.log[data]
}
consoleEven[arr]
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ì?
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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.
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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ề
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
2.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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:
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
8Bây giờ,
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
function a[]{
console.log['I am a normal function'];
}
const b = [] => {
console.log['I am an arrow function']
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = [name] => {
console.log[`My name is ${name}`]
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = [] => {
const prefix = 'Mr'
return [name] => {
console.log[`${prefix} ${name}, welcome!`]
}
}
console.log[greet[]['Jack']]
0 nên nó mặc định cho đối tượng function a[]{
console.log['I am a normal function'];
}
const b = [] => {
console.log['I am an arrow function']
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = [name] => {
console.log[`My name is ${name}`]
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = [] => {
const prefix = 'Mr'
return [name] => {
console.log[`${prefix} ${name}, welcome!`]
}
}
console.log[greet[]['Jack']]
1. Nhưng trong ví dụ này, chúng ta có đối tượng function a[]{
console.log['I am a normal function'];
}
const b = [] => {
console.log['I am an arrow function']
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = [name] => {
console.log[`My name is ${name}`]
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = [] => {
const prefix = 'Mr'
return [name] => {
console.log[`${prefix} ${name}, welcome!`]
}
}
console.log[greet[]['Jack']]
2.Nếu bạn làm:
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
9Chúng tôi một lần nữa nhận được đối tượng
function a[]{
console.log['I am a normal function'];
}
const b = [] => {
console.log['I am an arrow function']
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = [name] => {
console.log[`My name is ${name}`]
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = [] => {
const prefix = 'Mr'
return [name] => {
console.log[`${prefix} ${name}, welcome!`]
}
}
console.log[greet[]['Jack']]
1. Vì vậy, chúng ta có thể thấy rằng giá trị của
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
2 bị ràng buộc với đối tượng.Implicit Binding. The value of
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
2 got bound to the object.Có một cách khác để sử dụng
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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ư
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
2 của nó.Explicit binding is when you force a function to use a certain object as its
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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ụ.
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
0Chúng tôi đang sử dụng
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
function a[]{
console.log['I am a normal function'];
}
const b = [] => {
console.log['I am an arrow function']
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = [name] => {
console.log[`My name is ${name}`]
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = [] => {
const prefix = 'Mr'
return [name] => {
console.log[`${prefix} ${name}, welcome!`]
}
}
console.log[greet[]['Jack']]
9 và chỉ cần làm:
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
1
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
00 buộc
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
01 phải sử dụng đối tượng thứ hai làm
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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.
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
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
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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à
function a[]{
console.log['I am a normal function'];
}
const b = [] => {
console.log['I am an arrow function']
}
// They are essentially the same but with a few differences which we will cover as we go along this tutorial.
// We can pass variables as arguments
const c = [name] => {
console.log[`My name is ${name}`]
}
// `` template literal are a new addition to the language. Very useful for string formatting. Values are accessed using ${} inside them.
// We can even pass functions as arguments to a function. Will see more on this when we try to understand closures.
const greet = [] => {
const prefix = 'Mr'
return [name] => {
console.log[`${prefix} ${name}, welcome!`]
}
}
console.log[greet[]['Jack']]
1.Nguyên mẫu và kế thừa nguyên mẫu trong JavaScript 👪
Bất cứ khi nào chúng tôi tạo bất cứ thứ gì [như một đối tượng hoặc hàm] trong JavaScript, công cụ JS sẽ tự động gắn thứ đó với một số thuộc tính và phương thức.
Tất cả điều này đến thông qua
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
06.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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!
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
3Tất cả điều này được gọi là
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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ì?
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
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.
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
5Bằng cách này,
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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:
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
12 làm tương tự cho các khoảng thời gian được chỉ định.
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
7Bạn sử dụng
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
13 để dừng bộ đếm thời gian.
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
8Hãy xem qua một số câu hỏi sử dụng các khái niệm này.
let a = 4
const b = 5
var c = 'hello'
const array = [a, b, c]
// or you can just directly do
const arr = [4,5,'hello']
9Đây là một điều khó khăn hơn một chút:
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
0Và đây là một lời giải thích ngắn về những gì đang diễn ra ở đó: Khi
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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ì
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
9 ➡ Sử dụ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']
0.Tại sao điều này sẽ hoạt động?
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
9 là phạm vi toàn cầu như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']
0 là phạm vi địa phương. Vì vậy, đối với // 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']
0, một
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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ộ.
Đối tượng Promise thể hiện sự hoàn thành cuối cùng [hoặc thất bại] của một hoạt động không đồng bộ và giá trị kết quả của nó.
Một lời hứa có thể ở một trong ba tiểu bang này:
- Đang chờ xử lý: trạng thái ban đầu, không hoàn thành cũng không bị từ chối
- Hoàn thành: Hoạt động đã hoàn thành thành công
- Bị từ chối: Hoạt động không thành công
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
1Lưu ý:
22 và
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
23 chỉ là tên thông thường. Gọi nó là pizza🍕 nếu bạn thích.
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
22 and
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
23 are just conventional names. Call it pizza🍕 if you like.Thay vì
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
24, chúng ta cũng có thể sử dụng
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
25:const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
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ết
Polyfills trong JavaScript
Polyfill là một đoạn mã [thường là JavaScript trên web] được sử dụng để cung cấp chức năng hiện đại trên các trình duyệt cũ không hỗ trợ nó. Mdn
- Hãy thực hiện nó cho
4:// 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']
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
3Lưu ý cách chúng tôi sử dụng
function consoleEven[arr] {
let data = arr.forEach[[num] => [num % 2 === 0 ? num * 2 : num * 1]]
console.log[data] // undefined
}
consoleEven[arr]
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 JavaScript
Nhữ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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
28 và
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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 JavaScript
Debouncing 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: //codesandbox.io/s/debounce-putput-field-o5gml //codesandbox.io/s/debounce-input-field-o5gml
Tạo một trường đầu vào đơn giản trong
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
33 như thế này:const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
4Bây giờ, trong
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
34. Đừng quên thêm nó vào
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
33 trước:const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
5Đầu tiên, chúng tôi đã chọn đầu vào và thêm một
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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 đó:
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
33 và
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
34 với mã sau:const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
7Gần như giống như gỡ lỗi. Sự khác biệt chính là biến
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
42. Chỉ, khi đúng, chúng ta đang gọi chức năng gọi lại. Và nó được đặt thành
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
43 bên trong
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
14. Vì vậy, giá trị là
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
47 và chúng tôi đã mất 300 ms để đạt
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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
let a = 5 // number
let b = '5' // string
console.log[a == b] // true
console.log[a === b] // false
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.
const a = [1,2,3,4,5]
// Create a new array which multiplies every element by 2
const d = a.map[function[item]{ return item*2 }]
console.log[d] // [2,4,6,8,10]
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: //twitter.com/rajatetc.
Tài liệu tham khảo chính
- Tài liệu MDN
- Akshay Saini
- Coding Addict
- Javascript_Interviews
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