Trong bài viết này, mình sẽ chia sẻ với bạn một số cách sử dụng JS như chuyên gia, sử dụng đúng lúc, đúng cách và hiệu quả.
#1: Sử dụng includes để tránh kiểm tra nhiều lần
Bạn có thể dễ dàng thay thế cách này:
if (value === 'a' || value === 'b' || value === 'c') {... }
Bằng phương thức includes
if (['a', 'b', 'c'].includes(value)) {... }
Cách viết này clean code hơn và tránh nhiều điều kiện trong if.
#2: Sử dụng !! để chuyển đổi bất kỳ biến nào thành boolean
Toán tử ! (NOT) có thể được sử dụng hai lần !! để chuyển đổi bất kỳ biến nào thành boolean (như hàm Boolean), rất tiện lợi khi bạn cần kiểm tra một số giá trị trước khi xử lý nó.
const toto = null
!!toto // false
Boolean(toto) // false
if (!!toto) { } // toto không null hoặc undefined
#3: Sử dụng Optional Chaining
Trong javascript, bạn sẽ cần phải thường xuyên kiểm tra xem một số thuộc tính của đối tượng của bạn có tồn tại hay không trước khi xử lý nó. Vì thế, rất nhiều lập trình viên sử dụng cách này:
const toto = { a: { b: { c: 5 } } }
if (!!toto.a && !!toto.a.b && !!toto.a.b.c) {... } // toto.a.b.c tồn tại
Tuy nhiên, để dễ dàng hơn, bạn có thể sử dụng Optional Chaining để tránh sử dụng nhiều bộ kiểm tra như trên.
const toto = { a: { b: { c: 5 } } }
if (!!toto.a?.b?.c) {... } // toto.a.b.c tồn tại
// Nếu key không tồn tại, nó trả về undefined
const test = toto.a?.b?.c?.d // undefined
#4: Tránh sử dụng else khi trả về giá trị trong if
Mình đã nhìn thấy nhiều người làm như thế này:
if (...) {
return 'toto'
} else {
return 'tutu'
}
Đừng làm như vậy, if trả về giá trị, bạn chỉ có thể thay thế code bên trên như thế này:
if (...) {
return 'toto'
}
return 'tutu'
#5: Tránh sử dụng ForEach. Thay vào đó, sử dụng filter(), map(), reduce(), every() và some()
Là người mới bắt đầu tìm hiểu về JS, chúng ta sử dụng rất nhiều hàm forEach, nhưng JS cung cấp cho bạn rất nhiều lựa chọn thay thế, và hơn nữa hàm của chúng là Functional Programming (lập trình hàm).
filter()
Như cái tên của nó, filter() cho phép chúng ta lọc một số giá trị trong mảng tùy thuộc vào điều kiện cho trước.
const toto = [1, 2, 3, 4]
// Hàm kiểm tra chẵn lẻ
const isEventValue = (x) => x % 2 == 0;
// Lọc ra các giá trị chẵn
const evenValue = toto.filter(isEventValue);
// In ra kết quả
console.log(evenValue);
Kết quả ta được:
[2, 4]
Ở đây, mình sử dụng Arrow Function (một tính năng rất hay trong phiên bản ES6, nếu bạn chưa biết thì xem ngay ES6 JavaScript)
map()
Sử dụng phương thức map() khi bạn cần biến đổi tất cả các phần tử trong mảng của mình thành một phần tử khác.
Ví dụ: Biến đổi tất cả các phần tử của mảng bằng cách nhân chúng với 2
const toto = [1, 2, 3, 4];
// Hàm nhân với 2
const x2Value = (x) => x * 2;
// Biến đổi mảng với hàm x2
const totox2 = toto.map(x2Value);
// In ra kết quả
console.log(totox2);
Kết quả ta được:
[2, 4, 6, 8]
reduce()
Phương thức reduce() là một phương thức khá khó hiểu trong JS nếu bạn mới bắt đầu tìm hiểu đến nó.
Nhưng nếu bạn có một mảng và bạn muốn từ mảng này lấy về giá trị duy nhất thì reduce() là lựa chọn hợp lý.
Để tìm hiểu về reduce(), chúng ta cùng thực hiện ví dụ cộng tổng các phần tử trong một mảng.
Để làm được điều này, reduce() cần nhận vào một hàm, trong đó có 2 tham số.
-
Tham số thứ nhất là bộ tích lũy (accumulator)
-
Tham số thứ hai là đại diện để lặp qua từng phần tử trong mảng
Chương trình này bạn có thể hiểu như sau: Lặp qua từng phần tử trong mảng, cộng chúng vào bộ tích lũy và cuối cùng trả về giá trị duy nhất.
const toto = [1, 2, 3, 4]
// Hàm tính tổng các phần tử
// Lặp qua các phần tử, cộng chúng vào bộ tích lũy
const sum = (accumulator, x) => accumulator += x;
// Tính tổng các phần tử trong mảng
const sumToto = toto.reduce(sum);
// In ra kết quả
console.log(sumToto);
Kết quả:
10
some() và every()
Giống như tên của nó, đây là phương thức kiểm tra xem ít nhất một (some) hoặc tất cả (every) các phần tử thỏa mãn điều kiện nào đó.
-
some() sẽ kiểm tra tất cả các phần tử và trả về true nếu một trong số đó phù hợp với điều kiện. Nếu tất cả không có cái nào phù hợp thì sẽ trả về false
-
every() sẽ kiểm tra tất cả các phần tử và trả về true nếu tất cả các phần tử phù hợp với điều kiện. Ngược lại thì trả về false.
Ví dụ: Kiểm tra xem tất cả các phần tử trong mảng có phải là chẵn hay không
const toto = [2, 4, 6, 8];
// Hàm kiểm tra số chẵn
const isEventValue = x => x % 2 === 0;
// Kiểm tra tất cả các phần tử trong mảng
// xem có chẵn hay không
const evenArray = toto.every(isEventValue);
// In ra kết quả
console.log(evenArray);
Kết quả:
true
Ví dụ: Kiểm tra xem ít nhất một phần tử trong mảng là chẵn
const toto = [2, 4, 5, 7, 9];
// Hàm kiểm tra số chẵn
const isEventValue = x => x % 2 === 0;
// Kiểm tra xem ít nhất
// một phần tử là chẵn
const hasEventValue = toto.some(isEventValue);
// In ra kết quả
console.log(hasEventValue);
Kết quả:
true
#6: Destructuring Assignment
Nếu bạn đang làm việc với bất kỳ Framework phổ biến nào (như React / Angular / Vue), có nhiều khả năng bạn sẽ sử dụng mảng hoặc dữ liệu dưới dạng các object literals để chuyển thông tin giữa các component và API. Khi đối tượng dữ liệu tiếp cận một thành phần, bạn sẽ cần giải nén nó.
Cách thông thường:
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;
Cách viết ngắn gọn hơn:
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;
Hoặc bạn có thể chỉ định tên biến của riêng mình:
const { store, form, loading, errors, entity:contact } = this.props;
> Tham khảo ngay: KHÓA HỌC FRONT END (Với React JS) được NIIT - ICT Hà Nội xây dựng bài bản, dựa trên quy trình làm việc thực tế của Front end DEV hiện đại.
#6: Sử dụng toán tử Spread để nối mảng, sao chép mảng
Toán tử spread, được giới thiệu trong ES6, nó có thể được sử dụng làm cho code JavaScript hiệu quả hơn và thú vị hơn.
Nó có thể được sử dụng để thay thế một số hàm mảng nhất định. Cú pháp spread rất đơn giản, chỉ là 3 dấu chấm ...
Bình thường, bạn sẽ làm thế này khi muốn nối mảng hoặc sao chép mảng:
// Nối mảng
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// Sao chép mảng
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
Nhưng sử dụng toán tử spread bạn có thể làm cho cod dễ đọc hơn:
// Nối mảng
const odd = [1, 3, 5];
const nums = [2, 4, 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// Sao chép mảng
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
console.log(arr2); // [1, 2, 3, 4]
Thậm chí, với bạn có thể chèn mảng tùy ý như sau:
const odd = [1, 3, 5];
const nums = [2, ...odd, 4, 6];
console.log(nums); // [2, 1, 3, 5, 4, 6]
Bạn cũng có thể kết hợp toán tử spread với ES6 destructuring:
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }
#7: Viết tắt tham số bắt buộc
Theo mặc định, JavaScript sẽ đặt các tham số hàm thành undefined nếu chúng không được truyền một giá trị. Một số ngôn ngữ khác sẽ đưa ra cảnh báo hoặc lỗi.
Để thực thi việc gán tham số, bạn có thể sử dụng câu lệnh if để đưa ra lỗi nếu undefined hoặc bạn có thể tận dụng cách viết tắt tham số bắt buộc.
Bình thường bạn sẽ viết như thế này:
function foo(bar) {
if (bar === undefined) {
throw new Error("Thiếu tham số");
}
return bar;
}
Nhưng bạn có thể sử dụng cách này:
mandatory = () => {
throw new Error("Thiếu tham số");
}
foo = (bar = mandatory()) => {
return bar;
}
#8: Kiểm tra sự hiện hiện của một biến
Bạn thường sẽ cần kiểm tra sự hiện diện của một biến trước khi làm việc với nó.
Có thể bạn đã từng làm như thế này:
var myVar = 10;
if (typeof myVar !== "undefined" && myVar !== "" && myVar !== null &&
myVar !== 0 && myVar !== false) {
console.log("Biến không phải: undefined, empty, null hay false");
}
Nhưng, bản thân câu lệnh if (myVar) đã làm nhiều thứ hơn bạn nghĩ.
Bạn hoàn toàn có thể thay thế đoạn code trên như sau:
var myVar = 10;
if (myVar) {
console.log("Biến không phải: undefined, empty, null hay false");
}
#9: Giá trị mặc định
Khi gán một giá trị biến cho một biến khác, bạn có thể muốn đảm bảo rằng biến nguồn không phải null, empty hoặc undefined.
Bạn có thể viết câu lệnh if dài với nhiều điều kiện như thế này.
if (var1 !== null || var1 !== undefined || var1 !== '') {
let var2 = var1;
}
Nhưng bạn có thể chỉ cần làm như thế này:
const var2 = var1 || "new";
Đơn giản là, nếu biến var1 không thực sự hiện diện thì gán nó bằng một giá trị mặc định, xác định. Tránh việc tham chiếu đến một biến rỗng, không xác định hoặc là null.
Tổng kết
Như vậy, trong bài viết này mình đã chia sẻ một số cách sử dụng JavaScript chuyên nghiệp hơn và hiệu quả hơn. Đại đa số cách trong này là tận dụng những quy tắc cốt lõi của JavaScript cũng như các tính năng trong các phiên bản mới.
Bản chất của phiên bản JS mới là tạo ra các tính năng giúp cho quá trình lập trình trở nên chuyên nghiệp hơn, tổ chức tốt hơn và hiệu quả lâu dài.
Nếu bạn còn chưa biết về các phiên bản từ ES6 thì cập nhật ngay nhé.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 0243.557.4074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php #icthanoi