Cheat sheet JavaScript
Cập nhật lần cuối
Biến (let, const, var)
Khai báo giá trị; ưu tiên const, sau đó đến let, và tránh dùng var.
| Thao tác | Cú pháp |
|---|---|
| Phạm vi khối, gán lại được | let count = 0; |
| Phạm vi khối, không gán lại được | const name = "Ada"; |
| Phạm vi hàm (kiểu cũ) | var x = 1; |
| Khai báo không gán giá trị | let result; |
| Khai báo nhiều biến | let a = 1, b = 2; |
| Object hằng (nội dung vẫn thay đổi được) | const user = {}; user.id = 1; |
Kiểu dữ liệu
Các kiểu nguyên thủy, kiểu tham chiếu và cách kiểm tra kiểu.
| Kiểu | Ví dụ |
|---|---|
| Number | let n = 42; |
| String | let s = "hi"; |
| Boolean | let ok = true; |
| Array | let arr = [1, 2, 3]; |
| Object | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| Kiểm tra kiểu | typeof n |
| Chuyển đổi kiểu | Number("7"), String(42), Boolean(0) |
Chuỗi và template literal
Tạo và xử lý văn bản.
| Thao tác | Cú pháp |
|---|---|
| Template literal | Hi ${name}, age ${age} (đặt trong dấu backtick) |
| Độ dài | text.length |
| Chữ hoa / chữ thường | text.toUpperCase(), text.toLowerCase() |
| Xóa khoảng trắng thừa | text.trim() |
| Thay thế tất cả | text.replaceAll("a", "b") |
| Tách thành mảng | text.split(",") |
| Kiểm tra có chứa | text.includes("js") |
| Cắt chuỗi | text.slice(0, 3) |
Mảng và phương thức mảng
Tập hợp có thứ tự và các phương thức để duyệt chúng.
| Thao tác | Cú pháp |
|---|---|
| Thêm / xóa ở cuối | arr.push(4), arr.pop() |
| Thêm / xóa ở đầu | arr.unshift(0), arr.shift() |
| Biến đổi từng phần tử | arr.map(x => x * 2) |
| Giữ các phần tử thỏa điều kiện | arr.filter(x => x > 0) |
| Gộp thành một giá trị | arr.reduce((sum, x) => sum + x, 0) |
| Tìm một phần tử | arr.find(x => x.id === 1) |
| Kiểm tra một số / tất cả | arr.some(f), arr.every(f) |
| Chỉ số của một giá trị | arr.indexOf(3), arr.includes(3) |
| Nối thành chuỗi | arr.join(", ") |
Object
Tập hợp các cặp khóa và giá trị.
| Thao tác | Cú pháp |
|---|---|
| Tạo | const user = { id: 1, name: "Ada" }; |
| Truy cập thuộc tính | user.name, user["name"] |
| Thêm / cập nhật thuộc tính | user.age = 25; |
| Xóa thuộc tính | delete user.age; |
| Lấy tất cả khóa / giá trị | Object.keys(user), Object.values(user) |
| Lấy các cặp khóa và giá trị | Object.entries(user) |
| Gộp object | Object.assign({}, a, b) |
| Sao chép nông | const copy = { ...user }; |
Luồng điều khiển
Điều kiện và vòng lặp.
| Thao tác | Cú pháp |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Toán tử ba ngôi | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| Vòng lặp for | for (let i = 0; i < 5; i++) { … } |
| Vòng lặp for...of (giá trị) | for (const item of arr) { … } |
| Vòng lặp for...in (khóa) | for (const key in obj) { … } |
| Vòng lặp while | while (x < 10) { … } |
Hàm và arrow function
Định nghĩa các khối code gọi lại và dùng lại được.
| Thao tác | Cú pháp |
|---|---|
| Khai báo hàm | function add(a, b) { return a + b; } |
| Arrow function | const add = (a, b) => a + b; |
| Arrow function một đối số | const sq = x => x * x; |
| Arrow function không đối số | const now = () => Date.now(); |
| Tham số mặc định | function f(x = 0) { … } |
| Tham số rest | function f(...args) { … } |
| Hàm gọi ngay (IIFE) | (() => { … })(); |
Destructuring và spread
Tách giá trị và sao chép, gộp cấu trúc dữ liệu.
| Thao tác | Cú pháp |
|---|---|
| Destructuring mảng | const [a, b] = arr; |
| Destructuring object | const { id, name } = user; |
| Đổi tên khi tách giá trị | const { id: userId } = user; |
| Giá trị mặc định | const { age = 0 } = user; |
| Spread một mảng | const all = [...a, ...b]; |
| Spread một object | const next = { ...user, age: 25 }; |
| Rest trong destructuring | const [first, ...rest] = arr; |
Promise và async/await
Xử lý tác vụ bất đồng bộ như request mạng.
| Thao tác | Cú pháp |
|---|---|
| Hàm async | async function load() { … } |
| Chờ một promise | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Try / catch kết hợp await | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| Chờ tất cả | await Promise.all([a, b]) |
| Lấy promise hoàn tất đầu tiên | await Promise.race([a, b]) |
Cú pháp JavaScript hiện đại bạn dùng nhiều nhất, gói gọn trong một trang. Cheat sheet JavaScript này là bảng tra cứu nhanh cho ES6+ hằng ngày: khai báo biến, phương thức chuỗi và phương thức mảng, object, arrow function, destructuring và async/await.
Mọi thứ ở đây đều là JavaScript chuẩn, chạy được trên trình duyệt hiện đại và Node.js. Sao chép đoạn bạn cần, hoặc chạy thử bất kỳ đoạn code nào ngay trong playground JS, không cần cài đặt gì. Mới bắt đầu? Khóa học JavaScript tương tác miễn phí của Coddy dạy bạn chính những cú pháp này qua thực hành.
Câu hỏi thường gặp về cheat sheet JavaScript
Cheat sheet JavaScript này có miễn phí không?
Có. Cheat sheet JavaScript này hoàn toàn miễn phí và không cần đăng ký. Lưu trang lại và quay lại bất cứ khi nào bạn cần tra cú pháp, một phương thức mảng hay một mẫu xử lý async.
Trong JavaScript, == và === khác nhau thế nào?
== là so sánh lỏng: nó chuyển hai toán hạng về cùng kiểu rồi mới so sánh, nên 0 == "0" là true. === là so sánh chặt: so sánh cả giá trị lẫn kiểu mà không chuyển đổi, nên 0 === "0" là false. Gần như lúc nào cũng nên dùng === (và !==): kết quả dễ đoán và tránh được những phép ép kiểu bất ngờ.let, const và var khác nhau thế nào?
const và let có phạm vi khối và được thêm vào từ ES6; var có phạm vi hàm và ra đời sớm hơn. Dùng const cho giá trị không bao giờ gán lại, let cho giá trị cần gán lại, và tránh var để không gặp bug do hoisting và phạm vi. Lưu ý: nội dung của object hay mảng khai báo bằng const vẫn thay đổi được, chỉ có liên kết tên với giá trị là cố định.Có thể luyện tập JavaScript online không?
Có. Mở playground JS để chạy bất kỳ đoạn code nào trong cheat sheet này ngay trên trình duyệt, không cần cài đặt gì. Khi muốn học có lộ trình, khóa học JavaScript tương tác miễn phí của Coddy dẫn bạn từng bước từ biến và vòng lặp đến phương thức mảng và async/await.
Cheat sheet này có phù hợp cho người mới bắt đầu không?
Có. Nội dung được sắp xếp từ kiến thức cơ bản (biến, kiểu dữ liệu, chuỗi) đến destructuring và async/await, nên ngay ngày đầu bạn đã dùng được các phần trên cùng, rồi dần làm quen với các tính năng ES6+ hiện đại.
Tài nguyên liên quan
Thêm cheat sheet
