Hướng dẫn tham khảo nhanh về Cú pháp JavaScript hiện đại

Nhiều khi, các mẫu mã đang sử dụng các tính năng JavaScript mới nhất có sẵn. Đôi khi khó có thể phân biệt được những tính năng đó với các tính năng của khung. Ví dụ, nó thường xuyên xảy ra với React, điều này khuyến khích một cách tiếp cận rất hiện đại đối với JavaScript.

Nhiều khi, các mẫu mã đang sử dụng các tính năng JavaScript mới nhất có sẵn.

Đôi khi khó có thể phân biệt được những tính năng đó với các tính năng của khung. Ví dụ, nó thường xuyên xảy ra với React, điều này khuyến khích một cách tiếp cận rất “hiện đại” đối với JavaScript.

Bài đăng này nhằm mục đích giải thích tất cả những điều nhỏ nhặt có thể khiến bạn phát triển, đặc biệt nếu bạn đến từ nền tảng JavaScript trước ES6, hoặc nếu bạn đang bắt đầu từ con số không.

Mục đích là làm cho bạn ít nhất nhận ra cấu trúc nào là JavaScript thông thường và cấu trúc nào là một phần của khung công tác. Tôi không đi sâu vào giải thích những thứ đó hoạt động như thế nào, thay vào đó tôi sẽ đưa ra một số gợi ý nếu bạn muốn biết thêm.

Hàm mũi tên

Các hàm mũi tên có cú pháp sau:

const myFunction = () => {
  //...
}

Khác một chút so với các hàm thông thường:

const myFunction = function() {
  //...
}

Dấu () có thể lưu trữ các tham số, giống như trong các hàm thông thường. Đôi khi dấu ngoặc nhọn bị xóa hoàn toàn khi chỉ có một câu lệnh trong hàm và đó là một giá trị trả về ngầm định (không cần từ khóa trả về):

const myFunction = i => 3 * i

Thông tin thêm về Hàm mũi tên

Nhà điều hành spread

Nếu bạn thấy

const c = [...a]

Câu lệnh này sao chép một mảng.

Bạn cũng có thể thêm các mục vào một mảng bằng cách sử dụng

const c = [...a, 2, 'test']

Các...được gọi là toán tử spread. Bạn cũng có thể sử dụng nó trên các đối tượng:

const newObj = { ...oldObj } //shallow clone an object

Thông tin thêm về toán tử spread

Cơ cấu lại các nhiệm vụ

Bạn có thể giải nén chỉmột sốthuộc tính từ một đối tượng bằng cú pháp này:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54 //made up
}

const { firstName: name, age } = person

Bây giờ bạn sẽ có hai giá trị constnameage.

Cú pháp cũng hoạt động trên mảng:

const a = [1,2,3,4,5]
[first, second, , , fifth] = a

Chữ mẫu

Nếu bạn thấy các chuỗi được bao bọc trong dấu gạch ngược, đó là một mẫu theo nghĩa đen:

const str = `test`

Bên trong này, bạn có thể đặt các biến và thực thi javascript, bằng cách sử dụng${...}đoạn trích:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

Ngoài ra, bạn có thể kéo dài một chuỗi trên nhiều dòng:

const string3 = `Hey
this

string
is awesome!`

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: