1. Kiểm tra chẵn lẻ
Bình thường mọi người hay check chẵn lẻ bằng cách này đúng không
const number = 123;
if (number % 2) console.log('even')
else console.log('odd')Còn một cách khác để kiểm tra số đó là chẵn hay lẻ
const number = 232;
if (number & 1) console.log("odd");
else console.log("even");2. Sử dụng object thay vì if-else, switch-case
Thay vì
const day = new Date().getDay();
// switch case
switch (day) {
case 1:
console.log("Monday");
break
case 2:
console.log("Tuesday");
break
case 3:
console.log("Wednesday");
break
// other days
default:
console.log("Waiting For The Weekend.!");
}
// if else
if (day === 1) console.log("Monday")
else if (day === 2) console.log("Tuesday")
else if (day === 3) console.log("Wednesday")
// other days
else console.log("Waiting For The Weekend.!")thì
const date = new Date().getDay();
const day = {
0: "Waiting For The Weekend.!",
1: 'Monday',
2: 'Tuesday',
3: 'Wednesday',
// other days
}
console.log(day[date]);3. Function IIFE (Immediately Invoked Function Expression)
IIFE (Biểu thức hàm được gọi ngay lập tức) là một hàm JavaScript chạy ngay khi được xác định.
Nó là một design pattern được gọi là Self-Executing Anonymous Function gồm 2 phần chính:
– Đầu tiên là hàm ẩn danh với phạm vi từ vựng được bao bọc trong Grouping Operator () . Điều này ngăn cản việc truy cập các biến trong thành ngữ IIFE cũng như làm ảnh hưởng dến phạm vi global.
– Phần thứ hai tạo biểu thức hàm được gọi ngay lập tức () qua đó công cụ JavaScript sẽ diễn giải hàm trực tiếp.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
const userName = "Đạt";
((name) => {
alert("My name is " + name);
})(userName);
</script>
4. Cache array.length trong loop
Tip này rất đơn giản và ảnh hưởng nhiều hơn đến hiệu suất khi xử lý các array lớn trong loop. Căn bản là, hầu như mọi người đều viết cái forto đồng bộ này dưới dạng một array:
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}Nếu bạn làm việc với các array nhỏ hơn – không sao cả, nhưng nếu bạn xử lý các array lớn hơn, code này sẽ tính toán lại size của array trong mỗi vòng lặp của loop và sẽ gây ra gián đoạn nhỏ. Để tránh việc này xảy ra, bạn nên cache array.length trong một variable để dùng thay vì đụng tới array.length mọi lúc trong loop:
var length = array.length;
for (let i = 0; i < length; i++) {
console.log(array[i]);
}Để làm nó nhỏ lại, hãy viết code sau:
for (let i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}5. Lấy item cuối trong array
Array.prototype.slice(begin, end) có thể cắt các array khi bạn đặt các argument begin và end. Nhưng nếu bạn không cài end argument, function này sẽ tự động gán giá trị lớn nhất cho array. Tôi nghĩ không nhiều người biết rằng function này có thể nhận giá trị âm, và nếu bạn set một số âm vào begin argument bạn sẽ nhận các element cuối cùng trong array:
let array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]6. Cắt array
Phương pháp này có thể khóa size của array, rất hữu ích để xóa các elemnt của array dựa trên số element bạn muốn set. Ví dụ, nếu bạn có một array khoảng 10 element, nhưng bạn chỉ muốn lấy 5 element đầu tiên, bạn có thể cắt array, làm nó nhỏ lại bằng cách set array.length = 5. Xem ví dụ sau:
let array = [1, 2, 3, 4, 5, 6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]7. Gộp các array
Nếu bạn cần gộp 2 array Bạn có thể dùng function Array.concat():
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];Tuy nhiên, function này không phù hợp để gộp các array lớn vì nó sẽ tiêu tốn nhiều dung lượng bằng cách tạo ra array mới. Trong trường hợp này, bạn có thể dùng Array.push.apply(arr1, arr2) để tạo array mới, nó sẽ gộp array thứ hai vào cái đầu tiên để giảm tiêu hao bộ nhớ:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array1.push.apply(array1, array2)
console.log(array1); // [1,2,3,4,5,6];8. Sử dụng SET để nhận các giá trị duy nhất
const arr = [10,10,20,20,30];
const new_arr = [...new Set(arr)];
console.log(new_arr); // [10, 20, 30]9. Clone an Object
Trong một dự án của tôi, tôi đã dính trường hợp gán giá trị một biến bằng một biến đã cho. Khi thay đổi biến đó nó làm thay đổi cả giá trị của biến đã cho kia. Tôi hiểu vì sao lỗi nhưng đã không biết cách fix cũng như không biết keyword của nó là gì để search. Có phải các bạn thường làm như này không:
let obj1 = { a: 1, b: 2 };
let obj2 = obj1; // obj2 = { a: 1, b: 2 }
obj2.a = 3; // Gán lại giá trị a của obj2 = 3
console.log(obj1); // { a: 3, b: 2 } => Giá trị a của obj1 cũng thay đổi theo
console.log(obj2); // { a: 3, b: 2 }Dưới đây là một số cách fix nhé:
Cách 1: Sử dụng Spread operator {...} hoặc Object.assign(). Issue: Nested objects vẫn có vấn đề trên.
let obj1 = { a: 1, b: 2, c: { nested: 3 } };
let obj2 = { ...obj1 }; // obj2 = { a: 1, b: 2, c: { nested: 3 } }
let obj3 = Object.assign({}, obj1); // obj3 = { a: 1, b: 2, c: { nested: 3 } }
obj2.b = 3;
obj2.c.nested = 4;
console.log(obj1); // { a: 1, b: 2, c: { nested: 4 } } nested vẫn bị thay đổi này 🙂
console.log(obj2); // { a: 1, b: 3, c: { nested: 4 } } nested vẫn bị thay đổi này 🙂
console.log(obj3); // { a: 1, b: 2, c: { nested: 4 } } nested vẫn bị thay đổi này 🙂Cách 2 (Recommended): Sử dụng JSON.stringify() & JSON.parse().
let obj1 = { a: 1, b: 2, c: { nested: 3 } };
let obj2 = JSON.parse(JSON.stringify(obj1)); // obj2 = { a: 1, b: 2, c: { nested: 3 } }
obj2.b = 3;
obj2.c.nested = 4;
console.log(obj1); // { a: 1, b: 2, c: { nested: 3 } } yêu chưa 😉😘
console.log(obj2); // { a: 1, b: 3, c: { nested: 4 } }10. Lấy danh sách các khóa và giá trị từ một object
Trong quá trình phát triển, có những lúc chúng ta chỉ cần lấy key hoặc chỉ value từ một đối tượng. Cả hai hàm dựng sẵn sau đây đều khá đơn giản:
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
//get keys
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//get values
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]Kết luận:
Ngôn ngữ nào cũng sẽ có rất nhiều tips & tricks không riêng gì javascript. Trên đây là 10 tips & tricks hay về javascript. Mong những tips & tricks trên sẽ giúp ích được các bạn trong quá trình phát triển code của mình. Các bạn hãy comment một số tips & tricks khác để chia sẻ cho mọi người nhé. Ủng hộ tôi bằng một lượt comment để ra tiếp phần 2 trong thời gian sắp tới nhé(nhưng chưa biết là bao giờ)
3 comments
Goods. Đã đẹp zai lại còn trick hay 😛
Good! Not Goods 😀
sời