Bảng mã JavaScript ES6 pdf

"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // "   hello"
"hello".padEnd(8) // "hello   " 
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")

5 là

"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // "   hello"
"hello".padEnd(8) // "hello   " 
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")

6 mới. Các hằng số hoạt động giống như

"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // "   hello"
"hello".padEnd(8) // "hello   " 
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")

5, nhưng không thể gán lại. Nhìn thấy.

Tài liệu này là một tài liệu dành cho JavaScript mà bạn sẽ thường gặp trong các dự án hiện đại và hầu hết các mã mẫu hiện đại

Hướng dẫn này không nhằm dạy bạn JavaScript từ đầu, mà để giúp các nhà phát triển có kiến ​​thức cơ bản, những người có thể gặp khó khăn trong việc làm quen với các cơ sở mã hiện đại (hoặc giả sử học React chẳng hạn) vì các khái niệm JavaScript được sử dụng

Bên cạnh đó, đôi khi tôi sẽ cung cấp các mẹo cá nhân có thể gây tranh cãi nhưng sẽ lưu ý rằng đó là đề xuất cá nhân khi tôi làm như vậy

Ghi chú. Hầu hết các khái niệm được giới thiệu ở đây đều đến từ bản cập nhật ngôn ngữ JavaScript (ES2015, thường được gọi là ES6). Bạn có thể tìm thấy các tính năng mới được bổ sung bởi bản cập nhật này tại đây;

Tài nguyên bổ sung

Khi bạn đấu tranh để hiểu một khái niệm, tôi khuyên bạn nên tìm kiếm câu trả lời trên các nguồn sau

Mục lục

quan niệm

Sự định nghĩa biến. var, const, hãy để

Trong JavaScript, có sẵn ba từ khóa để khai báo một biến và mỗi từ khóa đều có sự khác biệt của nó. Đó là

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

5,

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

6 và

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

7

giải thích ngắn

Các biến được khai báo với từ khóa

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

7 không thể được chỉ định lại, trong khi

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

6 và

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

5 có thể

Tôi khuyên bạn nên luôn khai báo các biến của mình với ____3_______7 theo mặc định, nhưng với ____3_______6 nếu đó là một biến mà bạn cần thay đổi hoặc gán lại sau này

mã mẫu

const person = "Nick";
person = "John" // Will raise an error, person can't be reassigned

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

Lời giải chi tiết

Biến của một biến đại khái có nghĩa là “biến này có sẵn ở đâu trong mã”

var

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

5 biến được khai báo là phạm vi chức năng, nghĩa là khi một biến được tạo trong một hàm, mọi thứ trong hàm đó đều có thể truy cập vào biến đó. Ngoài ra, không thể truy cập một biến phạm vi chức năng được tạo trong một chức năng bên ngoài chức năng này

Tôi khuyên bạn nên hình dung nó như thể một biến trong phạm vi X có nghĩa là biến này là một thuộc tính của X

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

Vẫn tập trung vào phạm vi biến, đây là một ví dụ tinh tế hơn

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

Ngoài ra, các biến được khai báo var được chuyển lên đầu phạm vi khi thực thi. Đây là những gì chúng ta gọi

Phần mã này

console.log(myVar) // undefined -- no error raised
var myVar = 2;

được hiểu khi thực hiện như

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

cho phép

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

5 và

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

6 gần giống nhau, nhưng biến khai báo

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

6

• nằm trong phạm vi khối
• không thể truy cập trước khi chúng được chỉ định
• không thể được khai báo lại trong cùng một phạm vi

Hãy xem tác động của phạm vi khối lấy ví dụ trước của chúng tôi

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

Bây giờ, ý nghĩa của việc biến let (và const) không thể truy cập được trước khi được gán

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

Ngược lại với các biến var, nếu bạn cố gắng đọc hoặc viết trên một biến let hoặc const trước khi chúng được gán thì một lỗi sẽ xuất hiện. Hiện tượng này thường được gọi là hoặc TDZ

Ghi chú. Về mặt kỹ thuật, các khai báo biến let và const cũng đang được nâng lên, nhưng không phải là phép gán của chúng. Vì chúng được tạo ra để không thể sử dụng chúng trước khi gán, nên theo trực giác, có cảm giác như không có cẩu, nhưng có. Tìm hiểu thêm về lời giải thích rất chi tiết này tại đây nếu bạn muốn biết thêm

Ngoài ra, bạn không thể khai báo lại biến let

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

hằng số

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

7 các biến đã khai báo hoạt động giống như các biến let, nhưng chúng cũng không thể được gán lại

Tóm lại, các biến const

• nằm trong phạm vi khối
• không thể truy cập trước khi được chỉ định
• không thể được khai báo lại trong cùng một phạm vi
• không thể chỉ định lại

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

0

Nhưng có một sự tinh tế.

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

