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

  • 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ướng dẫn javascript refresher for interview - bồi dưỡng javascript cho cuộc phỏng vấn

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']
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']
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']
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 ý:

// 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 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']
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

1

Phầ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

2

Khi 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.

  • 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 Tuyên bố được nâng lên và khởi tạo với
    
    function consoleEven(arr) {
      let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
      console.log(data) // undefined
    }
    
    consoleEven(arr)
    
    5.
  • Các tuyên bố
    // 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 được nâng lên nhưng không được khởi tạo.
  • 
    function consoleEven(arr) {
      let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
      console.log(data) // undefined
    }
    
    consoleEven(arr)
    
    8 Định nghĩa cũng được nâng lên và lưu trữ như hiện tại.

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

5

Phew! 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ì?

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

7

Nó 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

8

Bâ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

9

Chú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']
0

Chú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.

Hướng dẫn javascript refresher for interview - bồi dưỡng javascript cho cuộc phỏng vấn

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']
2

Cuố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']
3

Tấ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']
4

Lư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']
5

Bằ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']
7

Bạ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']
8

Hã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]
0

Và đâ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]
1

Lưu ý:


let a = 5 // number
let b = '5' // string

console.log(a == b) // true

console.log(a === b) // false

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

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]
2

Mộ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
    // 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:
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]
3

Lư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.

Hướng dẫn javascript refresher for interview - bồi dưỡng javascript cho cuộc phỏng vấn

Hướng dẫn javascript refresher for interview - bồi dưỡng javascript cho cuộc phỏng vấn

Hướng dẫn javascript refresher for interview - bồi dưỡng javascript cho cuộc phỏng vấn

Hướng dẫn javascript refresher for interview - bồi dưỡng javascript cho cuộc phỏng vấn

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: 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


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]
4

Bâ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]
6

Bạ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]
7

Gầ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]
8

Và 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

  • 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