15个值得收藏的JavaScript函数前端javascript

TNTWeb - 全称腾讯新闻中台前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。
目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。
【15个值得收藏的JavaScript函数】团队倡导开源共建，拥有各种技术大牛，团队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 => ({ '&': '& ', '<': '< ', '>': '> ', "'": '' ', '"': '" ' }[tag] || tag) ); escapeHTML('tntweb');

Unescapes 转义 HTML 字符

const unescapeHTML = str => str.replace( /& |< |> |' |" /g, tag => ({ '& ': '&', '< ': '<', '> ': '>', '' ': "'", '" ': '"' }[tag] || tag) ); unescapeHTML('< a href=https://www.it610.com/article/" #" > tntweb< /a>');

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

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