7 biến không. Cụ thể, điều đó có nghĩa là các biến được khai báo của đối tượng và mảng

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

7 có thể bị thay đổi

Đối với các đối tượng

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

1

Đối với mảng

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

2

tài nguyên bên ngoài

chức năng mũi tên

Bản cập nhật JavaScript ES6 đã giới thiệu các hàm mũi tên, đây là một cách khác để khai báo và sử dụng các hàm. Dưới đây là những lợi ích mà chúng mang lại

• Ngắn gọn hơn
• cái này được chọn từ môi trường xung quanh
• trả lại ngầm định

mã mẫu

• Kết luận và trả lại ngầm định

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

3

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

4

Trong một hàm mũi tên, giá trị này bằng với giá trị này của bối cảnh thực thi kèm theo. Về cơ bản, với arrow functions, bạn không cần phải làm thủ thuật “that = this” trước khi gọi một hàm bên trong một hàm nữa

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

5

Lời giải chi tiết

súc tích

Các hàm mũi tên ngắn gọn hơn các hàm truyền thống theo nhiều cách. Hãy xem xét tất cả các trường hợp có thể

• Trả về tiềm ẩn VS rõ ràng

Trả về rõ ràng là một hàm trong đó từ khóa trả về được sử dụng trong phần thân của nó

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

6

Theo cách viết hàm truyền thống, trả về luôn rõ ràng. Nhưng với các hàm mũi tên, bạn có thể thực hiện trả về ngầm định, điều đó có nghĩa là bạn không cần sử dụng từ khóa return để trả về một giá trị

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

7

Vì chức năng này chỉ trả về một cái gì đó (không có hướng dẫn trước từ khóa trả về), chúng tôi có thể thực hiện trả về ngầm định

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

8

Để làm như vậy, chúng ta chỉ cần bỏ dấu ngoặc và từ khóa return. Đó là lý do tại sao nó được gọi là trả về ngầm định, không có từ khóa trả về, nhưng hàm này thực sự sẽ trả về

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

10

Ghi chú. Nếu hàm của bạn không trả về một giá trị (có tác dụng phụ), thì nó không thực hiện trả về rõ ràng hay ẩn

Ngoài ra, nếu bạn muốn trả về một đối tượng hoàn toàn, bạn phải có dấu ngoặc đơn xung quanh nó vì nó sẽ xung đột với dấu ngoặc nhọn

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

9

Nếu hàm của bạn chỉ nhận một tham số, bạn có thể bỏ qua dấu ngoặc đơn xung quanh nó. Nếu chúng tôi lấy lại mã kép ở trên

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

0

Dấu ngoặc đơn xung quanh tham số có thể tránh được

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

1

Khi không có đối số nào được cung cấp cho hàm mũi tên, bạn cần cung cấp dấu ngoặc đơn, nếu không cú pháp sẽ không hợp lệ

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

2

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

3

tài liệu tham khảo này

Để hiểu sự tinh tế này được giới thiệu với các hàm mũi tên, bạn phải biết cách hoạt động trong JavaScript

Trong một hàm mũi tên, giá trị này bằng với giá trị này của bối cảnh thực thi kèm theo. Điều đó có nghĩa là một hàm mũi tên không tạo cái này mới, thay vào đó, nó lấy nó từ xung quanh nó

Không có arrow function, nếu bạn muốn truy cập một biến từ this trong một hàm bên trong một hàm, bạn phải sử dụng thủ thuật that = this hoặc self = this

Chẳng hạn, sử dụng hàm setTimeout bên trong myFunc

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

4

Nhưng với chức năng mũi tên, cái này được lấy từ xung quanh nó

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

5

tài nguyên hữu ích

Giá trị tham số mặc định của hàm

Bắt đầu từ bản cập nhật JavaScript ES2015, bạn có thể đặt giá trị mặc định cho các tham số chức năng của mình bằng cú pháp sau

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

6

Tham số mặc định được áp dụng trong hai và chỉ hai trường hợp

• Không có tham số được cung cấp
• tham số không xác định được cung cấp

Nói cách khác, nếu bạn truyền null thì tham số mặc định sẽ không được áp dụng

Ghi chú. Gán giá trị mặc định cũng có thể được sử dụng với các tham số bị hủy cấu trúc (xem khái niệm tiếp theo để xem ví dụ)

tài nguyên bên ngoài

Phá hủy các đối tượng và mảng

Phá hủy là một cách thuận tiện để tạo các biến mới bằng cách trích xuất một số giá trị từ dữ liệu được lưu trữ trong các đối tượng hoặc mảng

Để đặt tên cho một vài trường hợp sử dụng, việc hủy cấu trúc có thể được sử dụng để hủy cấu trúc các tham số chức năng hoặc điều này. props trong các dự án React chẳng hạn

Giải thích với mã mẫu

Hãy xem xét đối tượng sau cho tất cả các mẫu

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

