『前端积累』值得收藏的JavaScript函数
字符串（String）
1.检查字符串是否为有效的 JSON
const isValidJSON = str => {
try {
JSON.parse(str);
return true;
} catch(e) {
return false;
}
}
console.log(isValidJSON('{"name": "zhangsan","age": 40}')); // true
console.log(isValidJSON('{"name": "zhangsan",age: 40}')); // false
console.log(isValidJSON(null)); // true
2.判断当前运行环境是否为浏览器
const isBrowser = () => ![typeof window,typeof document].includes('undefined');
console.log(isBrowser()) // true (browser)
console.log(isBrowser()) // false (Node)
3.判断当前运行环境是否为Node.js
const isNode = () =>
typeof process !== 'undefined' &&
!!process.versions &&
!!process.versions.node;
isNode(); // true (Node)
isNode(); // false (browser)
4.将波浪号路径转换为绝对路径
const reversePath = str => {
let homedir = `${require('os').homedir()}`.replace(/\\/g,'/');
return str.replace(/^~($|\/|\\)/,`${homedir}$1`);
}
console.log(reversePath('~/website')) // C:/Users/admin/website
5.以字节为单位返回字符串的长度
const byteSize = str => new Blob([str]).size;
console.log(byteSize('Hello World')); // 11
6.转义字符串以在 HTML 中使用
const escapeHTML = str =>
str.replace(
/[&<>'"]/g,
tag =>
({
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
}[tag] || tag)
);
console.log(escapeHTML('<a href="#">website</a>')); // <a href="#">website</a>
7. Unescapes 转义 HTML 字符
const unescapeHTML = str =>
str.replace(
/&|<|>|'|"/g,
tag =>
({
'&': '&',
'<': '<',
'>': '>',
''': "'",
'"': '"'
}[tag] || tag)
);
console.log(unescapeHTML(' <a href="#">website</a>')); // <a href="#">website</a>
8.获取不带任何参数或片段标识符的当前 URL
const getBaseUrl = url => url.replace(/[?#].*$/,'');
console.log(getBaseUrl('https://www.baidu.com/home?name=zhangsan&&age=20')); // https://www.baidu.com/home
console.log(getBaseUrl('https://www.baidu.com/home#page')); // https://www.baidu.com/home
数组（Array）
1.获取数组中最大的n个数字
const maxFromArray = (array,number = 1) => [...array].sort((x,y) => y - x).slice(0,number);
console.log(maxFromArray([3,2,1,4,6,8])); // [8]
console.log(maxFromArray([7,3,2,1,4,6,8],2)); // [8,7]
2.随机获取数组中元素
onst randomEle = (arr) => arr[Math.floor(Math.random() * arr.length)];
console.log(randomEle([1,5,7,10,100]))
对象（Object）
1.获取URL地址栏中的参数
const getUrlParams = url =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(pre, cur) => (
(pre[cur.split('=')[0]] = cur.split('=')[1]), pre
),
{}
);
console.log(getUrlParams('https://www.baidu.com/home?name=zhangsan&age=20'));
// {name: "zhangsan", age: "20"}
2.rgb(x,x,x)颜色表达方式格式转换成对象格式
const toRGBObject = rgbstr => {
const [red,green,blue] = rgbstr.match(/\d+/g).map(Number);
return { red,green,blue }
}
console.log(toRGBObject('rgb(100,255,245')); // {red: 100, green: 255, blue: 245}
数字（Number）
1.逆转数字
const reverseNumber = n => parseFloat(`${n}`.split('').reverse().join('')) * Math.sign(n);
console.log(reverseNumber(1234)); // 4321
console.log(reverseNumber(1.23)); // 32.1
console.log(reverseNumber(-23.4)); // -4.32
console.log(reverseNumber(-500)); // -5
说明：
Math.sign(x)此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的各是正数, 负数, 正零, 负零, NaN。传入该函数的参数会被隐式转换成数字类型。
Math.sign(3); // 1
Math.sign(-3); // -1
Math.sign("-3"); // -1
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(NaN); // NaN
Math.sign("foo"); // NaN
Math.sign(); // NaN
Math.sign()的Polyfill：
if (!Math.sign) {
Math.sign = function(x) {
// If x is NaN, the result is NaN.
// If x is -0, the result is -0.
// If x is +0, the result is +0.
// If x is negative and not -0, the result is -1.
// If x is positive and not +0, the result is +1.
x = +x; // convert to a number
if (x === 0 || isNaN(x)) {
return Number(x);
}
return x > 0 ? 1 : -1;
};
}
2.计算阶乘
const factorial = (number) =>
number < 0
? (() => {throw new TypeError('类型错误')})()
: number <= 1
? 1
: number * factorial(number - 1);
console.log(factorial(0)); // 1
console.log(factorial(1)); // 1
console.log(factorial(4)); // 24
console.log(factorial(-1)); // 类型错误
说明：0的阶乘为1是规定，n的阶乘是1x2x3x4x......xn。
3.生成指定范围内的随机整数
const randomIntegerRange = (min,max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(randomIntegerRange(10,20)) // 12
