HomeLập trìnhJavaScript10 thủ thuật...

10 thủ thuật JavaScript mà mọi nhà phát triển web nên biết


Nếu bạn tối ưu hóa mã JavaScript của mình bằng những thủ thuật này, nó có thể giúp bạn viết mã sạch hơn, tiết kiệm tài nguyên và tối ưu hóa thời gian lập trình của bạn.

Theo RedMonk, JavaScript là ngôn ngữ lập trình phổ biến nhất. Hơn nữa, SlashData ước tính rằng có khoảng 12,4 triệu nhà phát triển sử dụng JavaScript, bao gồm cả CoffeeScript và TypeScript của Microsoft.

Điều này có nghĩa là hàng triệu người sử dụng JavaScript để làm lập trình viên, nhận các công việc tự do thông qua các trang web như UpWork và Freelancer hoặc thậm chí bắt đầu kinh doanh phát triển web của riêng họ.

freeCodeCamp có một khóa học cơ bản tuyệt vời về JavaScript. Tuy nhiên, nếu bạn đã quen thuộc với các nguyên tắc cơ bản và muốn nâng cao trình độ của mình về JavaScript, thì đây là mười thủ thuật bạn nên tìm hiểu và tích hợp vào quy trình làm việc của mình.

1. Cách sử dụng phím tắt cho câu điều kiện

JavaScript cho phép bạn sử dụng một số phím tắt nhất định để làm cho mã của bạn dễ nhìn hơn. Trong một số trường hợp đơn giản, bạn có thể sử dụng các toán tử logic &&|| thay vì ifelse.

Hãy nhìn vào && nhà điều hành trong hành động.

Đoạn ví dụ:

// instead of
if (accessible) {
  console.log("It’s open!");
}

// use
accessible && console.log("It’s open!");

Các || toán tử có chức năng như một mệnh đề “hoặc”. Bây giờ, sử dụng toán tử này phức tạp hơn một chút vì nó có thể ngăn ứng dụng thực thi. Tuy nhiên, chúng ta có thể thêm một điều kiện để vượt qua nó.

Đoạn ví dụ:

// instead of
if (price.data) {
  return price.data;
} else {
  return 'Getting the price’';
}

// use
return (price.data || 'Getting the price');

2. Cách chuyển đổi thành số nguyên lớn nhất bằng toán tử ~~

sử dụng Math.floor để trả về số nguyên lớn nhất nhỏ hơn hoặc bằng một số đã cho trong phương trình sẽ chiếm tài nguyên, chưa kể đó là một chuỗi khá dài cần ghi nhớ. Một cách hiệu quả hơn là sử dụng ~~ nhà điều hành

Đọc thêm  Giải thích sự kiện JavaScript Onclick

Đây là một ví dụ:

// instead of
Math.floor(Math.random() * 50);

// use
~~(Math.random() * 50);

// You can also use the ~~ operator to convert anything into a number value.
// Example snippet:
~~('whitedress') // returns 0
~~(NaN) // returns 0

3. Thay đổi kích thước hoặc làm trống một mảng bằng cách sử dụng array.length

Đôi khi bạn cần điều chỉnh kích thước của mảng hoặc để trống mảng đó. Cách hiệu quả nhất để làm điều này là sử dụng Array.length.

Đoạn ví dụ:

let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

console.log(array.length); // returns the length as 10

array.length = 4;

console.log(array.length); // returns the length as 4
console.log(array); // returns ['a', 'b', 'c', 'd']

Bạn cũng có thể dùng Array.length để xóa tất cả các giá trị khỏi một mảng đã chỉ định.

Đoạn ví dụ:

let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

array.length = 0;

console.log(array.length); // returns the length as 0
console.log(array); // returns []

4. Cách hợp nhất các mảng mà không gây quá tải cho máy chủ

Nó có thể gây căng thẳng nghiêm trọng cho máy chủ khi hợp nhất các mảng, đặc biệt nếu bạn đang xử lý các tập dữ liệu lớn. Để giữ mọi thứ đơn giản và duy trì mức hiệu suất, hãy sử dụng Array.concat()Array.push.apply(arr1, arr2) chức năng.

Việc sử dụng một trong hai hàm này tùy thuộc vào kích thước mảng của bạn.

Hãy xem cách xử lý các mảng nhỏ hơn.

Đoạn ví dụ:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.concat(list2)); // returns the merged values of both arrays, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

Khi sử dụng Array.concat() trên các tập dữ liệu lớn hơn, nó sẽ tiêu tốn rất nhiều bộ nhớ trong khi tạo một mảng mới. Để khắc phục tình trạng giảm hiệu suất, hãy sử dụng Array.push.apply(arr1, arr2) hợp nhất mảng thứ hai vào mảng thứ nhất mà không tạo mảng mới.

Đoạn ví dụ:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.push.apply(list1, list2)); // returns 10, the new length of list1
console.log(list1); // returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

5. Cách sử dụng bộ lọc với mảng

Lọc một mảng rất hữu ích khi bạn đang làm việc với nhiều cột dữ liệu tương ứng. Trong trường hợp này, bạn có thể bao gồm và loại trừ dữ liệu dựa trên bất kỳ đặc điểm nào mô tả một nhóm trong mảng của bạn.