7

Không phá hủy

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

8

Với phá hủy, tất cả trong một dòng

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

9

Ghi chú. Trong

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

11, dấu ngoặc sau từ khóa const không được sử dụng để khai báo một đối tượng hay một khối mà là cú pháp phá hủy

Hủy cấu trúc thường được sử dụng để hủy cấu trúc các tham số của đối tượng trong các hàm

Không phá hủy

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

0

Khi phá hủy tham số đối tượng person, chúng ta có một hàm ngắn gọn hơn

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

1

Việc hủy cấu trúc thậm chí còn dễ chịu hơn khi sử dụng với

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

2

Hãy xem xét mảng sau

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

3

Không phá hủy

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

4

Với phá hủy

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

5

tài nguyên hữu ích

Các phương thức mảng - ánh xạ/lọc/giảm/tìm

Ánh xạ, lọc, rút ​​gọn và tìm là các phương thức mảng đến từ một mô hình lập trình có tên là lập trình chức năng

Tóm lại

• Mảng. nguyên mẫu. map() lấy một mảng, thực hiện điều gì đó trên các phần tử của nó và trả về một mảng với các phần tử đã chuyển đổi
• Mảng. nguyên mẫu. filter() lấy một mảng, quyết định từng phần tử xem nó có nên giữ lại hay không và trả về một mảng chỉ với các phần tử được giữ
• Mảng. nguyên mẫu. reduce() lấy một mảng và tổng hợp các phần tử thành một giá trị duy nhất (được trả về)
• Mảng. nguyên mẫu. find() lấy một mảng và trả về phần tử đầu tiên thỏa mãn điều kiện đã cho

Tôi khuyên bạn nên sử dụng chúng càng nhiều càng tốt theo các nguyên tắc lập trình chức năng vì chúng có thể kết hợp được, ngắn gọn và thanh lịch

Với bốn phương thức đó, bạn có thể tránh sử dụng các vòng lặp for và forEach trong hầu hết các trường hợp. Khi bạn muốn thực hiện một vòng lặp for, hãy thử thực hiện với bản đồ, bộ lọc, thu gọn và tìm tổng hợp. Ban đầu, bạn có thể gặp khó khăn khi thực hiện vì nó yêu cầu bạn học cách suy nghĩ mới, nhưng khi bạn đã hiểu thì mọi thứ sẽ trở nên dễ dàng hơn.

mã mẫu

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

6

Tính tổng điểm cho học sinh từ lớp 10 trở lên bằng cách soạn bản đồ, lọc và rút gọn

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

7

Giải trình

Hãy xem xét mảng số sau đây cho các ví dụ của chúng tôi

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

8

Mảng. nguyên mẫu. bản đồ()

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

9

Điều gì đang xảy ra ở đây? . bản đồ trên mảng số, bản đồ đang lặp lại trên từng phần tử của mảng và chuyển nó vào hàm của chúng tôi. Mục tiêu của hàm là tạo và trả về một giá trị mới từ giá trị được truyền để bản đồ có thể thay thế nó

Hãy trích xuất chức năng này để làm cho nó rõ ràng hơn, chỉ cho điều này một lần

console.log(myVar) // undefined -- no error raised
var myVar = 2;

0

Ghi chú. Bạn sẽ thường xuyên gặp phải phương pháp này được sử dụng kết hợp với

console.log(myVar) // undefined -- no error raised
var myVar = 2;

1

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

12 tạo ra

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

13 bằng với

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

14

Ghi chú. Nếu bạn không cần trả về một mảng mới và chỉ muốn thực hiện một vòng lặp có tác dụng phụ, bạn có thể chỉ muốn sử dụng vòng lặp for/forEach thay vì bản đồ

Mảng. nguyên mẫu. lọc()

console.log(myVar) // undefined -- no error raised
var myVar = 2;

2

Ghi chú. Bạn sẽ thường xuyên gặp phải phương pháp này được sử dụng kết hợp với

console.log(myVar) // undefined -- no error raised
var myVar = 2;

3

Chúng tôi đang sử dụng. bộ lọc trên mảng số, bộ lọc đang lặp lại trên từng phần tử của mảng và chuyển nó vào hàm của chúng ta. Mục tiêu của hàm là trả về một boolean sẽ xác định xem giá trị hiện tại có được giữ hay không. Bộ lọc sau đó trả về mảng chỉ với các giá trị được lưu giữ

Mảng. nguyên mẫu. giảm bớt()

Mục tiêu của phương thức rút gọn là giảm tất cả các phần tử của mảng mà nó lặp lại thành một giá trị duy nhất. Cách nó tổng hợp các yếu tố đó tùy thuộc vào bạn

console.log(myVar) // undefined -- no error raised
var myVar = 2;

4

Ghi chú. Bạn sẽ thường xuyên gặp phải phương pháp này được sử dụng kết hợp với

