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

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).

Và hãy thông cảm cho JS bởi nó đã được sinh ra trong một hoàn cảnh trớ trêu như thế này:

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.

Lưu ý rằng các đoạn code ví dụ trong bài viết này đã được thử nghiệm trong phiên bản Google Chrome 30 trở lên, sử dụng Javascript V8 engine(V8 3.20.17.15)

1. Đừng quên từ khóa var khi khởi tạo biến lần đầu tiên

Bởi nếu không khai báo kèm từ khóa var thì việc gán giá trị cho biến đó sẽ tạo ra một biến global.

2. Sử dụng `===` thay vì dùng `==`

Toán tử == (hoặc !=) sẽ tự động gán kiểu nếu cần. Trong khi đó, toán tử === (hoặc !==) sẽ không tự động thực hiện bất kỳ chuyển đổi nào. Nó thực hiện so sánh bởi cả giá trị và kiểu của dữ liệu. Cùng xem ví dụ sau:

1

2

3

4

5

6

7

8

9

10

[10] === 10    // false

[10]  == 10    // true

'10' == 10     // true

'10' === 10    // false

 [] == 0     // true

 [] === 0     // false

 '' == false   // => true nhưng true == "a" => false

 '' === false // false

3. undefined, null, 0, false, NaN, ”(chuỗi rỗng) tất cả đều là falsy values

Trong Javascript chúng ta có thể phân biệt 2 kiểu giá trị đó là falsy value và truthy value, falsy value là các giá trị khi ép kiểu về boolean sẽ trả về false, còn truthy thì ngược lại. Cách đơn giản để ép kiểu về boolean là dùng !!, nếu value đó là falsy thì trả về false, còn truthy thì ngược lại.

4. Sử dụng dấu `;` để kết thúc câu lệnh

Sử dụng dấu ; cuối mỗi dòng lệnh là một điều cần làm, bạn sẽ không bị cảnh báo gì khi bạn không dùng nó, tuy vậy thì nó sẽ được thêm bởi các trình soạn thảo nếu bạn cài thêm tiện ích cho Javascript. Nếu muốn tìm hiểu thêm vì sao, bạn có thể tham khảo tại link sau: http://davidwalsh.name/javascript-semicolons

5. Khởi tạo constructor cho đối tượng

1

2

3

4

5

6

7

8

function Person(firstName, lastName){

    this.firstName =  firstName;

    this.lastName = lastName;        

}  

var Saad = new Person("Saad", "Mousliki");

6. Cẩn thận mỗi khi sử dụng `typeof`, `instanceof` và `constructor`

typeof: là một toán tử Javascript được sử dụng để trả về một chuỗi là tên kiểu nguyên thủy của một biến, đừng quên là typeof(null) sẽ trả về đối tượng, và đối với phần lớn các kiểu đối tượng khác (Array, Date, …) cũng sẽ trả về là “object”.
constructor: là thuộc tính của prototype bên trong, nó cũng có thể bị ghi đè.
instanceof: là một toán tử Javascript khác, nó kiểm tra tất cả prototypes, trả về true nếu hàm tạo nó được tìm thấy và trả về false nếu không tìm được.

Cùng xem ví dụ sau:

1

2

3

4

5

6

var arr = ["a", "b", "c"];

typeof arr;   // "object" 

arr instanceof Array; // true

arr.constructor();  //[]

7. Tạo một Self-calling Function (Một hàm gọi chính nó).

Hàm này cũng được gọi là Self-Invoked Anonymous Function hay Immediately Invoked Function Expression (IIFE). Nó là một hàm thực hiện tự động khi bạn tạo nó:

1

2

3

4

5

6

7

8

9

10

(function(){

    // code mà bạn muốn chạy tự động

})();

// Ví dụ:

(function(a,b){

    var result = a+b;

    return result;

})(10,20)

8. Lấy giá trị ngẫu nhiên từ một mảng

1

2

3

4

5

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];

9. Lấy một số ngẫu nhiên từ một dải số cho trước

1

2

3

var x = Math.floor(Math.random() * (max - min + 1)) + min;

10. Tạo một mảng bởi các số từ 0 đến max

1

2

3

4

5

var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;);  // numbersArray = [1,2,3 ... 100]

11. Tạo một bộ ngẫu nhiên các ký tự chữ và số

1

2

3

4

5

6

7

8

9

function generateRandomAlphaNum(len) {

    var rdmString = "";

    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));

    return  rdmString.substr(0, len);

}

generateRandomAlphaNum(9)

// => "3rjzsgpmq"

12. Trộn một mảng các số

1

2

3

4

5

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

numbers = numbers.sort(function(){ return Math.random() - 0.5});

/* mảng đã được trộn, kết quả: [120, 5, 228, -215, 400, 458, -85411, 122205]  */

Có thể bạn chưa biết hàm sort trong JS có thể sắp xếp theo 2 chiều – ASC hay DESC.

ASC:

1

2

3

4

5

6

