15個(gè)值得收藏的JavaScript函數(shù)
更新時(shí)間：2021年09月14日 14:42:19 作者：召喚師cz
在開發(fā)一個(gè)JavaScript項(xiàng)目時(shí)，經(jīng)常會(huì)用到以前開發(fā)過的一些工具函數(shù)，收集這些函數(shù)，當(dāng)你需要它們的時(shí)候，將節(jié)省你大量的開發(fā)時(shí)間，本文將給大家?guī)?5個(gè)常用的工具函數(shù)，需要的小伙伴可以參考下
1、逆轉(zhuǎn)數(shù)字
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、獲取數(shù)組中最大的n個(gè)數(shù)字
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、計(jì)算階乘
const factorial = (number) =>
number < 0
? (() => {
throw new TypeError('類型錯(cuò)誤');
})()
: number <= 1
? 1
: number * factorial(number - 1);
factorial(4); // 24
factorial(10); // 3628800
4、判斷當(dāng)前運(yùn)行環(huán)境是否為瀏覽器
const isBrowser = () => ![typeof window, typeof document].includes('undefined');
isBrowser(); // false (Node)
isBrowser(); // true (browser)
5、判斷當(dāng)前運(yùn)行環(huán)境是否為Node.js
const isNode = () => typeof process !== 'undefined' && !!process.versions && !!process.versions.node; isNode(); // true (Node) isNode(); // false (browser)
6、獲取url上的參數(shù)
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)顏色表達(dá)方式格式轉(zhuǎn)換成對(duì)象格式
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、轉(zhuǎn)義字符串以在 HTML 中使用
const escapeHTML = str =>
str.replace(
/[&<>'"]/g,
tag =>
({
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
}[tag] || tag)
);
escapeHTML('<a href="#" rel="external nofollow" >tntweb</a>');
9、Unescapes 轉(zhuǎn)義 HTML 字符
const unescapeHTML = str =>
str.replace(
/&|<|>|'|"/g,
tag =>
({
'&': '&',
'<': '<',
'>': '>',
''': "'",
'"': '"'
}[tag] || tag)
);
unescapeHTML('<a href="#">tntweb</a>');
10、生成指定范圍內(nèi)的隨機(jī)整數(shù)
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; randomIntegerInRange(1, 7); // 1 - 7
11、將波浪號(hào)路徑轉(zhuǎn)換為絕對(duì)路徑
const reversePath = str =>
str.replace(/^~($|\/|\\)/, `${require('os').homedir()}$1`);
reversePath('~/web'); // '/Users/[userName]/web'
12、獲取不帶任何參數(shù)或片段標(biāo)識(shí)符的當(dāng)前 URL
const getBaseURL = url => url.replace(/[?#].*$/, '');
getBaseURL('https://xx.com/index?name=tntweb&company=tencent');
// https://xx.com/index
13、以字節(jié)為單位返回字符串的長(zhǎng)度
const byteSize = str => new Blob([str]).size;
byteSize('🚗'); // 4
byteSize('Hello World'); // 11
14、隨機(jī)獲取數(shù)組中元素
const randomly = arr => arr[Math.floor(Math.random() * arr.length)]; randomly([1, 3, 5, 7, 9, 11]);
15、檢查字符串是否為有效的 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
到此這篇關(guān)于15個(gè)值得收藏的JavaScript函數(shù)的文章就介紹到這了,更多相關(guān)JavaScript函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- javascript函數(shù)式編程基礎(chǔ)
- 一篇文章教你JS函數(shù)繼承
- JavaScript基礎(chǔ)系列之函數(shù)和方法詳解
- JS 函數(shù)的 call、apply 及 bind 超詳細(xì)方法
- JavaScript函數(shù)之call、apply以及bind方法案例詳解
- JavaScript中箭頭函數(shù)與普通函數(shù)的區(qū)別詳解
- JavaScript知識(shí):構(gòu)造函數(shù)也是函數(shù)
- JavaScript sleep睡眠函數(shù)的使用
- JavaScript中變量提升和函數(shù)提升實(shí)例詳解
- JavaScript中的50+個(gè)實(shí)用工具函數(shù)小結(jié)
相關(guān)文章
微信小程序支付之c#后臺(tái)實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序支付之c#后臺(tái)實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 自定義Toast實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
微信小程序之獲取當(dāng)前位置經(jīng)緯度以及地圖顯示詳解
最近剛開始接觸微信小程序，在弄懂其結(jié)構(gòu)以及相關(guān)接口之后，準(zhǔn)備著手實(shí)現(xiàn)一個(gè)小程序，功能包括--獲取用戶當(dāng)前位置的經(jīng)緯度，在地圖上查看位置，通過地圖獲取不同位置的經(jīng)緯度。2017-05-05
JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas
這篇文章主要為大家介紹了JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas可視化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
微信小程序 支付功能開發(fā)錯(cuò)誤總結(jié)
這篇文章主要介紹了微信小程序 支付功能開發(fā)錯(cuò)誤總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-02-02
Moment的feature導(dǎo)致線上bug解決分析
這篇文章主要為大家介紹了Moment的feature導(dǎo)致線上bug解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Javascript繼承(上)——對(duì)象構(gòu)建介紹
Javascript中除了基本數(shù)據(jù)（Undefined、Null、Boolean、Number、String），其他都是對(duì)象（Object）2012-11-11
這篇文章主要為大家介紹了Ant Design 的Bug修復(fù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Meta開源JavaScript內(nèi)存泄漏監(jiān)測(cè)工具M(jìn)emLab安裝使用
這篇文章主要為大家介紹了Meta開源JavaScript內(nèi)存泄漏監(jiān)測(cè)工具M(jìn)emLab安裝使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 progress組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10