Ngày hôm nay mình sẽ giới thiệu một số thủ thuật phổ biến trong Javascript giúp bạn giải quyết các vấn đề hay gặp trong quá trình lập trình nhanh chóng và dễ hơn.
1) Đảo Ngược Chuỗi Trong Javascript (Reverse String)
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const stringReverse = str => str.split("").reverse().join("");
stringReverse('hello world'); /*dlrow olleh*/
2) Cuộn Trang Lên Đầu Trang (Scroll To Top Of Page)
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const scrollToTop = () => window.scrollTo(0, 0);
scrollToTop();
3) Xoá Sự Trùng Lặp Trong Mảng (Remove Duplicates Array)
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const removeDuplicate = (arr) => [...new Set(arr)];
removeDuplicate([1, 2, 3, 4, 4, 2, 1]); // [1, 2, 3, 4]4) Lấy Random Item(Phần tử ngẫu nhiên) Trong Array
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const randomItemArray = (arr) => arr[Math.floor(Math.random() * arr.length)];
randomItemArray(['a', 'b', 'c', 1, 2, 3]);5) Lấy Số Lớn Nhất (Max Number) Trong Array
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const maxNumber = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
maxNumber([4,9,5,7,2]) /* 9 */6) Kiểm Tra Number
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
function isNumber(num) {
return !isNaN(parseFloat(num)) && isFinite(num);
}
isNumber("Hello"); /*false*/
isNumber(123);/*true*/
7) Kiểm Tra Null
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const checkNull = val => val === undefined || val === null;
checkNull(123) /* false */
checkNull() /* true */
checkNull('hello') /* false */
8) Lấy Min Number (Số Nhỏ Nhất) Trong Array
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const minNumber = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
console.log(minNumber([3,5,9,7,1])) /*1*/
9) Lấy Average Number (Giá Trị Trung Bình) Trong Array
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const averageNumber = arr => arr.reduce((a, b) => a + b) / arr.length;
averageNumber([1, 2, 3, 4, 5]) /* 3 */
10) Kiểm Tra Loại (Type) Của Phần Tử
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
/*niemvuilaptrinh.com*/ const checkType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
checkType(true) /*boolean*/
checkType("hello World") /*string*/
checkType(123) /*number*/
11) Đếm Sự Xuất Hiện Phần Tử Trong Array
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1,2,2,4,5,6,2], 2) /* Số 2 xuất hiện 3 lần trong array */12) Lấy URL Hiện Tại Bằng Javascript
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const getCurrentURL = () => window.location.href;
getCurrentURL() /* https://www.niemvuilaptrinh.com */13) Viết Hoa Các Chữ Cái Trong Chuỗi
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const capitalizeString = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
capitalizeString('niem vui lap trinh'); /* 'Niem Vui Lap Trinh' */14) Chuyển Đổi RBG Sang Hex
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(52, 45, 125); /* Kết quả là: '#342d7d'*/15) Chuyển Đổi Number Sang Array
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const numberToArray = n => [...`${n}`].map(i => parseInt(i));
numberToArray(246) /*[2, 4, 6]*/
numberToArray(357911) /*[3, 5, 7, 9, 1, 1]*/
16) Lấy Nội Dung Từ HTML
Cách này sẽ rất hữu ích cho việc ngăn chặn người dùng có thể nhúng các thẻ HTML vào trang web khi điền các thông tin trong form đăng nhập, đăng ký, đăng nội dung...
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const getTextInHTML = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
getTextInHTML('<h2>Hello World</h2>'); /*'Hello World'*/17) Gán Nhiều Biến Cùng Một Lúc
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
var [a,b,c,d] = [1, 2, 'Hello', false];
console.log(a,b,c,d) /* 1 2 'Hello' false */18) Empty Array Trong Javascript
Còn dưới đây là đoạn mã nha:
let arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log(arr); /* Kết quả : [] */
19) Sao Chép (Copy) Object Trong JS
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const obj = {
name: "niem vui lap trinh",
age: 12
};
const copyObject = { ...obj };
console.log(copyObject); /* {name: 'niem vui lap trinh', age: 12}*/ 20) Kiểm Tra Số Chẵn Và Lẻ
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const isEven = num => num % 2 === 0;
console.log(isEven(1)); /*false*/
console.log(isEven(2)); /*true*/
21) Gộp Hai Hay Nhiều Mảng JS
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr = arr1.concat(arr2);
console.log(arr); /* [1, 2, 3, 4, 5, 6] */
22) Sao Chép Nội Dung Vào Clipboard
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const copyTextToClipboard = async (text) => {
await navigator.clipboard.writeText(text)
}23) Chọn Số Ngẫu Nhiên Trong Một Khoảng Giá Trị
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
var max = 10;
var min = 1;
var numRandom = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(numRandom)
24) Kiểm Tra Element Được Focus Hay Không
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const elementFocus = (el) => (el === document.activeElement);
elementIsInFocus(element);
/*Nếu true thì element đang được focus*/
/*Nếu false thì element không được focus*/
25) Kiểm Tra Thiết Bị Apple Bằng JS
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const isAppleDevice =
/Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
/*Nếu true thì người dùng đang sử dụng thiết bị Apple*/
/*Nếu false thì người dùng đang sử dụng thiết bị khác*/
26) Chuyển Đổi Chuỗi Sang Mảng
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
const str = "Hello";
const arr = [...str];
console.log(arr); /* ['H', 'e', 'l', 'l', 'o'] */27) Sử Dụng Arrow Function Trong JS
Còn dưới đây là đoạn mã nha:
/*niemvuilaptrinh.com*/
/*Cách Khai báo hàm thông thường*/
const sum = function(x, y) {
return x + y;
};
/*Cách khai báo hàm với arrow function*/
const sum = (x, y) => x + y;
28) Sử Dụng Short Hand Cho Câu Điều Kiện
Nếu bạn muốn tham khảo các bài tập web html css javascript thì truy cập đường dẫn bên dưới nha.
Các Bài Tập Web HTML CSS Javascript
Nếu bạn muốn tham khảo các project javascript dành cho beginner thì truy cập đường dẫn bên dưới nha.
Project Javascript Dành Cho Beginner
Nếu bạn muốn tham khảo các thủ thuật javascript hữu ích thì truy cập đường dẫn bên dưới nha.
Thủ Thuật Javascript Hữu Ích
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức javascript hữu ích dành cho phát triển website 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ẻ!
