Một số JavaScript One-Liner hữu ích

2022.12.19

suffix_ngothikimthoa WEBチーム

Chào các bạn, lại là mình, T, đến từ team Web đây!
Hôm nay mình xin giới thiệu đến các bạn một số JavaScript One-Liner giúp code ngắn gọn và clean hơn nhé! Mong sẽ hữu ích với các bạn.

javascript tips

1.Lấy phần người dùng chọn trên trang web

Nếu bạn muốn lấy phần text mà người dùng đã chọn hoặc highlight trên trang trang web thì đây sẽ là một one-liner hữu ích dành cho bạn.

One-liner này sử dụng method getSelection(). Method này sẽ trả về phần text mà người dùng đã sử dụng chuột để highlight. Một lưu ý là bạn cần sử dụng kèm theo method toString() để lấy phần text được chọn như một string.

Ví dụ:

const getSelectedTxt = () => window.getSelection().toString(); 
console.log(getSelectedTxt()); // "lorem ipsum dolor"

2.Trượt về phần top

Sử dụng method scrollTo(x, y) để trượt đến phần cụ thể bằng cách sử dụng tọa độ, với x là tọa độ trục nằm ngang, và y là tọa độ trục nằm dọc.

Để trượt về phần đầu trang, bạn chỉ cần set giá trị 0 cho cả hai trục.

Ví dụ:

const scrollToTop = () => window.scrollTo(0, 0);

Nếu muốn thêm hiệu ứng trượt mượt hơn, thì sử dụng như sau:

const Top = () => window.scrollTo({top: 0, behavior: 'smooth'});

3.Tính số lượng các ký tự cụ thể trong một chuỗi

Để tính số lượng các ký tự cụ thể trong một chuỗi ta có thể sử dụng method split() cùng với thuộc tính (property) length.

Ví dụ:

let str = "javascript"; 
const charCount = (str, char) => str.split(char).length - 1; 
charCount(str, "a"); //return 2 (có hai ký tự a trong chuỗi javascript)

4.Kiểm tra dark mode

Để kiểm tra dark mode có đang được kích hoạt hay không, chúng ta có thể sử dụng method matchMedia.

Ví dụ:

const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

Dòng code này sẽ trả về true nếu dark mode đang được kích hoạt, nếu không thì sẽ trả về false.

5.Kiểm tra băng thông internet

Băng thông internet về cơ bản là khối lượng data được truyền tải thông qua kết nối internet trong một khoảng thời gian cụ thể.

Chúng ta có thể sử dụng navigator object để dễ dàng kiểm tra băng thông mạng.

Ví dụ:

navigator.connection.downlink;

Output:
javascript navigator

Như các bạn thấy, chúng ta sử dụng thuộc tính (property) downlink của navigator object để kiểm tra. Thuộc tính (property) này sẽ trả về băng thông tính bằng megabits trên giây. Như trên, băng thông hiện tại của mình là 10 Bạn có thể thử trực tiếp trên browser console. Có thể bạn sẽ nhận được một giá trị khác với giá trị mình nhận được, tùy thuộc vào browser và tốc độ internet của bạn.

6.Làm phẳng một mảng (array)

Method flat() trong JavaScript sẽ cho phép bạn dễ dàng làm phẳng một mảng (array) chỉ với một dòng code.

Method này nhận một đối số kiểu number tự chọn: mức độ bạn muốn làm phẳng (1 lần, 2 lần, 3 lần ...).

Ví dụ:

let numberArray = [7, [55, 9], [7, 3], 2]; 
numberArray.flat(); //return [7, 55, 9, 7, 3, 2] 

let twoLevel = ["Hi", [6, [5, 9], "Java"], 99]; 
twoLevel.flat(2); //return ['Hi', 6, 5, 9, 'Java', 99]

7.Chuyển hướng url

Thỉnh thoảng, bạn muốn chuyển hướng người dùng đến một url khác khi họ thử đi đến một trang cụ thể trên trang web của bạn, dòng code JavaScript sau sẽ giúp bạn thực hiện điều đó:

const urlRedirect = url => location.href = url; 
urlRedirect("https://suffix.co.jp");

Bạn chỉ cần sử dụng thuộc tính href của location object và gán cho nó tham số url.

Hẹn gặp lại các bạn trong kỳ kế tiếp nhé!

Nguồn:
tham khảo

Blogブログ