- vừa được xem lúc

JavaScript đang làm bạn bị chậm lại? Thử ngay 10 mẹo sau

0 0 1

Người đăng: Thái Thịnh

Theo Viblo Asia

JavaScript có thể là người bạn đồng hành tuyệt vời – hoặc cũng có thể là cơn ác mộng đối với nhiều lập trình viên. Đôi khi, nó giống như là điều kỳ diệu, nhưng lại có lúc khiến bạn chỉ biết nhìn chằm chằm vào lỗi cryptic và tự hỏi mình đã sai ở đâu.

Trước khi rơi vào vòng xoáy lỗi lầm cứ lặp đi lặp lại đó, hãy cùng khám phá 10 mẹo JavaScript giúp bạn tiết kiệm thời gian, công sức và tránh đau đầu ngay sau đây!

1. Ngừng sử dụng Console.log như một người mới vào nghề

Hầu hết tất cả chúng ta đều làm thế — spam console.log() như thể không có ngày mai. Nhưng có một cách tốt hơn:

console.table([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]);

Câu lệnh này sẽ in ra một bảng được định dạng thay vì một mớ hỗn độn không thể đọc được.

2. Phân tích cấu trúc như một chuyên gia

Thay vì viết thế này:

const user = data.user;
const age = data.age;

Thực hiện như sau:

const { user, age } = data;

Nó sạch hơn , nhanh hơn và giúp bạn khỏi phải gõ phím không cần thiết.

3. Thay thế vòng lặp bằng .map(), .filter().reduce()

Bạn không cần một vòng lặp for nhàm chán cho mọi thứ. JavaScript hiện đại cung cấp cho bạn các công cụ tốt hơn:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

4. Ngăn chặn đột biến đối tượng bằng Object.freeze()

Bạn có muốn đảm bảo đối tượng của mình không bị thay đổi một cách vô tình không?

const settings = Object.freeze({ theme: 'dark', layout: 'grid' });
settings.theme = 'light'; // Won’t work!

Điều này giúp tránh các lỗi không mong muốn trong mã của bạn.

5. Sử dụng chuỗi tùy chọn để tránh lỗi

Thay vì làm điều không nên này:

if (user && user.profile && user.profile.image) { console.log(user.profile.image);
}

Bạn chỉ cần làm thế này thôi:

console.log(user?.profile?.image);

Code trông gọn và sạch sẽ hơn rồi phải không?

6. Chuyển đổi NodeLists thành Mảng ngay lập tức

Bạn có thấy chán khi document.querySelectorAll()phải trả về NodeList thay vì một mảng không? Hãy chuyển đổi nó trong một bước:

const elements = [...document.querySelectorAll('div')];

Bây giờ bạn có thể sử dụng các phương thức mảng như .map().filter() trực tiếp.

7. Kiểm tra xem một đối tượng có thuộc tính không

Thay vì sử dụng undefined, hãy sử dụng:

if ('name' in user) { console.log('User has a name');
}

Nó đáng tin cậy và giúp mã dễ đọc hơn

8. Tối ưu hóa hiệu suất với requestAnimationFrame

Bạn vẫn đang sử dụng setTimeout hoặc setInterval để cập nhật UI? Hãy thử cách này thay thế:

function update() { // Do animation stuff here requestAnimationFrame(update);
}
update();

Cách này sẽ cho hiệu quả tốt hơn!

9. Tìm các thư viện JavaScript tốt nhất

Đừng tốn thời gian đoán xem thư viện nào đáng sử dụng. Hãy truy cập vào các group, diễn đàn công nghệ lớn về lập trình để tìm hiểu xem các lập trình viên hiện đang sử dụng thư viện nào. Từ đó bạn sẽ lựa chọn được những gì là tốt nhất.

10. Cập nhật liên tục và thường xuyên

JavaScript liên tục cập nhật và phát triển theo năm tháng, do đó bạn hãy cập nhật thường xuyên kiến thức về Java để giúp bản thân không bị lạc hậu nhé!

Chốt lại: Work smarter, not harder!!!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 532

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 442

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 162

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 149

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 116

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 257