JavaScript là gì? Đây là một ngôn ngữ lập trình quen thuộc và được nhiều dev sử dụng. Nếu muốn tối ưu code trong ngôn ngữ JavaScript thì việc sử dụng những mẹo hack này chắc chắn sẽ giúp bạn rất nhiều. Nó vừa giúp code của bạn sạch hơn, vừa tiết kiệm thời gian và tối ưu thời gian lập trình.
Phím tắt trong JavaScript là gì? Đó là những lệnh cho phép bạn sử dụng để viết hàm. JavaScript cho phép bạn sử dụng các phím tắt nhất định để làm cho code dễ nhìn hơn. Trong một số trường hợp đơn giản, bạn có thể sử dụng toán tử logic && và || thay if và else.
Hãy xem && toán tử đang hoạt động với cách với đoạn code dưới đây
// instead of
if (accessible) {
console.log(“It’s open!”);
}
// use
accessible && console.log(“It’s open!”);
|| mang ý nghĩa là “hoặc” giúp bạn thực hiện câu lệnh điều kiện của mình đơn giản hơn
// instead of
if (price.data) {
return price.data;
} else {
return 'Getting the price’';
}
// use
return (price.data || 'Getting the price');
Các dev có thể loại bỏ số thập phân để trả về kết quả là một tích phân bằng cách sử dụng math.floor hoặc math.round để sử dụng dữ liệu. Một cách hiệu quả hơn là sử dụng ~~
// instead of
math.round(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
Đôi khi các dev sẽ cần điều chỉnh kích thước mảng của mình hoặc làm trống nó. Và cách hiệu quả nhất để làm điều này là sử dụng array.length
array.length = n var 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ể sử dụng array.length để xóa tất cả các giá trị khỏi một mảng được chỉ định.
var 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);
Việc hợp nhất dữ liệu là vấn đề quan trọng, có thể gây ảnh hưởng nhiều đến máy chủ nếu khối lượng dữ liệu được hợp nhất quá lớn. Để giữ mọi thứ đơn giản và duy trì mức hiệu suất, hãy sử dụng các hàm array.concat() và array.push.apply(arr1, arr2). Việc sử dụng một trong hai hàm này sẽ còn tùy thuộc vào kích thước mảng.
Hãy xem cách xử lý các mảng nhỏ:
var list1 = [a, b, c, d, e]; var 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)
Ngược lại, khi sử dụng array.concat() đối với các tập dữ liệu lớn hơn, nó sẽ tiêu tốn nhiều bộ nhớ trong khi tạo một mảng mới. Để tránh tình trạng giảm hiệu suất, hãy sử dụng cách array.push.apply(arr1, arr2) hợp nhất mảng thứ hai thành mảng đầu tiên mà không cần tạo mảng mới.
var list1 = [a, b, c, d, e]; var list2 = [f, g, h, i, j]; console.log(list1.push.apply(list1, list2)); // returns the merged values of both arrays (a, b, c, d, e,f, g, h, i, j)
Lọc mảng rất hữu ích khi 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ể tóm gọn hoặc loại trừ dữ liệu dựa vào hàm sau filter()
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(h => h.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format
Bạn cũng có thể sử dụng filter() cùng với Boolean để trả về tất cả các giá trị null hoặc không xác định từ mảng của bạn.
cars.filter(Boolean)
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 ra các giá trị duy nhất từ tập hợp này. Bạn có thể làm như vậy khi sử dụng lệnh syntax ... và kiểu đối tượng Set. Cách làm này có thể thực hiện với cả dữ liệu số và chữ.
const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel']; var unrepeated_cars = [...new Set(cars)]; console.log(unrepeated_cars); // returns the values Opel, Bugatti, Ferrari
Hãy làm quen với hàm string.replace() để việc coding của bạn trở nên nhẹ nhàng hơn. 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ó sẽ trở nên kém hiệu quả hơn.
Ngoài ra, để đơn giản hơn bạn cũng có thể thêm /g vào cuối regex, để hàm 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.
var grammar = "synonym synonym"; console.log(grammar.replace(/syno/, "anto")); // this returns "antonym synonym" console.log(grammar.replace(/syno/g, "anto")); // this returns "antonym antonym"
Khi bạn đang làm việc với các mảng lớn và cần phân loại 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 chạy qua mảng trên một vòng lặp với mỗi 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.
Tuy nhiên, bạn có thể tăng hiệu suất bằng cách lưu vào bộ nhớ đệm một biến nếu dữ liệu đó được bạn sử dụng thường xuyên.
var carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');
Khi bạn đang làm việc với nhiều object, 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. Đây là một thủ thuật nhanh về cách kiểm tra xem một đối tượng trống hoặc có giá trị với hàm Object.keys().
Object.keys(objectName).length // if it returns 0 then the Object is empty, otherwise it displays the number of values
Các tệp JavaScript lớn sẽ ảnh hưởng đến hiệu suất tải và tốc độ phản hồi trang. Trong khi coding bạn có thể bị ảnh hưởng với các nhận xét và dead code 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ể trở nên nhiều hơn và nặng hơn với bộ nhớ của máy.
Có một số công cụ giúp bạn làm sạch mã và làm cho các tệp JS nhẹ hơn – hoặc giảm độ lớn của file. Mặc dù việc thu nhỏ tệp JS không phải là một sự cố nghiêm trọng nhưng nó vẫn có lợi cho các dev hơn khi biết và thực hiện.
Một trong những ứng dụng đó là Google Closure Compiler của Google, nó cho phép người dùng phân tích cú pháp JavaScript, loại bỏ dead code, viết lại và giảm dung lượng những phần còn lại. Ứng dụng thứ hai là Microsoft Ajax Minifier cho phép 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.
Trên đây là 10 thủ thuật hay ho mà các dev có thể sử dụng để code của mình sạch sẽ và gọn gàng hơn. Từ đó sẽ vừa tiết kiệm thời gian vừa duy trì khả năng lập trình tốt hơn trên máy chủ.
You need to login in order to like this post: click here
YOU MIGHT ALSO LIKE
SUBSCRIBE TO OUR NEWSLETTER
