15个值得收藏的JavaScript函数
原创15个值得收藏的JavaScript函数
原创
腾讯新闻前端团队
修改于 2021-09-10 11:51:38
修改于 2021-09-10 11:51:38
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 =>
({
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
}[tag] || tag)
);
escapeHTML('<a href="#">tntweb</a>'); Unescapes 转义 HTML 字符
const unescapeHTML = str =>
str.replace(
/&|<|>|'|"/g,
tag =>
({
'&': '&',
'<': '<',
'>': '>',
''': "'",
'"': '"'
}[tag] || tag)
);
unescapeHTML('<a href="#">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推荐项目
FFCreator是一个基于 node.js 的轻量、灵活的短视频加工库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的视频短片。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录