Đọc thêm  Cách đổi tên nhiều khóa đối tượng trong JavaScript

Để lọc một mảng, hãy sử dụng filter() chức năng.

Đoạn ví dụ:

const cars = [
  { make: 'Opel', class: 'Regular' },
  { make: 'Bugatti', class: 'Supercar' },
  { make: 'Ferrari', class: 'Supercar' },
  { make: 'Ford', class: 'Regular' },
  { make: 'Honda', class: 'Regular' },
]
const supercar = cars.filter(car => car.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format

Bạn cũng có thể dùng filter() cùng với Boolean để loại bỏ tất cả null hoặc undefined các giá trị từ mảng của bạn.

Đoạn ví dụ:

const cars = [
  { make: 'Opel', class: 'Regular' },
  null,
  undefined
]

cars.filter(Boolean); // returns [{ make: 'Opel', class: 'Regular' }] 

Giả sử bạn có một tập dữ liệu gồm các giá trị lặp lại và bạn cần tạo các giá trị duy nhất từ ​​tập hợp này. Bạn có thể làm như vậy với sự kết hợp của cú pháp trải rộng ... và loại đối tượng Set. Cách tiếp cận này hoạt động với cả từ và số.

Đoạn ví dụ:

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
const unrepeated_cars = [...new Set(cars)];

console.log(unrepeated_cars); // returns the values Opel, Bugatti, Ferrari

7. Cách sử dụng phím tắt chức năng thay thế

Bạn nên làm quen với String.replace() chức năng. Tuy nhiên, nó chỉ thay thế một chuỗi bằng một dòng được chỉ định một lần và dừng lại từ đó. Giả sử bạn có tập dữ liệu lớn hơn và bạn cần nhập hàm này nhiều lần. Nó trở nên bực bội sau một thời gian.

Để làm cho cuộc sống của bạn dễ dàng hơn, bạn có thể thêm /g ở cuối biểu thức chính quy, vì vậy hàm sẽ chạy và thay thế tất cả các điều kiện phù hợp mà không dừng lại ở điều kiện đầu tiên.

Đoạn ví dụ:

const grammar="synonym synonym";

console.log(grammar.replace(/syno/, 'anto')); // this returns 'antonym synonym'
console.log(grammar.replace(/syno/g, 'anto')); // this returns 'antonym antonym'

8. Cách lưu trữ các giá trị trong bộ đệm

Khi bạn đang làm việc với các mảng lớn và cần yêu cầu các phần tử theo ID bằng cách sử dụng getElementById()hoặc theo tên lớp bằng cách sử dụng getElementsByClassName(), thì JavaScript sẽ chạy qua mảng trên một vòng lặp với từng yêu cầu phần tử tương tự. Điều này có thể chiếm rất nhiều tài nguyên.

Đọc thêm  Học JavaScript - Hướng dẫn tương tác miễn phí trong 7 giờ

Tuy nhiên, bạn có thể tăng hiệu suất bằng cách lưu vào bộ đệm một giá trị nếu bạn biết mình thường xuyên sử dụng một lựa chọn đã chỉ định.

Đoạn ví dụ:

const carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');

9. Cách kiểm tra xem một đối tượng có giá trị hay không

Khi bạn đang làm việc với nhiều đối tượng, sẽ khó theo dõi xem đối tượng nào chứa giá trị thực và đối tượng nào bạn có thể xóa.

Dưới đây là mẹo nhanh về cách kiểm tra xem một đối tượng có trống hay có giá trị với Object.keys() chức năng.

Đoạn ví dụ:

Object.keys(objectName).length // if it returns 0 then the Object is empty, otherwise it displays the number of values

10. Cách thu nhỏ tệp JavaScript của bạn

Các tệp JS lớn ảnh hưởng đến hiệu suất tải và phản hồi của trang của bạn. Trong khi viết mã, bạn có thể để lại các dòng, nhận xét và mã chết không cần thiết. Tùy thuộc vào kích thước tệp của bạn, nó có thể chồng chất và trở thành nút cổ chai dư thừa.

Có một số công cụ giúp bạn dọn dẹp mã và làm cho các tệp JS nhẹ hơn – hoặc thu nhỏ chúng, theo thuật ngữ của nhà phát triển. Mặc dù việc thu nhỏ tệp JS về bản chất không phải là hack, nhưng nó vẫn có lợi cho các nhà phát triển khi biết và triển khai.

Một là Google Closure Compiler, nó phân tích cú pháp JavaScript của bạn, phân tích nó, loại bỏ mã chết, viết lại và giảm thiểu những gì còn lại. Cái còn lại là Microsoft Ajax Minifier, cho phép bạn cải thiện hiệu suất của ứng dụng web bằng cách giảm kích thước tệp JavaScript của bạn.

Ở đó bạn có nó. Sử dụng mười thủ thuật này để làm cho mã của bạn sạch hơn, tiết kiệm tài nguyên máy chủ và duy trì thời gian lập trình.

Cảm ơn vì đã đọc!

Tôi là một nhà văn đam mê tiếp thị kỹ thuật số, phát triển web và an ninh mạng. Bạn có thể liên hệ với tôi trên LinkedIn tại đây.

Bạn cũng có thể thưởng thức một số bài viết khác tôi đã viết:



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status