13個值得你收藏的JavaScript函數

在開發一個JavaScript項目時，經常會用到以前開發過的一些工具函數，收集這些函數，當你需要它們的時候，将節省你大量的開發時間。

今天，本文将給大家分享常用的工具函數，你可以使用它們，并以優雅的方式解決這些問題。

1、逆轉數字

const reverseNumber = n =>
  parseFloat(`${n}`.split('').reverse().join('')) * Math.sign(n);


reverseNumber(123); // 321
reverseNumber(-200); // -2
reverseNumber(32.4); // 4.23
reverseNumber(-32.4); // -4.23      

2、擷取數組中最大的n個數字​

const maxFromArray = (array, number = 1) => [...array]
  .sort((x, y) => y -x).slice(0, number);


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

3、計算階乘

const factorial = (number) =>
  number < 0
    ? (() => {
      throw new TypeError('類型錯誤');
    })()
    : number <= 1
    ? 1
    : number * factorial(number - 1);


factorial(4); // 24
factorial(10); // 3628800      

4、判斷目前運作環境是否為浏覽器

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


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

5、判斷目前運作環境是否為Node.js

const isNode = () =>
  typeof process !== 'undefined' &&
  !!process.versions &&
  !!process.versions.node;


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

6、擷取url上的參數

const getURLParams = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  );


getURLParams('qq.com'); // {}
getURLParams('https://xx.com?name=tntweb&age=20');
// {name: 'tntweb', age: '20'}      

7、rgb(x,x,x)顔色表達方式格式轉換成對象格式

const toRGBObject = rgbStr => {
  const [red, green, blue] = rgbStr.match(/\d+/g).map(Number);
  return { red, green, blue };
};


toRGBObject('rgb(100, 150, 200)'); // {red: 100, green: 150, blue: 200}      

8、轉義字元串以在 html 中使用

const escapehtml = str =>
  str.replace(
    /[&<>'"]/g,
    tag =>
      ({
        '&': '&',
        '<': '<',
        '>': '>',
        "'": ''',
        '"': '"'
      }[tag] || tag)
  );


escapeHTML('<a href="#">tntweb</a>');      

9、Unescapes 轉義 HTML 字元

const unescapeHTML = str =>
  str.replace(
    /&|<|>|'|"/g,
    tag =>
      ({
        '&': '&',
        '<': '<',
        '>': '>',
        ''': "'",
        '"': '"'
      }[tag] || tag)
  );


unescapeHTML('<a href="#">tntweb</a>');      

10、生成指定範圍内的随機整數

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


randomIntegerInRange(1, 7); // 1 - 7      

11、将波浪号路徑轉換為絕對路徑

const reversePath = str =>
  str.replace(/^~($|\/|\\)/, `${require('os').homedir()}$1`);


reversePath('~/web'); // '/Users/[userName]/web'      

12、擷取不帶任何參數或片段辨別符的目前 URL

const getBaseURL = url => url.replace(/[?#].*$/, '');


getBaseURL('https://xx.com/index?name=tntweb&company=tencent');
// https://xx.com/index      

13、以位元組為機關傳回字元串的長度。

const byteSize = str => new Blob([str]).size;


byteSize('      

學習更多技能

請點選下方公衆号

​