关于前端:15个值得收藏的JavaScript函数

27次阅读

共计 2775 个字符，预计需要花费 7 分钟才能阅读完成。

TNTWeb – 全称腾讯新闻中台前端团队，组内小伙伴在 Web 前端、NodeJS 开发、UI 设计、挪动 APP 等大前端畛域都有所实际和积攒。

目前团队次要反对腾讯新闻各业务的前端开发，业务开发之余也积攒积淀了一些前端基础设施，赋能业务提效和产品翻新。

团队提倡开源共建，领有各种技术大牛，团队 GitHub 地址：https://github.com/tnfe

本文作者召唤师 cz GitHub: https://github.com/xucz

在开发一个 JavaScript 我的项目时，常常会用到以前开发过的一些工具函数，收集这些函数，当你须要它们的时候，将节俭你大量的开发工夫，本文将给大家带来 15 个罕用的工具函数，你能够应用它们以优雅的形式解决问题。

逆转数字

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

获取数组中最大的 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]

计算阶乘

const factorial = (number) =>
  number < 0
    ? (() => {throw new TypeError('类型谬误');
    })()
    : number <= 1
    ? 1
    : number * factorial(number - 1);

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

判断以后运行环境是否为浏览器

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

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

判断以后运行环境是否为 Node.js

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

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

获取 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'}

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}

本义字符串以在 HTML 中应用

const escapeHTML = str =>
  str.replace(/[&<>'"]/g,
    tag =>
      ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'":'&#39;','"': '&quot;'
      }[tag] || tag)
  );

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

Unescapes 本义 HTML 字符

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

unescapeHTML('&lt;a href=&quot;#&quot;&gt;tntweb&lt;/a&gt;');

生成指定范畴内的随机整数

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

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

将波浪号门路转换为绝对路径

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

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

获取不带任何参数或片段标识符的以后 URL

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

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

以字节为单位返回字符串的长度

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

byteSize('🚗'); // 4
byteSize('Hello World'); // 11

随机获取数组中元素

const randomly = arr => arr[Math.floor(Math.random() * arr.length)];

randomly([1, 3, 5, 7, 9, 11]);

查看字符串是否为无效的 JSON

const isValidJSON = str => {
  try {JSON.parse(str);
    return true;
  } catch (e) {return false;}
};

isValidJSON('{"name":"tntweb","age":20}'); // true
isValidJSON('{"name":"tntweb",age:"20"}'); // false
isValidJSON(null); // true

正文完