40 Phím tắt JavaScript Bạn Nên Biết 2025

Nội dung

JavaScript đang phát triển rất nhanh chóng. Việc nắm vững các phím tắt phù hợp giúp bạn trở thành nhà phát triển nhanh hơn, thông minh hơn và hiệu quả hơn.

Dù bạn đang xây dựng ứng dụng full-stack hay làm việc với hệ thống giao diện người dùng (UI) frontend, các thủ thuật tiết kiệm thời gian này sẽ giúp bạn viết mã sạch hơn. Chúng cũng giúp cải thiện năng suất làm việc.

Dưới đây là 40 phím tắt JavaScript bạn nên biết vào năm 2025. Chúng được sắp xếp thành bốn danh mục để dễ học.

1–10: Phím tắt cú pháp và các yếu tố cần thiết

Toán tử ba ngôi (Ternary Operator)Toán tử này là một cách viết ngắn gọn cho câu lệnh điều kiện if-else.
Nó giúp gán giá trị dựa trên một điều kiện. Ví dụ:
```
const isAdult = age >= 18 ? "Yes" : "No";
```
Nếu age lớn hơn hoặc bằng 18, isAdult sẽ là “Yes”. Ngược lại, nó sẽ là “No”.
Tham số mặc định (Default Parameters)Bạn có thể đặt giá trị mặc định cho các tham số hàm. Giá trị này sẽ được sử dụng nếu tham số không được cung cấp.
Điều này giúp hàm linh hoạt hơn và tránh lỗi khi thiếu đối số. Ví dụ:
```
function greet(name = "Guest") {
  return `Hello, ${name}`;
}
```
Nếu không có tên nào được truyền, hàm sẽ chào “Guest”.
Hàm mũi tên (Arrow Functions)Đây là một cú pháp ngắn gọn hơn để viết các hàm. Nó đặc biệt hữu ích cho các hàm ẩn danh.
Hàm mũi tên giúp mã dễ đọc và viết hơn. Ví dụ:
```
const add = (a, b) => a + b;
```
Hàm này cộng hai số a và b.
Phân rã đối tượng (Destructuring Objects)Phân rã đối tượng cho phép bạn trích xuất các thuộc tính từ đối tượng thành các biến riêng biệt.
Nó giúp mã rõ ràng hơn khi làm việc với dữ liệu cấu trúc. Ví dụ:
```
const { name, age } = person;
```
Điều này trích xuất name và age từ đối tượng person.
Phân rã mảng (Destructuring Arrays)Tương tự như đối tượng, bạn có thể trích xuất các phần tử từ mảng thành các biến.
Nó đơn giản hóa việc truy cập các phần tử mảng cụ thể. Ví dụ:
```
const [first, second] = colors;
```
Điều này gán phần tử đầu tiên cho first và phần tử thứ hai cho second.
Template LiteralsTemplate Literals cho phép bạn nhúng biểu thức vào chuỗi một cách dễ dàng.
Chúng sử dụng dấu ngược ` và cú pháp ${expression}. Điều này cải thiện khả năng đọc của chuỗi. Ví dụ:
```
const message = `Hi, ${user.name}!`;
```
Nó tạo ra một chuỗi chào hỏi với tên người dùng.
Toán tử Spread (Spread Operator)Toán tử spread ... cho phép bạn mở rộng một iterable (như mảng hoặc chuỗi) thành các phần tử riêng lẻ.
Nó hữu ích khi sao chép mảng, kết hợp mảng, hoặc truyền đối số cho hàm. Ví dụ:
```
const newArray = [...oldArray, 4];
```
Điều này tạo một newArray bằng cách sao chép tất cả các phần tử từ oldArray và thêm số 4.
Tham số Rest (Rest Parameters)Tham số rest ... cho phép một hàm chấp nhận một số lượng đối số không xác định.
Các đối số này được thu thập vào một mảng. Điều này giúp hàm linh hoạt hơn. Ví dụ:
```
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}
```
Hàm sum có thể nhận bất kỳ số lượng số nào và tính tổng chúng.
Optional ChainingOptional chaining ?. cho phép bạn truy cập các thuộc tính của một đối tượng có thể là null hoặc undefined mà không gây lỗi.
Nó trả về undefined nếu một thuộc tính trên đường dẫn không tồn tại. Điều này giúp mã an toàn hơn. Ví dụ:
```
const street = user?.address?.street;
```
Nếu user hoặc user.address là null/undefined, street sẽ là undefined thay vì gây lỗi.
Nullish CoalescingToán tử nullish coalescing ?? cung cấp một giá trị mặc định khi một biểu thức là null hoặc undefined.
Nó khác với toán tử || vì nó không coi 0 hoặc chuỗi rỗng '' là giá trị “falsy”. Ví dụ:
```
const username = inputName ?? "Anonymous";
```
Nếu inputName là null hoặc undefined, username sẽ là “Anonymous”.

11–20: Logic, Vòng lặp và Mảng

Đánh giá ngắn mạch (Short-circuit Evaluation)Bạn có thể sử dụng toán tử logic && hoặc || để thực hiện các hành động có điều kiện.
Ví dụ, && chỉ thực hiện phần thứ hai nếu phần đầu tiên là true. Điều này giúp viết mã ngắn gọn hơn. Ví dụ:
```
const status = isLoggedIn && "Welcome!";
```
Nếu isLoggedIn là true, status sẽ là “Welcome!”.
Gán bằng toán tử OR logic (Logical OR Assignment)Toán tử ||= gán giá trị bên phải cho biến bên trái nếu biến bên trái là falsy (ví dụ: null, undefined, 0, '', false).
Nó là một cách ngắn gọn để thiết lập giá trị mặc định. Ví dụ:
```
user.name ||= "Guest";
```
Nếu user.name là falsy, nó sẽ được gán là “Guest”.
Gán bằng toán tử AND logic (Logical AND Assignment)Toán tử &&= gán giá trị bên phải cho biến bên trái nếu biến bên trái là truthy.
Nó hữu ích để thực hiện các hành động có điều kiện. Ví dụ:
```
settings.debug &&= false;
```
Nếu settings.debug là truthy, nó sẽ được gán là false.
Viết tắt thuộc tính đối tượng (Object Property Shorthand)Khi tên biến trùng với tên thuộc tính bạn muốn gán cho một đối tượng, bạn có thể viết tắt.
Điều này giúp mã gọn gàng hơn. Ví dụ:
```
const age = 30;
const person = { name, age };
```
Nếu biến name và age tồn tại, chúng sẽ được sử dụng làm thuộc tính của đối tượng person.
Tên thuộc tính được tính toán (Computed Property Names)Bạn có thể sử dụng biểu thức trong dấu ngoặc vuông [] để tạo tên thuộc tính động cho đối tượng.
Điều này hữu ích khi tên thuộc tính cần được xác định trong thời gian chạy. Ví dụ:
```
const key = "level";
const player = { [key]: 42 };
```
Thuộc tính của player sẽ là level với giá trị 42.
Vòng lặp For-of (For-of Loop)Vòng lặp for-of là cách hiện đại để lặp qua các phần tử của một iterable (như mảng, chuỗi, Map, Set).
Nó cung cấp cách đọc phần tử trực tiếp, không cần chỉ số. Ví dụ:
```
for (const item of items) {
  console.log(item);
}
```
Nó sẽ in ra từng item trong items.
Vòng lặp forEach (forEach Loop)Phương thức forEach() của mảng thực thi một hàm được cung cấp một lần cho mỗi phần tử mảng.
Nó không trả về một mảng mới. Ví dụ:
```
items.forEach(item => console.log(item));
```
Nó cũng in ra từng item trong items.
Hàm Map (Map Function)Phương thức map() tạo một mảng mới bằng cách gọi một hàm được cung cấp trên mỗi phần tử trong mảng gọi.
Nó hữu ích để biến đổi dữ liệu. Ví dụ:
```
const squared = nums.map(n => n * n);
```
Nó tạo một mảng mới squared với các số đã được bình phương từ mảng nums.
Hàm Filter (Filter Function)Phương thức filter() tạo một mảng mới với tất cả các phần tử vượt qua kiểm tra được triển khai bởi hàm được cung cấp.
Nó hữu ích để chọn ra các phần tử cụ thể. Ví dụ:
```
const evens = nums.filter(n => n % 2 === 0);
```
Nó tạo một mảng evens chỉ chứa các số chẵn từ mảng nums.
Hàm Reduce (Reduce Function)Phương thức reduce() thực thi một hàm giảm trên từng phần tử của mảng, dẫn đến một giá trị đầu ra duy nhất.
Nó hữu ích để tính tổng, đếm, hoặc gộp dữ liệu. Ví dụ:
```
const total = nums.reduce((a, b) => a + b, 0);
```
Nó tính tổng tất cả các số trong mảng nums, bắt đầu từ 0.

21–30: Tiện ích đối tượng & mảng

Kiểm tra Includes (Includes Check)Phương thức includes() xác định xem một mảng có chứa một phần tử cụ thể hay không.
Nó trả về true hoặc false. Ví dụ:
```
const found = list.includes("apple");
```
Nó kiểm tra xem “apple” có trong list hay không.
Set cho các giá trị duy nhất (Set for Unique Values)Đối tượng Set chỉ lưu trữ các giá trị duy nhất.
Bạn có thể sử dụng nó kết hợp với toán tử spread để dễ dàng tạo một mảng chứa các giá trị duy nhất từ một mảng khác. Ví dụ:
```
const unique = [...new Set(array)];
```
Nó tạo một mảng unique chỉ chứa các phần tử duy nhất từ array.
Object.entriesPhương thức Object.entries() trả về một mảng các cặp [key, value] của các thuộc tính có thể liệt kê của một đối tượng.
Nó hữu ích khi bạn cần lặp qua cả khóa và giá trị. Ví dụ:
```
Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});
```
Nó in ra từng cặp khóa-giá trị của đối tượng obj.
Object.valuesPhương thức Object.values() trả về một mảng các giá trị của các thuộc tính có thể liệt kê của một đối tượng.
Nó hữu ích khi bạn chỉ cần các giá trị. Ví dụ:
```
const vals = Object.values(obj);
```
Nó tạo một mảng vals chứa tất cả các giá trị từ đối tượng obj.
Object.keysPhương thức Object.keys() trả về một mảng các tên thuộc tính có thể liệt kê của một đối tượng.
Nó hữu ích khi bạn chỉ cần các khóa. Ví dụ:
```
const keys = Object.keys(obj);
```
Nó tạo một mảng keys chứa tất cả các khóa từ đối tượng obj.
Xâu chuỗi phương thức mảng (Chaining Array Methods)Bạn có thể gọi nhiều phương thức mảng nối tiếp nhau.
Điều này tạo ra một luồng xử lý dữ liệu rõ ràng và hiệu quả. Ví dụ:
```
const result = data.filter(a => a.active).map(a => a.name);
```
Nó lọc các mục active từ data, sau đó trích xuất tên của chúng.
Làm phẳng mảng (Flatten Array)Phương thức flat() tạo một mảng mới với tất cả các mảng con được nối đệ quy vào nó đến một độ sâu được chỉ định.
Nó hữu ích để làm phẳng các mảng lồng nhau. Ví dụ:
```
const flat = arr.flat();
```
Nó làm phẳng mảng arr một cấp độ.
Cắt chuỗi (Trim String)Phương thức trim() loại bỏ khoảng trắng (hoặc các ký tự kết thúc dòng) từ cả hai đầu của một chuỗi.
Nó hữu ích để làm sạch dữ liệu đầu vào. Ví dụ:
```
const cleaned = str.trim();
```
Nó loại bỏ khoảng trắng ở đầu và cuối của chuỗi str.
Đệm chuỗi (Pad String)Phương thức padStart() đệm chuỗi hiện tại với một chuỗi khác (nếu cần) cho đến khi chuỗi kết quả đạt đến độ dài mong muốn.
Nó đệm từ đầu chuỗi. Ví dụ:
```
const padded = "5".padStart(2, "0");
```
Nó sẽ tạo ra chuỗi “05”.
Intl.NumberFormatĐối tượng Intl.NumberFormat cho phép định dạng số theo ngôn ngữ cụ thể.
Nó hữu ích để hiển thị số tiền hoặc số lớn theo cách dễ đọc cho người dùng. Ví dụ:
```
const price = new Intl.NumberFormat().format(1234567);
```
Nó sẽ định dạng số 1234567 thành “1,234,567” (hoặc định dạng tương ứng với ngôn ngữ mặc định).

31–40: Các thủ thuật & tiện ích hiện đại

Import động (Dynamic Import)Import động cho phép bạn tải các module JavaScript theo yêu cầu (on-demand).
Điều này giúp giảm thời gian tải ban đầu của ứng dụng. Ví dụ:
```
const module = await import('./module.js');
```
Nó tải module.js khi cần thiết.
Promise.allPromise.all() nhận một mảng các Promise và trả về một Promise mới.
Promise mới này sẽ được giải quyết khi tất cả các Promise trong mảng đã được giải quyết. Nó hữu ích để chạy nhiều tác vụ bất đồng bộ song song. Ví dụ:
```
await Promise.all([fetchData(), loadUI()]);
```
Nó chờ cho cả fetchData() và loadUI() hoàn thành.
Async/Awaitasync/await là cú pháp giúp viết mã bất đồng bộ dễ đọc và quản lý hơn.
Nó làm cho mã bất đồng bộ trông giống mã đồng bộ. Ví dụ:
```
const fetchData = async () => {
  const res = await fetch(url);
  return res.json();
};
```
Hàm này chờ kết quả từ fetch(url), sau đó chờ phân tích cú pháp JSON.
Tham số tùy chọn trong hàm (Optional Parameters in Functions)Bạn có thể định nghĩa các tham số hàm có giá trị mặc định.
Điều này làm cho hàm linh hoạt hơn, cho phép gọi hàm với số lượng đối số khác nhau. Ví dụ:
```
function log(message, level = "info") {
  console[level](message);
}
```
Nếu level không được cung cấp, nó sẽ mặc định là “info”.
Chuyển đổi số với toán tử Unary + (Number Conversion with Unary +)Bạn có thể sử dụng toán tử cộng đơn phân + để nhanh chóng chuyển đổi một chuỗi thành một số.
Đây là một phím tắt tiện lợi. Ví dụ:
```
const num = +"42";
```
num sẽ là số 42.
Chuyển đổi Boolean với !! (Boolean Conversion with !!)Sử dụng hai toán tử phủ định logic !! để chuyển đổi bất kỳ giá trị nào thành một boolean.
Nó trả về true nếu giá trị là truthy, và false nếu giá trị là falsy. Ví dụ:
```
const isTrue = !!value;
```
isTrue sẽ là true hoặc false dựa trên giá trị của value.
Hoán đổi mảng ngắn (Short Array Swap)Bạn có thể hoán đổi giá trị của hai biến bằng cách sử dụng phân rã mảng.
Đây là một cách ngắn gọn và dễ đọc để thực hiện hoán đổi. Ví dụ:
```
[a, b] = [b, a];
```
Nó hoán đổi giá trị của a và b.
Chuyển đổi chuỗi thành mảng nhanh (Quick String to Array)Sử dụng toán tử spread ... để nhanh chóng chuyển đổi một chuỗi thành một mảng các ký tự.
Ví dụ:
```
const chars = [..."hello"];
```
chars sẽ là ['h', 'e', 'l', 'l', 'o'].
Sao chép đối tượng nhanh (Quick Object Clone)Sử dụng toán tử spread ... để tạo một bản sao nông (shallow copy) của một đối tượng.
Điều này hữu ích khi bạn muốn sửa đổi đối tượng mà không ảnh hưởng đến bản gốc. Ví dụ:
```
const copy = { ...original };
```
copy là một đối tượng mới với các thuộc tính giống như original.
Hàm Debounce (Utility)Hàm debounce giới hạn tần suất một hàm được gọi.
Nó đợi một khoảng thời gian nhất định sau lần gọi cuối cùng trước khi thực thi hàm. Điều này hữu ích cho các sự kiện như nhập liệu tìm kiếm hoặc thay đổi kích thước cửa sổ để tối ưu hóa hiệu suất. Ví dụ:
```
const debounce = (fn, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
};
```
Hàm này tạo ra một phiên bản của fn chỉ chạy sau khi không có cuộc gọi nào khác trong delay mili giây.

Nâng cao kỹ năng JavaScript của bạn

Nếu bạn thấy các phím tắt này hữu ích, bạn sẽ yêu thích cuốn sách hướng dẫn JavaScript đầy đủ của tôi. Cuốn sách này chứa đầy đủ các giải thích chuyên sâu. Nó cũng có các dự án thực tế và các mẫu mã thông minh. Nó sẽ giúp bạn từ người mới bắt đầu đến cấp độ nâng cao. Hãy sở hữu ngay hôm nay. Tham gia cùng hàng trăm nhà phát triển đang nâng cấp kỹ năng JavaScript của họ.

Cách ẩn các tính năng chỉ dùng JavaScript một cách thanh lịch đáng ngạc nhiên

Nút chia sẻ của tôi chỉ hoạt động khi JavaScript được tải. Công tắc chủ đề của tôi cũng cần JavaScript. Menu di động của tôi chắc chắn cần nó.

Nhưng khi ai đó truy cập trang web mà JavaScript bị tắt, họ sẽ thấy các nút này. Chúng không hoạt động và gây cảm giác hỏng hóc cho người dùng.

Điều đó tệ hơn là không hiển thị chúng chút nào.

Tôi đã dành một cuối tuần để tìm kiếm các giải pháp. Tôi tìm thấy ba cách tiếp cận. Hai cách cảm thấy kỳ lạ. Một cách thực sự có lý.

Vấn đề không có JavaScript mà không ai nói đến

Tôi đã học được điều này khi xây dựng nút chia sẻ cho blog của mình.

Nút này cần là một biểu tượng SVG có thể nhấp khi JavaScript được tải. Khi JavaScript không tải, việc hiển thị một biểu tượng không hoạt động còn tệ hơn là không hiển thị gì cả.

Trình duyệt có một công cụ cho việc này: thẻ <noscript>. Nó chỉ hiển thị khi JavaScript bị tắt.

Nhưng có một vấn đề: không có thẻ đối lập. Không có <onlyscript> cho “hiển thị cái này khi JavaScript bật”.

Hầu hết các nhà phát triển giải quyết vấn đề này bằng cách kiểm tra xem JavaScript có tồn tại hay không. Sau đó, họ thêm một lớp cờ vào phần tử gốc:

document.documentElement.classList.add('js-enabled');

Sau đó, họ viết các quy tắc CSS trùng lặp cho mọi thứ:

.share-button { display: none; }
.js-enabled .share-button { display: block; }

Cách này hoạt động nhưng nó cũng cồng kềnh.

Có một cách tốt hơn

Tiếp theo, tôi thử gói mọi thứ trong noscript. Trình duyệt chỉ hiển thị bất cứ thứ gì bên trong <noscript> khi JavaScript bị tắt.

Vì vậy, bạn có thể gói nội dung dự phòng ở đó. Sau đó, thêm một khối <style> để ẩn các phần tử khi JavaScript bị tắt.

Đây là mẹo chuyên nghiệp: Thay vì liệt kê các phần tử cụ thể, hãy sử dụng một lớp ngữ nghĩa: d-js-required.

Bất cứ thứ gì chỉ hoạt động với JavaScript đều có lớp đó. Khối kiểu <noscript> ẩn nó bằng một quy tắc duy nhất:

<noscript>
    <style>
        .d-js-required { display: none; }
    </style>
</noscript>

Khi JavaScript bị tắt, khối <noscript> sẽ tải và ẩn tất cả chúng.

Khi JavaScript được bật, khối kiểu đó sẽ không bao giờ hiển thị và mọi thứ sẽ hiển thị.

Kết luận cuối cùng

Không cần JavaScript để xử lý việc thiếu JavaScript.

Các tính năng tương tác của bạn vẫn bị ẩn khỏi người dùng không thể sử dụng chúng.

Lần tới khi bạn thêm một tính năng cần JavaScript, bạn chỉ cần thêm lớp này và triển khai nó.

Tôi rất muốn xem suy nghĩ và đề xuất của bạn trong phần bình luận bên dưới.

Tham khảo: medium.com

Small ERP

1–10: Phím tắt cú pháp và các yếu tố cần thiết

11–20: Logic, Vòng lặp và Mảng

21–30: Tiện ích đối tượng & mảng

31–40: Các thủ thuật & tiện ích hiện đại

Nâng cao kỹ năng JavaScript của bạn

Cách ẩn các tính năng chỉ dùng JavaScript một cách thanh lịch đáng ngạc nhiên

Vấn đề không có JavaScript mà không ai nói đến

Có một cách tốt hơn

Kết luận cuối cùng

Để lại một bình luận Hủy

Khám phá và Cài đặt LinaGora OpenRAG trên local

AI cho thiết kế: Tăng tốc, hiệu quả, giữ chất con người

Cài đặt odoo12 trên windows 10 chạy môi trường 64bit

Zapier vs Make vs n8n vs Agentkit vs …

ERP miễn phí cho doanh nghiệp vừa và nhỏ (ERPNEXT)

Giải Pháp Trí Nhớ Dài Hạn Long-term Memory cho AI Agents

Xây dựng cloud server cho cá nhân

Deploy các ứng dụng tĩnh và serverless nhanh chóng dùng Vercel, Coolify

Liên hệ nhanh

1–10: Phím tắt cú pháp và các yếu tố cần thiết

11–20: Logic, Vòng lặp và Mảng

21–30: Tiện ích đối tượng & mảng

31–40: Các thủ thuật & tiện ích hiện đại

Nâng cao kỹ năng JavaScript của bạn

Cách ẩn các tính năng chỉ dùng JavaScript một cách thanh lịch đáng ngạc nhiên

Vấn đề không có JavaScript mà không ai nói đến

Có một cách tốt hơn

Kết luận cuối cùng

Để lại một bình luận Hủy