Tạo bài viết
Đăng ký
22/11/2018, 23:47

43 thủ thuật hay và hữu ích với Javascript (Phần 2)

Người viết: Uy Tran Javascript là một trong những ngôn ngữ phổ biến nhất trong thế giới lập trình, ngôn ngữ không thể thiếu trong lập trình web thậm chí với JS chúng ta có thể code server hay cả mobile. Với Javascript chúng ta có thể tạo từ một alert đơn giản trên trình duyệt cho đến ...

Người viết: Uy Tran

Javascript là một trong những ngôn ngữ phổ biến nhất trong thế giới lập trình, ngôn ngữ không thể thiếu trong lập trình web thậm chí với JS chúng ta có thể code server hay cả mobile. Với Javascript chúng ta có thể tạo từ một alert đơn giản trên trình duyệt cho đến việc dùng nó điều khiển một con robot(sử dụng Nodebot & Nodruino).

Nếu các bạn đã từng gặp những hoàn cảnh trớ trêu khi code JS thì đừng nản chí, bởi vì nó là một mớ hỗn độn mà (facepalm).

Trong phạm vi bài viết này, Mình sẽ chia sẻ một bộ các thủ thuật về Javascript và các mẫu ví dụ mà ai trong chúng ta khi đụng đến Javascript đều nên biết và áp dụng một lần.

21. Sử dụng AND/OR cho biểu thức điều kiện

var foo = 10; foo == 10 && doSomething(); // nếu foo == 10 thực hiện hàm Something(); foo == 5 || doSomething(); // nếu (foo != 5) thì doSomething();
1
2
3
4
5
 
var foo = 10;  
foo == 10 && doSomething(); // nếu foo == 10 thực hiện hàm Something();
foo == 5 || doSomething(); // nếu (foo != 5) thì doSomething();
 

Logic OR cũng nên được sử dụng để đặt giá trị mặc định cho tham số truyền vào của hàm