console.log(myVar) // undefined -- no error raised
var myVar = 2;

5

Cũng giống như cho. bản đồ và. phương pháp lọc,. reduce được áp dụng trên một mảng và lấy một hàm làm tham số đầu tiên

Tuy nhiên, lần này, có những thay đổi

• reduce nhận hai tham số

Tham số đầu tiên là một hàm sẽ được gọi ở mỗi bước lặp

Tham số thứ hai là giá trị của biến tích lũy (acc ở đây) ở bước lặp đầu tiên (đọc tiếp để hiểu)

Hàm bạn chuyển làm tham số đầu tiên của. reduce nhận hai tham số. Tham số đầu tiên (acc ở đây) là biến tích lũy, trong khi tham số thứ hai (n) là phần tử hiện tại

Biến bộ tích lũy bằng với giá trị trả về của hàm của bạn ở bước lặp trước đó. Ở bước đầu tiên của quá trình lặp lại, acc bằng với giá trị bạn đã chuyển thành. giảm tham số thứ hai

Ở bước lặp đầu tiên

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

15 vì chúng tôi đã chuyển 0 làm tham số thứ hai để giảm

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

16 phần tử đầu tiên của mảng số

Hàm trả về acc + n –> 0 + 0 –> 0

Tại bước lặp thứ hai

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

15 vì đó là giá trị mà hàm trả về ở bước lặp trước đó

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

18 phần tử thứ hai của mảng số

Hàm trả về acc + n –> 0 + 1 –> 1

Ở bước lặp thứ ba

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

19 vì đó là giá trị mà hàm trả về ở bước lặp trước đó

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

20 phần tử thứ ba của mảng số

Hàm trả về acc + n –> 1 + 2 –> 3

Ở bước lặp thứ tư

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

21 vì đó là giá trị mà hàm trả về ở bước lặp trước đó

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

22 phần tử thứ tư của mảng số

Hàm trả về acc + n –> 3 + 3 –> 6

[…] Ở bước lặp cuối cùng

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

23 vì đó là giá trị mà hàm trả về ở bước lặp trước đó

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

24 phần tử cuối cùng của mảng số

Hàm trả về acc + n –> 15 + 6 –> 21

Vì đây là bước lặp cuối cùng nên. giảm lợi nhuận 21

Mảng. nguyên mẫu. tìm thấy()

console.log(myVar) // undefined -- no error raised
var myVar = 2;

6

Ghi chú. Bạn sẽ thường xuyên gặp phải phương pháp này được sử dụng kết hợp với

Chúng tôi đang sử dụng. tìm trên mảng số,. find đang lặp lại trên từng phần tử của mảng và chuyển nó vào hàm của chúng ta, cho đến khi điều kiện được đáp ứng. Mục tiêu của hàm là trả về phần tử thỏa mãn chức năng kiểm tra hiện tại. Các. phương thức find thực thi hàm gọi lại một lần cho mỗi chỉ mục của mảng cho đến khi hàm gọi lại trả về giá trị trung thực

Ghi chú. Nó ngay lập tức trả về giá trị của phần tử đó (thỏa mãn điều kiện) nếu tìm thấy. Nếu không, trả về không xác định

Tài nguyên bên ngoài

Toán tử trải rộng “…”

Toán tử trải rộng

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

25 đã được giới thiệu với ES2015 và được sử dụng để mở rộng các phần tử của một lần lặp (như một mảng) vào những nơi mà nhiều phần tử có thể phù hợp

mã mẫu

console.log(myVar) // undefined -- no error raised
var myVar = 2;

7

console.log(myVar) // undefined -- no error raised
var myVar = 2;

8

console.log(myVar) // undefined -- no error raised
var myVar = 2;

9

Giải trình

Trong iterables (như mảng)

Nếu chúng ta có hai mảng sau

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

0

mảng 2 phần tử đầu tiên là một mảng vì mảng 1 được thêm nguyên trạng vào mảng 2. Nhưng những gì chúng tôi muốn là arr2 là một mảng các chữ cái. Để làm như vậy, chúng ta có thể trải các phần tử của mảng1 sang mảng2

Với toán tử trải rộng

console.log(myVar) // undefined -- no error raised
var myVar = 2;

7

Thông số nghỉ chức năng

Trong các tham số của hàm, chúng ta có thể sử dụng toán tử còn lại để đưa các tham số vào một mảng mà chúng ta có thể lặp lại. Đã có một đối tượng đối số được liên kết với mọi hàm bằng một mảng gồm tất cả các tham số được truyền vào hàm

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

2

Nhưng giả sử rằng chúng ta muốn hàm này tạo một học sinh mới với điểm của nó và điểm trung bình của nó. Sẽ không thuận tiện hơn nếu trích xuất hai tham số đầu tiên thành hai biến riêng biệt, sau đó có tất cả các điểm trong một mảng mà chúng ta có thể lặp lại?

