Video học lập trình mỗi ngày

Một vài mẹo thực tế để viết JavaScript trong ngày lễ độc thân cho mấy Chế DEV Học lập trình javascript, ai đã theo thì cũng hiểu, những tính năng được cập nhật liên tục. Thay vì bạn cứ sử dụng những code cũ đã tồn tại nhiều năm, thì bạn có thể tìm thấy những phương án hay hơn trong bài viết về những mẹo này. Có thể ngay lúc này bạn không cần, nhưng đến lúc bạn cũng sẽ tìm, vì vậy sao không thử xem những mẹo javascript là gì?

1 - Che một phần ký tự của một Chuỗi như password hay số điện thoại

Trong thực tế có nhiều ứng dụng vẫn hay thưởng sử dụng nhưng chiêu thức này nhằm giúp cho người dùng tương tác nhiều ví dụ như Chợ Tốt chẳng hạn, họ chỉ cho lòi ra mấy số cuối của số điện thoại mà thôi chỉ khi click vào thì full. 

Ví dụ: 0933 33 33 33 -> *******333 

Thay vì cách xưa hay làm for rồi replace (À chuẩn bị ra replace all rồi đấy) các kiểu thì hãy sử dụng mẹo này cho thuận tiện hơn.

const password = "0933333333";
console.log(password.substr(-3).padStart(password.length, "*"))
//*******333

2 - Tạo một list trong khoảng thời gian xác định sử dụng JavaScript

Có nhiều trường hợp như tạo năm sinh từ năm này đến năm khác. Thì thay vì làm như những cách cũ là for cho đến chết hoặc có thể dùng Array.from() thì nay sẽ có một mẹo giúp bạn có thể triển khai code của mình nhanh hơn nhiều. 

Ví dụ: 1982 -> 2020

let start = 1982;
let end = 2020;
[...new Array(end + 1).keys()].slice(start);
// [ 1982, 1983, ..., 2020]

3 - Làm phẳng mảng đa chiều

Trong ES6 đã giới thiệu cho chúng ta một method mà có lẽ nhiều bạn không biết cho nên ít sử dụng đó là flat(). Ngoài ra trước đây, tips JavaScript đã có giới thiệu 4 cách làm phẳng một mảng. Ở đó bạn có thể tìm thấy nhiều ví dụ hơn. Ví dụ:

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity)) 
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

4 - Ngăn chặn Cannot read property xxxx of undefined

Lỗi "Cannot read property 'name' of undefined" thì quá quen thuộc với anh em mình rồi. Vì lỗi phổ biến nên nhiều anh em có nhiều cách check khác nhau như sau: Ví dụ:

const found = [{ name: "anonystick.com" }].find(i => i.name === 'medium.com')
console.log(found.name);
//TypeError: Cannot read property 'name' of undefined

Fix để tránh được lỗi này:

const found = [{ name: "anonystick.com" }].find(i => i.name === 'medium.com') || {};
console.log(found.name);
// undefined

Còn cách giới thiệu cho bạn đó chính là sử dụng tính năng của ES11/ES2020 để fix nhanh nhất.

const found = [{ name: "anonystick.com" }].find(i => i.name === 'medium.com')
console.log(found?.name); // sử dụng toán tử ?.
// undefined

5 - Hoán đổi giá trị các biến như trò tung hứng

Xem một đoạn code dứoi đây, bạn có nhớ về những năm nào đó bạn đã từng??

let a = "hello";
let b = "anonystick.com";

// Lỗi ❌
a = b
b = a
// { a: 'anonystick.com', b: 'anonystick.com' }
 
// Good ✅
[a, b] = [b, a];
// { a: 'anonystick.com', b: 'hello' }

Lời cuối

Bài viết không quá cao siêu hay đòi hỏi bạn phải suy nghĩ và tập trung. Nhưng đôi khi bản thân mình sống chậm lại để lướt qua vào mẹo cơ bản trong lập trình javascript. Nhìn chung xu hướng cập nhật những tính năng mới cũng đã phổ biến thông qua những blog học lập trình javascript như anonystick.com. Thì bạn cũng được update dần dần mỗi ngày. Từng đó là đủ Thanks!