<span class="token keyword">var</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">458</span> <span class="token punctuation">,</span> <span class="token number">120</span> <span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">215</span> <span class="token punctuation">,</span> <span class="token number">228</span> <span class="token punctuation">,</span> <span class="token number">400</span> <span class="token punctuation">,</span> <span class="token number">122205</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">85411</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

numbers<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> a<span class="token operator">-</span>b<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// [-85411, -215, 5, 120, 228, 400, 458, 122205]</span>

DESC:

1

2

3

4

5

6

<span class="token keyword">var</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">458</span> <span class="token punctuation">,</span> <span class="token number">120</span> <span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">215</span> <span class="token punctuation">,</span> <span class="token number">228</span> <span class="token punctuation">,</span> <span class="token number">400</span> <span class="token punctuation">,</span> <span class="token number">122205</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">85411</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

numbers<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> b<span class="token operator">-</span>a<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// [122205, 458, 400, 228, 120, 5, -215, -85411]</span>

Còn trường hợp bạn muốn random thì lựa chọn đơn giản đó là dùng hàm Math.random()(hàm trả về random một số trong khoảng 0->1) và trừ đi 0.5 để có thể trả về số âm hay dương, vì thế mảng được sort cũng sẽ random. Có một lựa chọn thay thế tốt hơn là triển khai sắp xếp ngẫu nhiên theo mã(ví dụ: mã Fish-Yates), hơn là dùng hàm sắp xếp gốc bởi Javascript. Bạn có thể xem thêm thảo luận ở đây hoặc bài viết này.

13. Chèn một mảng vào mảng khác

1

2

3

4

5

6

7

var array1 = [12 , "foo" , {name "Foo"} , -2458];

var array2 = ["Bar" , 555 , 100];

Array.prototype.push.apply(array1, array2);

/* array1 trở thành  [12 , "foo" , {name "Foo"} , -2458 , "Bar" , 555 , 100] */

14. Chuyển đổi một tham số thành một mảng

1

2

3

var argArray = Array.prototype.slice.call(arguments);

Ví dụ:

1

2

3

4

5

6

var a = [1,2,3];

var argArray = Array.prototype.slice.call(a, 1);

console.log(argArray);

// [2,3]

15. Xác định một tham số truyền vào là một số?

1

2

3

4

5

function isNumber(n){

    return !isNaN(parseFloat(n)) && isFinite(n);

}

16. Xác định một đối số truyền vào là một mảng

1

2

3

4

5

function isArray(obj){

    return Object.prototype.toString.call(obj) === '[object Array]' ;

}

Lưu ý rằng nếu hàm toString() đã bị override, chúng ta không thể trả về đúng kết quả nếu dùng hàm này.

Hoặc dùng:

1

2

3

Array.isArray(obj); // đây là một phương thức mới của Array

Bạn cũng có thể dùng instanceof nếu bạn không làm việc với nhiều ngữ cảnh. Truy nhiên nếu bạn làm việc với nhiều ngữ cảnh khác nhau, bạn sẽ nhận được kết quả sai. Cùng xem ví dụ sau:

1

2

3

4

5

6

7

8

9

10

11

var myFrame = document.createElement('iframe');

document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;

var arr = new myArray(a,b,10); // [a,b,10]  

// instanceof sẽ trả về sai kết quả, myArray đã mất đi hàm tạo

// hàm tạo đã không được chia sẻ giữa các ngữ cảnh khác nhau

arr instanceof Array; // false

17. Lấy các giá trị nhỏ nhất hay lớn nhất trong một mảng các số

1

2

3

4

5

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 

var maxInNumbers = Math.max.apply(Math, numbers); 

var minInNumbers = Math.min.apply(Math, numbers);

18. Làm rỗng một mảng

1

2

3

4

var myArray = [12 , 222 , 1000 ];  

myArray.length = 0; // myArray bây giờ tương đương với [].

19. Đừng sử dụng delete để xóa một thành phần khỏi mảng

Hãy sử dụng splice thay vì delete để xóa một item khỏi mảng. Sử dụng delete sẽ thay thế item bằng undefined/empty thay vì xóa nó khỏi mảng. Thay vì dùng:

1

2

3

4

5

6

7

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 <=> [12, 548, "a", empty, 5478, "foo", 8852, empty, "Doe", 2154, 119]   */

Hãy dùng:

1

2

3

4

5

6

7

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 <=> [12, 548, "a", 5478, "foo", 8852, empty, "Doe", 2154, 119]   */

Hàm delete nên được dùng để xóa một thuộc tính của một đối tượng.

20. Cắt bớt mảng sử dụng length

Cũng như ví dụ trước, làm rỗng mảng, chúng ta cũng có thể dùng length để xén bớt một mảng.

1

2

3

4

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  

myArray.length = 4; // myArray <=> [12 , 222 , 1000 , 124].

Trường hợp bạn sử dụng length với giá trị lớn hơn độ dài mảng này thì các item undefined sẽ được thêm vào. Độ dài của mảng trong Javascript không phải là một thuộc tính chỉ đọc.

LEARN IT

2018-11-22