Đó chính xác là những gì toán tử còn lại cho phép chúng tôi làm

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

3

Ghi chú. Hàm createStudent không tốt vì chúng tôi không kiểm tra xem điểm. độ dài tồn tại hoặc khác 0. Nhưng cách này dễ đọc hơn nên mình không xử lý trường hợp này

Trải rộng thuộc tính đối tượng

Đối với phần này, tôi khuyên bạn nên đọc các giải thích trước đây về toán tử còn lại trên các tham số hàm và hàm lặp

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

4

nguồn lực bên ngoài

Viết tắt thuộc tính đối tượng

Khi gán biến cho thuộc tính đối tượng, nếu tên biến trùng với tên thuộc tính, bạn có thể thực hiện như sau

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

5

Giải trình

Thông thường (trước ES2015) khi bạn khai báo một đối tượng mới theo nghĩa đen và muốn sử dụng các biến làm giá trị thuộc tính đối tượng, bạn sẽ viết loại mã này

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

6

Như bạn có thể thấy, điều này khá lặp đi lặp lại vì tên thuộc tính của myObj giống với tên biến mà bạn muốn gán cho các thuộc tính đó

Với ES2015, khi tên biến trùng với tên thuộc tính, bạn có thể thực hiện cách viết tắt này

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

7

nguồn lực bên ngoài

lời hứa

Lời hứa là một đối tượng có thể được trả về đồng bộ từ hàm không đồng bộ ()

Các lời hứa có thể được sử dụng để tránh địa ngục gọi lại và chúng ngày càng được bắt gặp nhiều hơn trong các dự án JavaScript hiện đại

mã mẫu

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

8

Giải trình

Khi bạn thực hiện một yêu cầu Ajax, phản hồi không đồng bộ vì bạn muốn một tài nguyên cần một thời gian để đến. Nó thậm chí có thể không bao giờ đến nếu tài nguyên bạn yêu cầu không có sẵn vì một số lý do (404)

Để xử lý tình huống đó, ES2015 đã hứa với chúng tôi. Lời hứa có thể có ba trạng thái khác nhau

Giả sử chúng ta muốn sử dụng lời hứa để xử lý yêu cầu Ajax để tìm nạp tài nguyên X

Tạo lời hứa

Đầu tiên chúng ta sẽ tạo ra một lời hứa. Chúng ta sẽ sử dụng phương thức get của jQuery để thực hiện yêu cầu Ajax tới X

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;

9

Như đã thấy trong ví dụ trên, đối tượng Promise nhận một hàm thực thi nhận hai tham số là giải quyết và từ chối. Các tham số đó là các hàm mà khi được gọi sẽ chuyển trạng thái đang chờ lời hứa sang trạng thái đã hoàn thành và bị từ chối tương ứng

Lời hứa ở trạng thái chờ xử lý sau khi tạo cá thể và chức năng thực thi của nó được thực thi ngay lập tức. Khi một trong các chức năng giải quyết hoặc từ chối được gọi trong chức năng thực thi, lời hứa sẽ gọi các trình xử lý liên quan của nó

Sử dụng trình xử lý lời hứa

Để có được kết quả của lời hứa (hoặc lỗi), chúng ta phải đính kèm với nó các trình xử lý bằng cách thực hiện như sau

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

0

Nếu lời hứa thành công, giải pháp được thực thi và chức năng được truyền dưới dạng tham số

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

26 được thực thi

Nếu không thành công, từ chối được thực thi và chức năng được truyền dưới dạng tham số

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

27 được thực thi

Ghi chú. Nếu lời hứa đã được thực hiện hoặc bị từ chối khi một trình xử lý tương ứng được đính kèm, thì trình xử lý đó sẽ được gọi, do đó không có điều kiện chạy đua giữa một hoạt động không đồng bộ đang hoàn thành và các trình xử lý của nó được đính kèm.

Tài nguyên bên ngoài

chữ mẫu

Chữ mẫu là một phép nội suy biểu thức cho các chuỗi đơn và nhiều dòng

Nói cách khác, đó là một cú pháp chuỗi mới mà bạn có thể thuận tiện sử dụng bất kỳ biểu thức JavaScript nào (chẳng hạn như các biến)

mã mẫu

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

1

nguồn lực bên ngoài

Chữ mẫu được gắn thẻ

Thẻ mẫu là các chức năng có thể được thêm tiền tố vào một. Khi một hàm được gọi theo cách này, tham số đầu tiên là một mảng các chuỗi xuất hiện giữa các biến được nội suy của mẫu và các tham số tiếp theo là các giá trị được nội suy. Sử dụng toán tử trải rộng

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

25 để nắm bắt tất cả chúng.

Ghi chú. Một thư viện nổi tiếng có tên là styled-components phụ thuộc rất nhiều vào tính năng này

