Một số thủ thuật trong JS
Một số thủ thuậ hữu ích khi viết code javascript Có rất nhiều thủ thuật trong JS ở bài viết này mình xin trình bày môt số thủ thuật hữu ích trong JS Đặt thời gian chờ XMLHttpRequest Có thể hủy bỏ kết nối nếu XHR quá lâu(ví dụ do vấn đề mạng) bằng cách sử dụng setTimeout() với việc gọi XHR ...
Một số thủ thuậ hữu ích khi viết code javascript Có rất nhiều thủ thuật trong JS ở bài viết này mình xin trình bày môt số thủ thuật hữu ích trong JS
- Đặt thời gian chờ XMLHttpRequest Có thể hủy bỏ kết nối nếu XHR quá lâu(ví dụ do vấn đề mạng) bằng cách sử dụng setTimeout() với việc gọi XHR
var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// do something with response data
}
}
var timeout = setTimeout( function () {
xhr.abort(); // call error callback
}, 60*1000 /* timeout after a minute */ );
xhr.open('GET', url, true);
xhr.send();
- Sử dụng lệnh switch/case với các dãy số: ví du:
function getCategory(age) {
var category = "";
switch (true) {
case isNaN(age):
category = "not an age";
break;
case (age >= 60):
category = "Old";
break;
case (age <= 20):
category = "Baby";
break;
default:
category = "Young";
break;
};
return category;
}
getCategory(5); // will return "Baby"
- Sử dụng lệnh switch/case thay vì if/else Khi có hơn 2 trường hợp sử dụng switch /case sẽ nhanh hơn if/else và trông code sẽ sạch sẽ hơn. Nên tránh sử dụng khi có 10 trường hợp
- Serialization và deserialization (làm việc với JSON) ví dụ :
var person = {name :'Minh', age : 25, department : {ID : 15, name : "develop"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Minh","age":25,"department":{"ID":15,"name":"develop"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object */
- Các vấn đề dấu chấm động ví dụ:
0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // is equal to 9007199254740992 9007199254740992 + 2 // is equal to 9007199254740994
Tại sao điều này lại xảy ra? 0,1 +0,2 tương đương với 0.30000000000000004. Những gì bạn cần biết là tất cả các số trong JavaScript đều là dấu chấm động được đại diện trong bộ nhị phân 64 bit theo tiêu chuẩn IEEE 754. Có thể sử dụng hàm toFixed () và toPrecision () để giải quyết vấn đề này. 6. Làm tròn số xuống vị trí N thập phân ví dụ:
var num =2.443242342; num = num.toFixed(4); // num will be equal to 2.4432
LƯU Ý: hàm toFixed () trả về một chuỗi chứ không phải một số.
- Sử dụng hàm map để lặp lại các mảng
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
- Không sử dụng hàm delete để xóa một phẩn tử khỏi mảng Sử dụng splice thay vì sử dụng delete để xóa một mục khỏi một mảng. Sử dụng delete sẽ biến phần từ đó thành undefined thay vì xóa nó khỏi mảng.
ví dụ:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 delete items[3]; // return true items.length; // return 11 /* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */ Hãy dùng… var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; items.length; // return 11 items.splice(3,1) ; items.length; // return 10 /* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
Phương pháp delete cũng được sử dụng để xóa một thuộc tính object.
- làm rỗng một mảng
var myArray = [12 , 222 , 1000 ]; myArray.length = 0; // myArray will be equal to [].
- Lấy phần tử lớn nhất và nhỏ nhất trong 1 mảng
ví dụ
var numbers = [1,2,3,4,5]; var maxInNumbers = Math.max.apply(Math, numbers); //5 var minInNumbers = Math.min.apply(Math, numbers); //1
- Hàm string trim Ta biết chức năng cơ bản của hàm trim trong nhiều ngôn ngữ là loại bỏ khoảng trắng khỏi 1 chuỗi. Nhưng trong javascript ko có, ta có thể định nghĩa thêm vào String object như sau:
String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};
“ abc def “.trim() // “abcdef”
- Xáo trộn một mảng số
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205] */
Thực hiện một thứ tự sắp xếp ngẫu nhiên theo mã (ví dụ: Fisher-Yates shuffle) sẽ hữu ích hơn là sử dụng chức năng sắp xếp sẵn có trong JavaScript . 13. Tạo tập hợp các ký tự chữ và số ngẫu nhiên
function generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
- Cẩn thận khi sử dụng typeof, instanceof và constructor. Typeof: một toán tử trong JavaScript được sử dụng để trả về một chuỗi đại diện cho kiểu dữ liệu nguyên thủy của một biến, typeof null sẽ trả về "object", và đối với phần lớn các kiểu khác (Array, Date, ...) cũng sẽ trả về "object".
Constructor: là một mẫu thuộc tính nội bộ, có thể được ghi đè bằng mã.
Instanceof: là một toán tử trong JavaScript kiểm tra tất cả các chuỗi nguyên mẫu cấu trúc, giá trị trả về true nếu nó được tìm thấy và false nếu không tìm thấy.
- Undefined, null, 0, false, NaN, ' (chuỗi trống) tất cả đều là sai. 16 Sử dụng === thay vì ==
Sử dụng == (hoặc !=) sẽ tự động thực hiện chuyển đổi nếu cần. Dùng === (hoặc !==) sẽ không thực hiện bất kỳ chuyển đổi nào. Nó so sánh về giá trị và kiểu, nhanh hơn việc sử dụng ==. [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false [] == 0 // is true [] === 0 // is false ' == false // is true but true == "a" is false ' === false // is false
- Gọi hàm anonymous Gọi hàm Điều này thường được coi là gọi hàm ẩn danh hoặc hiển thị gọi hàm ngay lập tức (IIFE). Đó là một chức năng tự động thực hiện khi bạn tạo nó và có dạng như sau:
(function(){
// some private code that will be executed automatically
})();
(function(a,b){
var result = a+b;
return result;
})(10,20)
- Lấy một phần tử ngẫu nhiên từ 1 mảng ví dụ:
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'bar' , 2145 , 119]; var randomItem = items[Math.floor(Math.random() * items.length)];
- Lấy một số ngẫu nhiên trong 1 phạm vi cụ thể
ví dụ:
var x = Math.floor(Math.random() * (max - min + 1)) + min;
- Tạo một mảng từ 0 đến n
var numbersArray = [] , max = 99; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 ... 99]
- Thêm một mảng vào 1 mảng khác
var array1 = [12 , "foo" , {name "Joe"} , -1111];
var array2 = ["xxx" , 555 , 100];
Array.prototype.push.apply(array1, array2);
- Kiểm tra 1 phần tử là 1 số.
unction isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
- Kiêm tra phần tử cho trước là 1 mảng
function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
- Cắt một mảng sử dụng length
Giống như ví dụ trước đó trong việc làm trống một mảng, chúng ta cắt bớt một mảng sử dụng thuộc tính length.
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
Thêm nữa, nếu bạn đặt array length thành giá trị cao hơn, độ dài sẽ được thay đổi và các mục mới sẽ được thêm vào với giá trị không xác định. array length không phải là thuộc tính chỉ đọc. myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1] ; // undefined 25.Xác minh các đối số trước khi chuyển nó đến isFinite ()
isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undefined); // false
isFinite(); // false
isFinite(null); // true !!!
- Tránh sử dụng vòng lặp for-in cho các mảng
Thay vì sử dụng…
var sum = 0;
for (var i in arrayNumbers) {
sum += arrayNumbers[i];
}
…tốt hơn nên sử dụng….
var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
sum += arrayNumbers[i];
}
Hơn nữa, sự khởi tạo của i và len được thực hiện một lần bởi vì nó là trong câu lệnh đầu tiên của vòng lặp for. Việc này nhanh hơn là sử dụng... for (var i = 0; i < arrayNumbers.length; i++) Tại sao lại như vậy? Độ dài mảng arrayNumbers được tính lại mỗi khi vòng lặp lặp lại. LƯU Ý: việc tính lại độ dài của mỗi lần lặp đã được cố định trong các công cụ JavaScript mới nhất.
- Tránh sử dụng try-catch-finally trong vòng lặp
Dùng try-catch-finally để tạo ra một biến mới trong phạm vi hiện hành, mỗi khi mệnh đề catch được thực hiện tại nơi đối tượng ngoại lệ bị bắt gặp và được gán cho một biến. Thay vì sử dụng…
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i++) {
try {
// do something that throws an exception
}
catch (e) {
// handle exception
}
}
thì bạn có thể dùng:
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i <len; i++) {
// do something that throws an exception
}
}
catch (e) {
// handle exception
}
- iải quyết thời gian chờ WebSocket
Nói chung khi một kết nối WebSocket được thiết lập, một máy chủ có thể ngừng kết nối của bạn sau 30 giây không hoạt động. Tường lửa cũng có thể mất kết nối sau một thời gian không hoạt động. Để giải quyết vấn đề thời gian chờ, bạn có thể gửi một tin nhắn rỗng đến máy chủ định kỳ. Để làm điều này, thêm hai hàm này vào mã của bạn: một để duy trì kết nối và kết nối còn lại để hủy bỏ việc giữ lại. Sử dụng thủ thuật này, bạn sẽ kiểm soát thời gian chờ.
var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send(');
}
timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
Hàm keepAlive () nên được thêm vào cuối onOpen () của kết nối webSocket, và cancelKeepAlive () ở cuối onClose ().
- Đăt các giá trị mặc định sử dụng || Ngày nay trong ES6 có tính năng đối số mặc định. Để mô phỏng tính năng này trong các trình duyệt cũ, bạn có thể sử dụng || (toán tử OR) bằng cách coi giá trị mặc định như một tham số thứ hai sẽ được sử dụng. Nếu tham số đầu tiên trả về falsegiá trị thứ hai sẽ được sử dụng làm giá trị mặc định. Xem ví dụ này:
function User(name, age) {
this.name = name || "Oliver Queen";
this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27
var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25
- Sử dụng toán tử && để viết ngắn code Nếu bạn thấy một mã tương tự:
if (conected) {
login();
}
Bạn có thể rút ngắn nó bằng cách sử dụng sự kết hợp giữa một biến (sẽ được xác minh) và một hàm bằng cách sử dụng && (toán tử AND) . Ví dụ, mã trước đây có thể trở nên nhỏ hơn trong một dòng: conected && login(); Bạn có thể làm tương tự để kiểm tra nếu một số thuộc tính hoặc hàm tồn tại trong đối tượng. Tương tự như mã dưới đây: user && user.login(); **Còn rất nhiều thủ thuật hữu ích nữa các bạn có thể tham khảo ở đây: ** https://blog.jscrambler.com/12-extremely-useful-hacks-for-javascript/ https://modernweb.com/45-useful-javascript-tips-tricks-and-best-practices/
