Mục lục
Có thể bạn là một JavaScript developer và tiếp xúc với nó hằng ngày trong một thời gian dài. Nhưng đôi lúc có thể bạn đã bỏ qua một số tính năng mới của JavaScript có thể giúp bạn giải quyết vấn đề tương tự với ít mã code hơn. Những kỹ thuật này có thể giúp bạn code JavaScript clean và optimize hơn. Ngoài ra nó cũng có thể giúp bạn trong một số buổi phỏng vấn vào năm 2021.
Sau đây chúng ta sẽ cùng điểm qua một số mẹo để tối ưu mã code:
If condition
Nếu chúng ta có một loạt các điều kiện || trong một mệnh đề điều kiện như thế này
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
//logic
}
thì chúng ta có thể lưu chúng trong một mảng và sử dụng Array#includes
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
//logic
}
If true … else
Đây là một phím tắt tuyệt vời hơn khi chúng ta có các điều kiện if-else không chứa các logic lớn bên trong thì chúng ta có thể sử dụng ternary operators để giảm bớt mã cần phải viết.
Cách viết dài
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Thay thành
let test = (x > 10) ? true : false;
let test = x > 10;
console.log(test);
Gía trị mặc định
Đôi khi chúng ta muốn tạo một biến mới dựa trên một dữ liệu đầu vào chúng ta tiến hành kiểm tra xem nó có NULL hay undefined hay không. Nếu phải giá trị của biến mới sẽ là chuỗi rỗng ngược lại sẽ bằng giá trị của dữ liệu đầu vào.
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
JavaScript có một cú pháp để giúp bạn làm điều tương tự với mã ngắn hơn
let second = first|| '';
Vòng for rút gọn
Với cách viết thông thường khi sử dụng vòng lặp for để duyệt trong JavaScript
for (var i = 0; i < testData.length; i++)
Thế nhưng với mục đích của bạn đơn giản chỉ là duyệt tất cả các phần tử của mảng thì có thể sử dụng các vòng lặp for rút gọn
for (let i in testData) // hoặc for (let i of testData) // hoặc [11, 24, 32].forEach(testData);
Gọi hàm tắt với ternary operator
Chúng ta cũng có thể sử dụng ternary operator để gọi hàm cách nhanh chóng hơn.t
// Longhand
function test1() {
console.log('test1');
};
function test2() {
console.log('test2');
};
// thông thường các bạn sẽ gọi như thế này
var test3 = 1;
if (test3 == 1) {
test1();
} else {
test2();
}
// Khi sử dụng ternary operator thì sẽ ngắn như thế này
(test3 === 1? test1:test2)();
Gọi hàm tắt với Switch case
Chúng ta có lưu điều kiện của switch case trong một object với key là giá trị case và value là hàm được gọi.
// Thông thường
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// Viết lại như thế này
var data = {
1: test1,
2: test2,
3: test
};
data[anything] && data[anything]();
Cú pháp return ngắn
Nếu bạn đang dùng arrow function, thì bạn có thể return trực tiếp mà không cần thông qua lệnh return
Longhand:
//thông thường
function getArea(diameter) {
return Math.PI * diameter
}
// cú pháp rút gọn
getArea = diameter => (
Math.PI * diameter;
)
Object.entries
Đây là một method giúp bạn chuyển đổi object sang array trong JavaScript
const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
[ 'test2', 'cde' ],
[ 'test3', 'efg' ]
]
**/
Object.values()
Cách hoạt động tương tự Object.entries(), nó trả về một một chứa các value trong object.
const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/
Repeat String
Để lặp đi lặp lại các ký tự giống nhau trong string, chúng ta có thể sử dụng for-loop và thêm các ký tự giống nhau vào string, thế nhưng chúng ta có cách ngắn hơn là sử dụng repeat.
//Thông thường
let test = '';
for(let i = 0; i < 5; i ++) {
test += 'test ';
}
console.log(str); // test test test test test
//repeate
'test '.repeat(5);
Numeric Separators
Đối với một số chứa nhiều ký tự các bạn có thể sử dụng ký tự _ để ngăn cách chúng ta từng phần nhỏ. Như vậy mã nguồn sẽ dễ đọc và phân tích một chữ số hơn.
let number = 98234567 //new syntax let number = 98_234_567