Dưới đây là một ví dụ đồ chơi về cách chúng hoạt động

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

2

Một ví dụ thú vị hơn

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

3

nguồn lực bên ngoài

Nhập khẩu / Xuất khẩu

Các mô-đun ES6 được sử dụng để truy cập các biến hoặc hàm trong một mô-đun được xuất rõ ràng bởi các mô-đun mà nó nhập

Tôi thực sự khuyên bạn nên xem các tài nguyên MDN khi nhập/xuất (xem các tài nguyên bên ngoài bên dưới), nó vừa đơn giản vừa đầy đủ

Giải thích với mã mẫu

xuất khẩu được đặt tên

Xuất khẩu được đặt tên được sử dụng để xuất một số giá trị từ một mô-đun

Ghi chú. Bạn chỉ có thể đặt tên cho những công dân hạng nhất có tên

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

4

Mặc dù nhập khẩu có tên trông giống như phá hủy, nhưng chúng có cú pháp khác và không giống nhau. Chúng không hỗ trợ các giá trị mặc định cũng như không phá hủy sâu

Ngoài ra, bạn có thể tạo bí danh nhưng cú pháp khác với cú pháp được sử dụng trong việc phá hủy

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

5

Nhập/xuất mặc định

Liên quan đến xuất mặc định, chỉ có một xuất mặc định duy nhất cho mỗi mô-đun. Xuất mặc định có thể là một hàm, một lớp, một đối tượng hoặc bất kỳ thứ gì khác. Giá trị này được coi là giá trị xuất "chính" vì nó sẽ là giá trị nhập đơn giản nhất.

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

6

xuất hàm

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

7

nguồn lực bên ngoài

JavaScript này

toán tử này hoạt động khác với các ngôn ngữ khác và trong hầu hết các trường hợp được xác định bởi cách một hàm được gọi. (Tham khảo. MĐN)

Khái niệm này có nhiều điểm tinh tế và khá khó, tôi thực sự khuyên bạn nên tìm hiểu sâu về các nguồn bên ngoài bên dưới. Vì vậy, tôi sẽ cung cấp những gì cá nhân tôi nghĩ để xác định cái này bằng. Tôi đã học được mẹo này từ bài viết này được viết bởi Yehuda Katz

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

8

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.

9

nguồn lực bên ngoài

Lớp học

JavaScript là ngôn ngữ dựa trên nguyên mẫu (ví dụ như Java là ngôn ngữ dựa trên lớp). ES6 đã giới thiệu các lớp JavaScript có nghĩa là một đường cú pháp cho kế thừa dựa trên nguyên mẫu và không phải là mô hình kế thừa dựa trên lớp mới (tham khảo)

Lớp từ thực sự dễ bị lỗi nếu bạn đã quen thuộc với các lớp trong các ngôn ngữ khác. Nếu bạn làm như vậy, hãy tránh giả định cách các lớp JavaScript hoạt động trên cơ sở này và coi đó là một khái niệm hoàn toàn khác

Vì tài liệu này không phải là một nỗ lực để dạy bạn ngôn ngữ từ đầu, tôi sẽ cho rằng bạn biết nguyên mẫu là gì và cách chúng hoạt động. Nếu không, hãy xem các tài nguyên bên ngoài được liệt kê bên dưới mã mẫu

Mẫu

Trước ES6, cú pháp nguyên mẫu

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

0

Với cú pháp lớp ES6

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

1

nguồn lực bên ngoài

Để hiểu nguyên mẫu

Đối với các lớp hiểu

let person = "Nick"; person = "John"; console.log(person) // "John", reassignment is allowed with let 29 và let person = "Nick"; person = "John"; console.log(person) // "John", reassignment is allowed with let 30 từ khóa

Từ khóa

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

31 được sử dụng trong khai báo lớp hoặc biểu thức lớp để tạo một lớp là con của một lớp khác (Tham khảo. MĐN). Lớp con kế thừa tất cả các thuộc tính của lớp cha và ngoài ra có thể thêm các thuộc tính mới hoặc sửa đổi các thuộc tính được kế thừa

Từ khóa

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

30 được sử dụng để gọi các hàm trên cha của đối tượng, bao gồm cả hàm tạo của nó

• Từ khóa

  let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  30 phải được sử dụng trước từ khóa

  let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  34 được sử dụng trong hàm tạo
• Gọi

  let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  35 gọi phương thức khởi tạo của lớp cha. Nếu bạn muốn truyền một số đối số trong hàm tạo của một lớp cho hàm tạo của lớp cha, bạn gọi nó bằng _____12_______36
• Nếu lớp cha có một phương thức (thậm chí là tĩnh) có tên là

  let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  37, bạn có thể sử dụng phương thức

  let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  38 để gọi nó trong lớp con

Mã mẫu

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

2