function doSomething(arg1){ arg1 = arg1 || 10; // arg1 sẽ nhận giá trị 10 nếu nó chưa được khai gán trước đó. }
1
2
3
4
5
 
function doSomething(arg1){
    arg1 = arg1 || 10; // arg1 sẽ nhận giá trị 10 nếu nó chưa được khai gán trước đó.
}
 

22. Sử dụng phương thức map() cho vòng lặp của một mảng

var squares = [1,2,3,4].map(function (val) { return val * val; }); // squares <=> [1, 4, 9, 16]
1
2
3
4
5
6
 
var squares = [1,2,3,4].map(function (val) {  
    return val * val;  
});
// squares <=> [1, 4, 9, 16]
 

23. Làm tròn số

var num = 2.443242342; num = num.toFixed(4); // num nhận giá trị mới: "2.4432"
1
2
3
4
 
var num = 2.443242342;
num = num.toFixed(4);  // num nhận giá trị mới: "2.4432"
 

Lưu ý rằng hàm toFixed() trả về một chuỗi string, không phải là một số. Bạn cần parse nó nếu muốn nhận giá trị mới là một số.

24. Vấn đề dấu chấm động

0.1 + 0.2 === 0.3 // is false 9007199254740992 + 1 // tương đương 9007199254740992 9007199254740992 + 2 // tương đương 9007199254740994
1
2
3
4
5
 
0.1 + 0.2 === 0.3 // is false
9007199254740992 + 1 // tương đương 9007199254740992  
9007199254740992 + 2 // tương đương 9007199254740994
 

Tại sao lại 0.1 + 0.2 === 0.3 // => false? 0.1 + 0.2 bằng 0.30000000000000004. Những gì bạn cần biết là tất cả các bộ số trong Javascript là các số thực dấu chấm động được biểu diễn theo bộ nhị phân 64 bit, chuẩn IEEE 754. Bạn có thể tìm hiểu thêm ở link

Bạn có thể dùng toFixed() và toPrecision() để giải quyết vấn đề trên.

25. Kiểm tra thuộc tính của một đối tượng khi sử dụng vòng lặp for-in

Đoạn mã sau sẽ hữu ích khi bạn muốn tránh lặp qua các thuộc tính từ prototype của đối tượng.

for (var name in object) { if (object.hasOwnProperty(name)) { // do something with name } }
1
2
3
4
5
6
7
 
for (var name in object) {  
    if (object.hasOwnProperty(name)) {
        // do something with name                    
    }  
}
 

26. Toán tử comma(dấu ,)

Trong Javascript, toán tử comma cũng tương tự trong C++, nó dùng gộp các phép toán lại với nhau, theo thứ tự phân cách bởi dấu ,

var a = 0; var b = ( a++, a + 99 ); console.log(a); // 1 console.log(b); // 100
1
2
3
4
5
6
 
var a = 0;
var b = ( a++, a + 99 );
console.log(a);  // 1
console.log(b);  // 100
 

27. Lưu các biến cần tính toán hay cần truy vấn

Trong khi sử dụng Jquery selector, chúng ta nên tạo biến lưu các thành phần DOM.

var navright = document.querySelector('#right'); var navleft = document.querySelector('#left'); var navup = document.querySelector('#up'); var navdown = document.querySelector('#down');
1
2
3
4
5
6
 
var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');
 

28. Hãy xác định cụ thể tham số nào đó trước khi cho nó vào hàm isFinite()

Hãy xem ví dụ sau để xem các giá trị trả vể của hàm isFinite() nhé:

isFinite(0/0) ; // false isFinite("foo"); // false isFinite("10"); // true isFinite(10); // true isFinite(undefined); // false isFinite(); // false isFinite(null); // true !!!
1
2
3
4
5
6
7
8
9
 
isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10);   // true
isFinite(undefined);  // false
isFinite();   // false
isFinite(null);  // true  !!!
 

29. Không sử dụng chỉ số âm cho arrays

var numbersArray = [1,2,3,4,5]; var from = numbersArray.indexOf("foo") ; // from = -1 numbersArray.splice(from,2); // [5]
1
2
3
4
5
 
var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ;  // from = -1
numbersArray.splice(from,2);    // [5]
 

Hãy chắc chắn rằng tham số truyền vào hàm splice() không phải là số âm.

30. Serialization và deserialization (với dữ liệu dạng JSON)

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; var stringFromPerson = JSON.stringify(person); /* stringFromPerson tương đương "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ var personFromString = JSON.parse(stringFromPerson); /* personFromString bây giờ tương đương person */
1
2
3
4
5
6
7
 
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson tương đương "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
var personFromString = JSON.parse(stringFromPerson);  
/* personFromString bây giờ tương đương person  */
 

31. Tránh sử dụng eval() hay hàm tạo của Function nhiều

Việc dùng hàm tạo hay hàm eval() sẽ tiêu tốn nhiều tài nguyên bởi mỗi lần gọi nó là mỗi lần các công cụ biên dịch phải chuyển đổi mã nguồn thành mã thực thi.

var func1 = new Function(functionCode); var func2 = eval(functionCode);
1
2
3
4
 
var func1 = new Function(functionCode);
var func2 = eval(functionCode);
 

32. Tránh sử dụng with()

Sử dụng with() sẽ chèn thêm biến toàn cục, vì thế nếu có một biến cùng tên có thể gây nhầm lẫn và bị ghi đè.

33. Không nên sử dụng for-in cho mảng

Thay vì sử dụng:

var sum = 0; for (var i in arrayNumbers) { sum += arrayNumbers[i]; }
1
2
3
4
5
6
 
var sum = 0;  
for (var i in arrayNumbers) {  
    sum += arrayNumbers[i];  
}
 

Thì cách tốt hơn là:

var sum = 0; for (var i = 0, len = arrayNumbers.length; i < len; i++) { sum += arrayNumbers[i]; }
1
2
3
4
5
6
 
var sum = 0;  
for (var i = 0, len = arrayNumbers.length; i < len; i++) {  
    sum += arrayNumbers[i];  
}
 

i và len sẽ được khởi tạo một lần bởi vì nó nằm trong câu lệnh đầu tiên của vòng lặp for

for (var i = 0; i < arrayNumbers.length; i++)

Tại sao? Bởi độ dài của arrayNumbers được tính toán lại mỗi khi vòng lặp lặp lại. Lưu ý: Việc tính toán lại độ dài trong mỗi lần lặp đã được cập nhật trong các Javascript engine mới nhất.

34. Truyền function vào setTimeout(), setInterval() thay vì truyền chuỗi string vào

Nếu bạn truyền một chuỗi string vào, chuỗi này được xác định với cách tương tự như hàm eval(), là cách chậm hơn. Thay vì dùng chuỗi:

setInterval('doSomethingPeriodically()', 1000); setTimeout('doSomethingAfterFiveSeconds()', 5000);
1
2
3
4
 
setInterval('doSomethingPeriodically()', 1000);  
setTimeout('doSomethingAfterFiveSeconds()', 5000);
 

Hãy viết trực tiếp vào

setInterval(doSomethingPeriodically, 1000); setTimeout(doSomethingAfterFiveSeconds, 5000);
1
2
3
4
 
setInterval(doSomethingPeriodically, 1000);  
setTimeout(doSomethingAfterFiveSeconds, 5000);
 

35. Sử dụng switch-case thay vì dùng if-else

Sử dụng switch-case sẽ nhanh hơn khi có nhiều hơn 2 trường hợp so sánh, và code dễ nhìn hơn. Và cũng nên tránh sử dụng nó nếu bạn có nhiều hơn 10 cases.

36. Sử dụng switch-case với dải số

Bạn có thể sử dụng switch-case với dải số.

function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "Sai gía trị rồi :)"; break; case (age >= 50): category = "Lớn tuổi"; break; case (age <= 20): category = "Thiếu niên"; break; default: category = "Bất tử!"; break; }; return category; } getCategory(5); // "Thiếu niên"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function getCategory(age) {  
    var category = "";  
    switch (true) {  
        case isNaN(age):  
            category = "Sai gía trị rồi :)";  
            break;  
        case (age >= 50):  
            category = "Lớn tuổi";  
            break;  
        case (age <= 20):  
            category = "Thiếu niên";  
            break;  
        default:  
            category = "Bất tử!";  
            break;  
    };  
    return category;  
}  
getCategory(5);  // "Thiếu niên"
 

37. Tạo một đối tượng mà prototype của nó là một đối tượng

Chúng ta có thể tạo một đối tượng mà prototype của nó là những kiểu cung cấp như sau:

function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype= object; return new OneShotConstructor(); } clone(Array).prototype ; // []
1
2
3
4
5
6
7
8
 
function clone(object) {  
    function OneShotConstructor(){};
    OneShotConstructor.prototype= object;  
    return new OneShotConstructor();
}
clone(Array).prototype ;  // []
 

38. Hàm escaper HTML

function escapeHTML(text) { var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", '"': "&quot;"}; return text.replace(/[<>&"]/g, function(character) { return replacements[character]; }); }
1
2
3
4
5
6
7
8
 
function escapeHTML(text) {  
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", '"': "&quot;"};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    });
}
 

Hàm này có thể dùng trong trường hợp người dùng thêm code html vào trang web:

escapeHTML('<div class="abc"></div>')
1
2
3
 
escapeHTML('<div class="abc"></div>')
 

Kết quả trả về sẽ là

"&lt;div class=&quot;abc&quot;&gt;&lt;/div&gt;"

Trần Trung Dũng

15 chủ đề

2610 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024