Một số JavaScript Snippet hữu dụng - Phần 3

Tiếp tục sersie về JS snippets. Cùng tìm hiểu thôi! Phần 2 mọi người có thể xem ở đây nhé!

42. isAnagram

Kiểm tra một chuỗi cụ thể có phải là một ký tự đảo ngữ với một chuỗi khác hay không.

const isAnagram = (str1, str2) => {
  const normalize = str =>
    str
      .toLowerCase()
      .replace(/[^a-z0-9]/gi, '')
      .split('')
      .sort()
      .join('');
      
  return normalize(str1) === normalize(str2);
};

isAnagram('sport', 'opstr'); // true
isAnagram('sport', 'opstra'); // flase

43. isBrowser

Kiểm tra môi trường đang chạy hiện tại có phải là trình duyệt hay không. Tránh lỗi khi chạy front-end trên server (Node).

const isBrowser = () => ![typeof window, typeof document].includes('undefined');

isBrowser(); // true (browser)
isBrowser(); // false (Node)

44. isBrowserTabFocused

Kiểm tra tab của trình duyệt có đang được focus không.

const isBrowserTabFocused = () => !document.hidden;

isBrowserTabFocused(); // true

45. isLowerCase

Kiểm tra chuỗi có phải chữ thường không

const isLowerCase = str => str === str.toLowerCase();

isLowerCase('abc'); // true
isLowerCase('a1@$'); // true
isLowerCase('aA@123'); // false

46. isUpperCase

Kiểm tra chuỗi có phải chữ in hoa không

const isUpperCase = str => str === str.toUpperCase();

isUpperCase('ABC'); // true
isLowerCase('A1@$'); // true
isLowerCase('aA@123'); // false

47. isNil

kiểm tra một giá trị là null hay undefined.

const isNil = val => val === undefined || val === null;

isNil(null); // true
isNil(undefined); // true
isNil(1); // false

48. maxN

Return n phần tử lớn nhất từ một mảng. Nếu n lớn hơn hoặc bằng độ dài của mảng, nó sẽ trả về danh sách ban đầu được sắp xếp theo thứ tự giảm dần.

const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);

maxN([1, 2, 3]); // [3]
maxN([1, 2, 3], 2); // [3,2]     

49. minN

Return n phần tử nhỏ nhất từ một mảng. Nếu n lớn hơn hoặc bằng độ dài của mảng, nó sẽ trả về danh sách ban đầu được sắp xếp theo thứ tự tăng dần.

const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);

maxN([1, 2, 3]); // [1]
maxN([1, 2, 3], 2); // [1,2]     

50. radsToDegrees

Convert từ radian sang độ.

const radsToDegrees = rad => (rad * 180.0) / Math.PI;

radsToDegrees(Math.PI / 2); // 90

51. Random mã màu Hexadecimal

const randomHexColorCode = () => {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  
  return '#' + n.slice(0, 6);
};

randomHexColorCode(); // #3c3834

52. randomIntegerInRange

Random một số nguyên ngẫu nhiên trong một phạm vi được chỉ định.

const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

randomIntegerInRange(0, 5); // 4

53. randomNumberInRange

Random một số ngẫu nhiên trong một phạm vi được chỉ định.

const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;

randomNumberInRange(2, 10); // 8.678929973625086

54. scrollToTop

cuộn lên đầu trang hiện tại.

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop();

55. setStyle

Set thuộc tính css

cconst setStyle = (el, ruleName, val) => (el.style[ruleName] = val);

setStyle(document.querySelector('p'), 'font-size', '20px');
// Thẻ <p> đầu tiên sẽ có font-size là 20px

56. clone

Clone 1 object

const clone = obj => Object.assign({}, obj);

const a = { x: 'a', y: 1 };
const b = clone(a);
console.log(b); // { x: 'a', y: 1 }

57. sleep

Delay thực thi một hàm không đồng bộ bằng cách đưa vào trạng thái ngủ.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function sleepyWork() {
  console.log("I'm gonna sleep for 1 second.");
  await sleep(1000);
  console.log('I woke up after 1 second.');
}

58. smoothScroll

Cuộn đến phần tử được gọi

const smoothScroll = element => document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });

smoothScroll('#myId'); // scroll đến id là myId
smoothScroll('.myClass'); // scroll đến phần tử đầu tiên có class là myClass

59. sortCharactersInString

Sắp xếp các ký tự trong một chuỗi theo thứ tự bảng chữ cái.

const sortCharactersInString = str => [...str].sort((a, b) => a.localeCompare(b)).join('');

sortCharactersInString('protocol'); // 'cloooprt'

60. stripHTMLTags

Xóa các thẻ html trong chuỗi

const stripHTMLTags = str => str.replace(/<[^>]*>/g, '');

stripHTMLTags('<p><em>viblo</em> <strong>may</strong> <i>fest</i></p>'); // 'viblo may fest'

61. splitLines

Tách một chuỗi nhiều dòng thành một mảng các dòng.

const splitLines = str => str.split(/\r?\n/);

splitLines('This\nis viblo\nmay\nfest.\n'); // ['This', 'is viblo', 'may', 'fest.' , '']

62. stripHTMLTags

xóa các thẻ HTML/XML ra khỏi một chuỗi.

const stripHTMLTags = str => str.replace(/<[^>]*>/g, '');

stripHTMLTags('<p><em>Viblo</em> <strong>May Fest</strong></p>'); // 'Viblo May Fest'

63. sum

Tính tổng của hai hoặc nhiều số hoặc mảng.

const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);

sum(1, 2, 3, 4); // 10
sum(...[1, 2, 3, 4]); // 10

64. take

Retrun một mảng với n các phần tử bị loại bỏ từ mảng ban đầu.

const take = (arr, n = 1) => arr.slice(0, n);

take([1, 2, 3, 4], 2); // [1, 2]
take([1, 2, 3, 4], 0) // []
take([1, 2, 3, 4], 4) // [1, 2, 3, 4]

65. timeTaken

Tính thời gian cần thiết để thực thi một hàm.

const timeTaken = callback => {
  console.time('timeTaken');
  
  const fn = callback();
  console.timeEnd('timeTaken');
  
  return fn;
};

timeTaken(() => Math.sqrt(999)); // 31.606961258558215, (logged): timeTaken: 0.053955078125ms

66. union

Tạo một mảng không bị lặp các phần tử từ hai mảng đã cho ban đầu.

const union = (a, b) => Array.from(new Set([...a, ...b]));

union([1, 2, 3, 3], [4, 3, 2, 5]); // [1, 2, 3, 4, 5]

67. uniqueElements

Lấy các phần tử không trùng nhau trong một mảng

const uniqueElements = arr => [...new Set(arr)];

uniqueElements([1, 2, 3, 3, 4, 4, 5, 5]); // [1, 2, 3, 4, 5]

68. validateNumber

Kiểm tra một giá trị có phải là một số hay không.

const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;

validateNumber('1'); // true
validateNumber(1); // true
validateNumber(0); // true
validateNumber(-1.3); // true
validateNumber('a'); // false
validateNumber(null); // false
validateNumber(undefined); // false
validateNumber(NaN); // false

Đến đây kết thúc series nho nhỏ của mình về JS snippets rồi. Hi vọng sẽ giúp ích được cho mọi người

Thanks for reading