Ghi chú. Nếu chúng tôi đã cố gắng sử dụng

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

34 trước khi gọi

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

35 trong lớp Square, ReferenceError sẽ được đưa ra

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

3

Tài nguyên bên ngoài

Đang chờ không đồng bộ

Ngoài ra, có một cú pháp mới mà bạn có thể gặp phải để xử lý mã không đồng bộ có tên là async/await

Mục đích của các chức năng async/await là để đơn giản hóa hành vi sử dụng các lời hứa một cách đồng bộ và thực hiện một số hành vi trên một nhóm Lời hứa. Giống như Lời hứa tương tự như cuộc gọi lại có cấu trúc, async/await tương tự như việc kết hợp trình tạo và lời hứa. Các chức năng không đồng bộ luôn trả về một Lời hứa. (Tham khảo. MĐN)

Ghi chú. Bạn phải hiểu lời hứa là gì và cách chúng hoạt động trước khi cố gắng hiểu async/await vì chúng dựa vào nó

Lưu ý 2. , có nghĩa là bạn không thể sử dụng await ở cấp cao nhất trong mã của chúng tôi vì nó không nằm trong hàm async

mã mẫu

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

4

Giải thích với mã mẫu

Async/Await được xây dựng dựa trên các lời hứa nhưng chúng cho phép một kiểu mã bắt buộc hơn

Toán tử async đánh dấu một hàm là không đồng bộ và sẽ luôn trả về một Lời hứa. Bạn có thể sử dụng toán tử chờ trong hàm không đồng bộ để tạm dừng thực thi trên dòng đó cho đến khi Lời hứa được trả về từ biểu thức giải quyết hoặc từ chối

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

5

Khi đạt đến câu lệnh trả về của hàm không đồng bộ, Lời hứa được thực hiện với giá trị được trả về. Nếu xảy ra lỗi bên trong chức năng không đồng bộ, trạng thái Promise sẽ chuyển sang bị từ chối. Nếu không có giá trị nào được trả về từ hàm async, thì Promise vẫn được trả về và không có giá trị khi thực thi hàm async hoàn tất

toán tử chờ đợi được sử dụng để chờ Lời hứa được thực hiện và chỉ có thể được sử dụng bên trong thân hàm async. Khi gặp phải, việc thực thi mã bị tạm dừng cho đến khi lời hứa được thực hiện

Ghi chú. tìm nạp là một hàm trả về một Lời hứa cho phép thực hiện một yêu cầu AJAX

Trước tiên, hãy xem cách chúng tôi có thể tìm nạp người dùng github bằng lời hứa

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

6

Đây là tương đương async/await

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

7

cú pháp async/await đặc biệt thuận tiện khi bạn cần xâu chuỗi các lời hứa phụ thuộc lẫn nhau

Chẳng hạn, nếu bạn cần lấy mã thông báo để có thể tìm nạp một bài đăng blog trên cơ sở dữ liệu và sau đó là thông tin tác giả

Ghi chú. Các biểu thức chờ đợi cần được đặt trong dấu ngoặc đơn để gọi các phương thức và thuộc tính của giá trị được phân giải của nó trên cùng một dòng

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

8

xử lý lỗi

Trừ khi chúng tôi thêm các khối thử / bắt xung quanh các biểu thức đang chờ, các ngoại lệ chưa được bắt – bất kể chúng được ném vào phần thân của hàm async của bạn hay trong khi nó bị treo trong khi chờ – sẽ từ chối lời hứa được trả về bởi hàm async. Sử dụng câu lệnh

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

41 trong hàm không đồng bộ cũng giống như trả về một Lời hứa từ chối.

Ghi chú. Lời hứa hành xử giống nhau

Với những lời hứa, đây là cách bạn sẽ xử lý chuỗi lỗi

console.log(myVar) // raises a ReferenceError !
let myVar = 2;

9

Tương đương với async/await

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

0

nguồn lực bên ngoài

Sự thật / Giả dối

Trong JavaScript, giá trị true hoặc false là giá trị được chuyển thành kiểu boolean khi được đánh giá trong ngữ cảnh boolean. Một ví dụ về bối cảnh boolean sẽ là việc đánh giá một điều kiện

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

42

Mọi giá trị sẽ được chuyển thành

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

43 trừ khi chúng bằng

• let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  44

• let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  45

• let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  46 (chuỗi trống)

• let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  47

• let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  48

• let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  49

Dưới đây là các ví dụ về bối cảnh boolean

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

50 có thể là bất kỳ công dân hạng nhất nào (biến, hàm, boolean) nhưng nó sẽ được chuyển thành boolean vì nó được đánh giá trong ngữ cảnh boolean

• Sau toán tử logic NOT

  let person = "Nick";
  person = "John";
  console.log(person) // "John", reassignment is allowed with let
  

  51

