JavaScript常用工具函數(shù)庫(kù)匯總
對(duì)象或數(shù)組的深拷貝
/**
* 對(duì)象或數(shù)組的深拷貝
* @param {*} cloneObj 被克隆的對(duì)象
* @param {*} targetObj 克隆的目標(biāo)對(duì)象
* @param {*} isOverride 若屬性重復(fù),是否覆蓋被克隆對(duì)象的屬性
*/
function deepClone(cloneObj, targetObj, isOverride = true) {
const _toString = Object.prototype.toString
if (_toString.call(cloneObj) !== '[object Array]' && _toString.call(cloneObj) !== '[object Object]') {
return cloneObj
}
var cloneTarget = _toString.call(cloneObj) === '[object Array]' ? [] : {}
for (let key in cloneObj) {
if (Object.prototype.hasOwnProperty.call(cloneObj, key)) {
if (_toString.call(cloneObj[key]) === '[object Array]' || _toString.call(cloneObj[key]) === '[object Object]') {
cloneTarget[key] = deepClone(cloneObj[key])
} else {
cloneTarget[key] = cloneObj[key]
}
}
}
if (targetObj && (_toString.call(cloneObj) === _toString.call(targetObj))) {
//這里要注意,克隆的目標(biāo)對(duì)象也要deepClone下
cloneTarget = isOverride
? Object.assign(cloneTarget, deepClone(targetObj))
: Object.assign(deepClone(targetObj), cloneTarget)
}
return cloneTarget
}
精準(zhǔn)判斷數(shù)據(jù)類型
//精準(zhǔn)判斷數(shù)據(jù)類型
function getVerifyDataTypes() {
const types = ["String", "Number", "Boolean", "Null", "Undefined", "Function", "Object", "Array", "Date", "Error", "RegExp", "Symbol", "Map", "Set"]
let Type = {}
// 示例用法:Type.isString('javascript')
for (let i = 0; i < types.length; i++) {
Type[`is${types[i]}`] = obj => Object.prototype.toString.call(obj) === `[object ${types[i]}]`
}
// 判斷字符串是否為json格式
Type.isJsonStr = str => {
if (typeof str == 'string') {
try {
let obj = JSON.parse(str);
if (obj && typeof obj == 'object') {
return true;
}
return false;
} catch (e) {
return false;
}
} else {
return false;
}
}
return Type
}
日期格式化
/**
* 日期格式化
* @param {*} date 日期對(duì)象
* @param {*} beforeHyphen 年月日連字符
* @param {*} afterHyphen 時(shí)分秒連字符
*/
function formatDate(date = new Date(), beforeHyphen = '-', afterHyphen = ':') {
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const ymd = [year, month, day].map(formatNumber).join(beforeHyphen)
const hms = [hour, minute, second].map(formatNumber).join(afterHyphen)
return `${ymd} ${hms}`
}
把時(shí)間戳轉(zhuǎn)換為剩余的天、時(shí)、分、秒
/**
* 把時(shí)間戳轉(zhuǎn)換為剩余的天、時(shí)、分、秒,一般應(yīng)用于倒計(jì)時(shí)場(chǎng)景中
* @param {*} timestamp 時(shí)間戳
*/
function converTimestamp(timestamp) {
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
let day = Math.floor((timestamp / 1000 / 3600) / 24);
let hour = Math.floor((timestamp / 1000 / 3600) % 24);
let minute = Math.floor((timestamp / 1000 / 60) % 60);
let second = Math.floor(timestamp / 1000 % 60);
return {
day: day,
hour: formatNumber(hour),
minute: formatNumber(minute),
second: formatNumber(second)
}
}
從數(shù)組中隨機(jī)取出一項(xiàng)
// 從數(shù)組中隨機(jī)取出一項(xiàng)
function getRandomItemByArray(items) {
return items[Math.floor(Math.random() * items.length)];
}
將有父子關(guān)系的數(shù)組轉(zhuǎn)換成樹形結(jié)構(gòu)數(shù)據(jù)
let data = [
{ parentId: 0, id: 1, value: 'xxx' },
{ parentId: 1, id: 3, value: 'xxx' },
{ parentId: 4, id: 6, value: 'xxx' },
{ parentId: 3, id: 5, value: 'xxx' },
{ parentId: 2, id: 4, value: 'xxx' },
{ parentId: 1, id: 2, value: 'xxx' },
]
// 轉(zhuǎn)換為樹形Array結(jié)構(gòu)
function toTreeAry(arr, pId = 0) {
return arr
.filter(({ parentId }) => parentId === pId)
.map(a => ({
...a,
children: toTreeAry(arr.filter(({ parentId }) => parentId !== pId), a.id)
}))
}
// 轉(zhuǎn)換為樹形Object結(jié)構(gòu)
function toTreeObj(arr, pId = 0) {
let res = {}
arr.filter(({ parentId }) => parentId === pId)
.forEach(a => {
res[a.id] = {
...a,
children: toTreeObj(arr.filter(({ parentId }) => parentId !== pId), a.id)
}
})
return res
}
console.log(toTreeAry(data))
console.log(toTreeObj(data))
生成隨機(jī)字符串
// 隨機(jī)字符串
const randomStr = () => {
return new Date().getTime() + '-' + Math.random().toString(36).substr(2)
}
過(guò)濾html標(biāo)簽
// 過(guò)濾html標(biāo)簽
const filterHTMLTag = (str) => {
str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
str = str.replace(/[|]*\n/, '') //去除行尾空格
str = str.replace(/&npsp;/ig, ''); //去掉npsp
return str;
}
以上就是JavaScript常用工具函數(shù)庫(kù)匯總的詳細(xì)內(nèi)容,更多關(guān)于JavaScript工具函數(shù)庫(kù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
詳解ES6 中的Object.assign()的用法實(shí)例代碼
這篇文章主要介紹了ES6 Object.assign()的用法及用途,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01
JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼
這篇文章主要介紹了JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼,有需要的朋友可以參考一下2014-01-01
js鼠標(biāo)滑輪滾動(dòng)事件綁定的簡(jiǎn)單實(shí)例(兼容主流瀏覽器)
本篇文章主要介紹了js鼠標(biāo)滑輪滾動(dòng)事件綁定的簡(jiǎn)單實(shí)例(兼容主流瀏覽器)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
requirejs按需加載angularjs文件實(shí)例
本篇文章主要介紹了requirejs按需加載angularjs文件實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
JS實(shí)現(xiàn)自動(dòng)切換文字的導(dǎo)航效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)自動(dòng)切換文字的導(dǎo)航效果代碼,涉及javascript動(dòng)態(tài)切換頁(yè)面樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08

