Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Một Số Thủ Thuật Javascript Mà Bạn Nên Biết

Một Số Thủ Thuật Javascript Mà Bạn Nên Biết


Ngày 14 Tháng 7 Năm 2020

Những Kỹ Thuật Viết Mã Dành Cho Người Mới Bắt Đầu Javascript (2020)

Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu những kỹ thuật viết mã tối ưu trong Javascript được đúc kết trong quá trình làm việc và học tập của các bạn lập trình viên trên thế giới. Và bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Kỹ thuật rút ngắn vòng lặp trong Javascript

Thông thường khi chúng ta muốn sử dụng vòng lặp thì sẽ thực hiện như sau:

 var lopHoc = ["Nam", "Như", "An"];
for (let i = 0; i < lopHoc.length; i++)

Và đây là cách bạn có thể rút gắn vòng lặp như sau:

 for (let hocSinh of lopHoc)

Nếu bạn muốn truy cập vị trí index thông qua vòng lặp thì có thể thực hiện như sau:

for (let index in lopHoc)

Kỹ thuật rút ngắn câu điều kiện trong Javascript

Thông thường khi chúng ta muốn viết câu điều kiện trong javascript thì hay sử dụng câu lệnh if...else như ví dụ sau đây:

 const a = 6;
 let ketqua ;
 if (a > 10) {
     ketqua = "Giá trị lớn hơn 10";
 } else {
     ketqua =  "Giá trị nhỏ hơn 10";
 }

Và dưới đây là cách chúng ta có thể viết rút ngắn câu điều kiện phía trên:

 const ketQua = a > 10 ? "Giá trị lớn hơn 10" : "Giá trị nhỏ hơn 10";

Ngoài ra bạn cũng có thể thêm các điều kiện vào trong cách rút gọn như ở ví dụ dưới đây:

 const ketQua = a > 10 ? "Giá trị lớn hơn 10" : x < 5 ? "Giá trị nhỏ hơn 5" : "Giá trị trong khoảng từ 5 đến 10";

Kỹ thuật rút ngắn kiểm tra điều kiện boolean Javascript

Thông thường khi kiểm tra một điều kiện boolean thì chúng ta sẽ làm như sau:

 if (hocJavascript === true)

Và đây là cách rút ngọn của ví dụ trên nhé:

 if (hocJavascript)

Còn đây là ví dụ chúng ta xét với trường hợp false nha:

 let a;
if(a !== true){
   /*Đoạn Mã*/
}

Cách rút gọn ví dụ trên:

 let a;
if(!a){
   /*Đoạn Mã*/
}

Kỹ Thuật Rút Ngắn Với Arrow Function

Đầu tiên là chúng ta sẽ đi vào viết một hàm theo cách thông thường:

 function xinChao(ten) {
   console.log("Xin Chào Bạn " + ten);
}

Cách rút gọn:

 xinChao = ten => console.log("Xin Chào Bạn " + ten)

Ví dụ 2 là cách chúng ta sử dụng với lệnh forEach:

 danhSach.forEach(function(phanTu){
  console.log(phanTu);
});

Cách rút gọn:

 danhSach.forEach(phanTu => console.log(phanTu));

Kỹ Thuật Rút Ngắn Lũy Thừa Trong Javascript

Thông thường khi bạn muốn thực hiện hành động lũy thữa một số thì ta sẽ sử dụng Math.pow như ví dụ sau đây:

 Math.pow(2,2); /*Kết quả là 4*/
Math.pow(2,3); /*Kết quả là 8*/

Và đây là cách rút gọn với việc sử dụng **:

 2**2 /*Kết quả là 4*/
2**3 /*Kết quả là 8*/

Kỹ Thuật chuyển đổi từ kiểu dữ liệu chuỗi sang số

Khi lập trình với javascript, nếu chúng ta muốn chuyển đổi kiểu dữ liệu từ chuỗi sang số thì sẽ dùng hai lệnh là parseInt (Kiểu số nguyên) và parseFloat (Kiểu số thập phân) như ví dụ sau:

 const so1 = parseInt("5");
const so2 = parseInt("5.5");

Cách rút gọn (Bạn sẽ thêm dấu cộng phía trước chuỗi chứa số):

 const so1 = +"5";
const so2 = +"5.5";

Kỹ thuật rút ngắn khi thực hiện return trong hàm

Đối với một hàm thông thường chúng ta sẽ sử dụng return để trả về một kết quả như sau đây:

 function phepCong(a, b) {
   return a + b;
}

Cách viết rút gọn:

 const phepCong = (a, b) => (a + b);

Kỹ thuật rút ngắn số mũ thập phân

Đoạn code dưới đây sẽ giúp bạn giảm được cách phải viết nhiều số 0 cho một số. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 /*Cách viết rút gọn của các số*/
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
1e6 === 1000000;

Sử dụng Spread Operator

Khi bạn muốn nối mảng trong javascript thì sẽ sử dụng concat và sao chép một mảng sẽ sử dụng slice như ví dụ sau đây:

 /*thực hiện nối mảng*/ 
var mang1 = [4,5,6];
var mang2 = [1, 2, 3].concat(mang1); /*[1, 2, 3, 4, 5, 6]*/

/*Thực hiện sao chép mảng*/
var mang1 = [1, 2, 3];
var mang2 = mang1.slice(); /*[1, 2, 3]*/

Còn đây là cách rút gọn khi ta sử dụng spread operator

/*thực hiện nối mảng*/ 
var mang1 = [4,5,6];
var mang2 = [1, 2, 3, ...mang1]; /*[1, 2, 3, 4, 5, 6]*/

/*Thực hiện sao chép mảng*/
var mang1 = [1, 2, 3];
var mang2 = [...mang1]; /*[1, 2, 3]*/

Kỹ thuật khai báo biến

Thông thường chúng ta sẽ khai báo biến như sau:

 let a;
let b;
let c = 4;

Cách viết rút gọn:

 let a, b, c = 4;

Sử dụng Object.assign

Khi bạn muốn gộp hai hay nhiều đối tượng và trong một object thì ta có thể sử dụng Object.assign như ví dụ sau đây nhé

 let ho = {ho : "Nguyễn"};
let ten = {ten : "An"};
/*Thực hiện gộp hai đối tượng*/
let hoTen = Object.assign(ho, ten); /*{ho: "Nguyễn", ten: "An"}*/

Sử dụng Object.entries()

Object.entries() cho phép bạn có thể chuyển đổi các đối tượng thành các cặp giá trị mảng:

 let doiTuong = {ho: "Nguyễn", ten: "An"};
let mang = Object.entries(doiTuong); /*[["ho", "Nguyễn"], ["ten", "An"]]*/

Cách chuyển đổi số sang chuỗi

Đoạn code dưới đây giúp chúng ta có thể chuyển đổi các kiểu dữ liệu trong Javascript sang dạng chuỗi:

 let so = 5;
let chuoi = "" + so; /*(typeof chuoi) : string*/

Cách tự động gọi hàm

Sau đây là đoạn mã giúp bạn có thể tự động gọi hàm trong Javascript:

(function(){
   /*Đoạn mã thực thi*/
})();

Kỹ thuật rút ngắn lấy ký tự trong chuỗi

Thông thường khi chúng ta muốn lấy ký tự trong chuỗi thì sẽ sử dụng charAt() như ví dụ sau đây:

 'chuỗi'.charAt(1) /*h*/

Cách rút gọn:

 'chuỗi'[1] /*h*/

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kỹ thuật viết mã Javascript hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!