Toán tử này trả về false nếu toán hạng đơn của nó có thể được chuyển đổi thành true;

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

1

• Với hàm tạo đối tượng Boolean

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

2

myVar được đánh giá trong ngữ cảnh boolean

Hãy cẩn thận khi so sánh 2 giá trị. Các giá trị đối tượng (nên được chuyển thành true) không được chuyển thành Boolean nhưng nó buộc phải chuyển đổi thành một giá trị nguyên thủy bằng cách sử dụng đặc tả ToPrimitives. Bên trong, khi một đối tượng được so sánh với giá trị Boolean như

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

52, thì nó sẽ là

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

53 nên…

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

3

nguồn lực bên ngoài

Anamorphisms và Catamorphisms

biến hình

Biến hình là các hàm ánh xạ từ một đối tượng nào đó sang một cấu trúc phức tạp hơn có chứa loại đối tượng. Đó là quá trình mở ra một cấu trúc đơn giản thành một cấu trúc phức tạp hơn. Xem xét mở một số nguyên thành một danh sách các số nguyên. Số nguyên là đối tượng ban đầu của chúng tôi và danh sách các số nguyên là cấu trúc phức tạp hơn

mã mẫu

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

4

Catamorphism trái ngược với Anamorphisms, ở chỗ chúng lấy các đối tượng có cấu trúc phức tạp hơn và gấp chúng thành các cấu trúc đơn giản hơn. Lấy ví dụ sau

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

54 lấy danh sách các số nguyên và trả về một số nguyên

mã mẫu

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

5

nguồn lực bên ngoài

máy phát điện

Một cách khác để viết hàm

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

55 là sử dụng Trình tạo. Để khởi tạo một đối tượng

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

56, ta phải sử dụng khai báo

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

57. Trình tạo là các chức năng có thể được thoát và sau đó được nhập lại với ngữ cảnh của nó (các ràng buộc biến) được lưu trong các lần truy cập lại

Ví dụ: hàm

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

55 ở trên có thể được viết lại thành

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

6

Trình tạo trả về một đối tượng có thể lặp lại. Khi hàm

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

59 của trình vòng lặp được gọi, nó được thực thi cho đến khi biểu thức

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

60 đầu tiên chỉ định giá trị được trả về từ trình vòng lặp hoặc với

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

61, biểu thức này ủy quyền cho một hàm tạo khác. Khi một biểu thức

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

62 được gọi trong trình tạo, nó sẽ đánh dấu trình tạo là xong và trả lại dưới dạng giá trị trả về. Các cuộc gọi tiếp theo tới

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

59 sẽ không trả về bất kỳ giá trị mới nào

mã mẫu

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

7

Biểu thức

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

61 cho phép trình tạo gọi một hàm tạo khác trong quá trình lặp

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

8

let myVar = 2;
let myVar = 3; // Raises a SyntaxError

9

nguồn lực bên ngoài

Phương thức tĩnh

giải thích ngắn

Từ khóa

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

65 được sử dụng trong các lớp để khai báo các phương thức tĩnh. Các phương thức tĩnh là các hàm trong một lớp thuộc về đối tượng lớp và không có sẵn cho bất kỳ phiên bản nào của lớp đó

mã mẫu

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

0

Lời giải chi tiết

Các phương thức tĩnh có thể được gọi bên trong một phương thức tĩnh khác bằng cách sử dụng từ khóa

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

34, mặc dù điều này không hoạt động đối với các phương thức không tĩnh. Các phương thức không tĩnh không thể truy cập trực tiếp các phương thức tĩnh bằng từ khóa

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

34

Gọi các phương thức tĩnh khác từ một phương thức tĩnh

Để gọi một phương thức tĩnh từ một phương thức tĩnh khác, từ khóa

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

34 có thể được sử dụng như vậy;

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

1

Gọi các phương thức tĩnh từ các phương thức không tĩnh

Các phương thức không tĩnh có thể gọi các phương thức tĩnh theo 2 cách;

Để có quyền truy cập vào một phương thức tĩnh từ một phương thức không tĩnh, chúng tôi sử dụng tên lớp và gọi phương thức tĩnh như một thuộc tính. e. g

let person = "Nick";
person = "John";
console.log(person) // "John", reassignment is allowed with let

69

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

2

Các phương thức tĩnh có thể được gọi là thuộc tính trên đối tượng hàm tạo

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed

3

nguồn lực bên ngoài

Bảng chú giải

Phạm vi

Bối cảnh trong đó các giá trị và biểu thức "hiển thị" hoặc có thể được tham chiếu. Nếu một biến hoặc biểu thức khác không nằm trong phạm vi hiện tại, thì nó không có sẵn để sử dụng

5 tính năng mới trong ES6 là gì?

ES6 và JavaScript có giống nhau không?

Cú pháp JavaScript ES6 là gì?

Các tính năng chính của ES6 là gì?