Viết ít hơn và làm nhiều hơn với JavaScript

Hình ảnh của tác giả
Hình ảnh của tác giả

Với JavaScript, bạn có thể làm một việc theo nhiều cách khác nhau. Ngoài ra, JavaScript đang phát triển với việc phát hành mọi đặc tả ECMAScript mới, thêm các phương thức và toán tử hữu ích mới để làm cho code ngắn hơn và ở đâu đó dễ đọc hơn.

Sau khi đưa ra mười thủ thuật JavaScript, tôi đã quyết định chia sẻ thêm năm thủ thuật mà bạn có thể thực hiện với JavaScript.

1. Object.entries

Hầu hết các nhà phát triển sử dụng phương thức Object.keys để lặp qua một đối tượng. Phương thức này chỉ trả về một mảng các khóa đối tượng, không trả về giá trị. Chúng ta có thể sử dụng Object.entries để lấy cả khóa và giá trị.

const person = {
  name: 'John',
  age: 20
};

Object.keys(person); // ['name', 'age']
Object.entries(data); // [['name', 'John'], ['age', 20]]

Và để lặp lại một đối tượng, chúng ta có thể làm như sau:

Object.keys(person).forEach((key) => {
  console.log(`${key} is ${person[key]}`);
});

// using entries to get key and value both
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key} is ${value}`);
});

// expected output:
// name is John
// age is 20

Cả hai cách tiếp cận ở trên đều trả về cùng một kết quả nhưng Object.entries giúp bạn dễ dàng nhận được cặp khóa-giá trị.

2. Phương thức String ReplaceAll

Trong JavaScript, để thay thế tất cả các lần xuất hiện của một chuỗi bằng một chuỗi khác, chúng ta cần sử dụng Biểu thức chính quy như sau:

const str = 'Red-Green-Blue';

// replaces the first occurrence only
str.replace('-', ' '); // Red Green-Blue

// use RegEx to replace all occurrences
str.replace(/\-/g, ' '); // Red Green Blue

Nhưng trong ES12, một phương thức mới được thêm vào String.prototype có tên là ReplaceAll để thay thế tất cả các lần xuất hiện của một chuỗi bằng một giá trị chuỗi khác.

str.replaceAll('-', ' '); // Red Green Blue

3. Dấu phân cách số

Bạn có thể sử dụng dấu gạch dưới _ làm dấu phân tách số, giúp dễ dàng đếm số lượng các số không trong một số.Dấu phân tách gạch dưới cũng có thể được sử dụng với các số BigInt, như ví dụ sau:

// difficult to read
const billion = 1000000000;

// easier to read
const readableBillion = 1000_000_000;

console.log(readableBillion) // returns 1000000000

Dấu phân tách gạch dưới cũng có thể được sử dụng với các số BigInt, như ví dụ sau:

const trillion = 1000_000_000_000n;
console.log(trillion); // 1000000000000

Điều này thực sự làm cho con số dễ đọc hơn, phải không?

4. document.designMode

Liên quan đến JavaScript giao diện người dùng, chế độ thiết kế cho phép bạn chỉnh sửa bất kỳ nội dung nào trên trang. Chỉ cần mở bảng điều khiển của trình duyệt và nhập như sau:

document.designMode = 'on';
Try yourself

Try yourself

Điều này rất hữu ích cho các nhà thiết kế vì họ không phải thay đổi mọi thứ trong code mỗi lần thay đổi trên màn hình.

5. Toán tử chỉ định logic

Toán tử gán logic là sự kết hợp của các toán tử logic &&, ||, ?? Và toán tử gán =.

const a = 1;
const b = 2;

a &&= b;
console.log(a); // returns 2

// the above statement is equivalent to
a && (a = b);

// OR another approach
if (a) {
  a = b
}

Chúng tôi đang kiểm tra xem giá trị của a có phải là trung thực hay không, nếu đúng thì chúng tôi đang cập nhật giá trị của a. Điều tương tự cũng có thể được thực hiện với toán tử logic OR ||.

const a = null;
const b = 3;

a ||= b;
console.log(a); // returns 3

// the above statement is equivalent to
a || (a = b);

Và với toán tử Nullish Coalescing ??.

const a = null;
const b = 3;

a ??= b;
console.log(a); // returns 3

// the above statement is equivalent to
if (a === null || a === undefined) {
  a = b;
}

Các ?? Toán tử chỉ kiểm tra các giá trị null hoặc undefined.

Xin lưu ý rằng các toán tử gán logic được thêm vào ES12 / ES2021

Bạn có tìm thấy bất kỳ thủ thuật nào hữu ích không? Hãy cho tôi biết kinh nghiệm của bạn dưới phần bình luận nhé.

Cảm ơn các bạn vì đã đọc!

Bài viết gốc tại đây.

Hiện tại khóa học Web Frontend + React.js tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.

Chi tiết khóa học: https://frontend.techmaster.vn/.

Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).