Vài thủ thuật nhỏ khi dùng javascript

Vài thủ thuật nhỏ khi dùng javascript

Jos Hoàng Tiên Làm sao để code
Dưới đây là 1 vài cách vui vẻ thu gọn code, debugg mà mình học lỏm và đọc được, chia sẻ với các bạn:

1. Gọi phuơng thức

Đôi khi chúng ta phải if thì thế này mà else thì thế kia:
1
2
3
4
5
6
7
 
if (success) {
  obj.start();
} else {
  obj.stop();
}
 
Có thể viết thành thế này
1
2
3
4
 
var method = (success ? 'start' : 'stop');
obj[method]();
 

2 Nối chuỗi

Chắc chắn là chúng ta sẽ phải nối chuỗi rất nhiều, thay vì dùng + thì có thể dùng join()
1
2
3
4
 
['đã', 'nối'].join(' '); // đã nối;
['nối', 'lại', 'với', 'nhau'].join(', '); // nối lại với nhau;
 

3.Trả về giá trị default

Một ví dụ bình thường
1
2
3
4
5
6
7
8
9
 
function setAge(age) {
    if (age) {
       this.age = age;
    } else {
       this.age = 10;
    }
}
 
Có thể viết thành
1
2
3
4
5
 
function setAge(age) {
  this.age = age || 10
}
 
Bây giờ gọi setAge() luôn thì sẽ có kết quả default cho age là 10.

4.Sử dụng &&

Có ví dụ:
1
2
3
4
5
 
if (isYes) {
  alert('yes');
}
 
Có thể dùng như thế này:
1
2
3
 
isYes && alert('yes');
 

5. Xem thời gian chạy

Đọc cái hiểu luôn
1
2
3
4
5
6
7
8
9
10
11
 
var a = [1,2,3,4,5,6,7,8,9,10];
 
console.time('testing_forward');
for (var i = 0; i < a.length; i++);
console.timeEnd('testing_forward');
 
console.time('testing_backwards');
for (var i = a.length - 1; i >= 0; i--);
console.timeEnd('testing_backwards');
 

6.Debugging

1
2
3
4
5
6
7
8
9
10
11
 
var x = 1;
debugger; // Code execution stops here, happy debugging
x++;
 
var x = Math.random(2);
if (x > 0.5) {
  debugger; // Conditional breakpoint
}
x--;
 

7.Template

1
2
3
4
5
6
7
8
9
10
11
12
 
var firstName = 'NoOne';
var screenName = 'no1'
 
// Bình thường thì viết như thế này
'Hi, my name is ' + firstName + ' and my xxx name is @' + screenName;
 
// Sửa lại như thế này có vẻ ngầu hơn
var template = 'Hi, my name is {first-name} and my twitter screen name is @{screen-name}';
var txt = template.replace('{first-name}', firstName)
                  .replace('{screen-name}', screenName);