首页 >> js开发 >> js代码JavaScript常用工具函数库汇总
js代码JavaScript常用工具函数库汇总
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
对象或数组的深拷贝对象或数组的深拷贝
/**
* 对象或数组的深拷贝
* @param {*} cloneObj 被克隆的对象
* @param {*} targetObj 克隆的目标对象
* @param {*} isOverride 若属性重复，是否覆盖被克隆对象的属性
*/
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))) {
//这里要注意，克隆的目标对象也要deepClone下
cloneTarget = isOverride
? Object.assign(cloneTarget, deepClone(targetObj))
: Object.assign(deepClone(targetObj), cloneTarget)
}
return cloneTarget
}
/**
* 对象或数组的深拷贝
* @param {*} cloneObj 被克隆的对象
* @param {*} targetObj 克隆的目标对象
* @param {*} isOverride 若属性重复，是否覆盖被克隆对象的属性
*/
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))) {
//这里要注意，克隆的目标对象也要deepClone下
cloneTarget = isOverride
? Object.assign(cloneTarget, deepClone(targetObj))
: Object.assign(deepClone(targetObj), cloneTarget)
}
return cloneTarget
}精准判断数据类型精准判断数据类型
//精准判断数据类型
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
}
//精准判断数据类型
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 日期对象
* @param {*} beforeHyphen 年月日连字符
* @param {*} afterHyphen 时分秒连字符
*/
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}`
}
/**
* 日期格式化
* @param {*} date 日期对象
* @param {*} beforeHyphen 年月日连字符
* @param {*} afterHyphen 时分秒连字符
*/
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}`
}把时间戳转换为剩余的天、时、分、秒把时间戳转换为剩余的天、时、分、秒
/**
* 把时间戳转换为剩余的天、时、分、秒，一般应用于倒计时场景中
* @param {*} timestamp 时间戳
*/
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)
}
}
/**
* 把时间戳转换为剩余的天、时、分、秒，一般应用于倒计时场景中
* @param {*} timestamp 时间戳
*/
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)
}
}从数组中随机取出一项从数组中随机取出一项
// 从数组中随机取出一项
function getRandomItemByArray(items) {
return items[Math.floor(Math.random() * items.length)];
}
// 从数组中随机取出一项
function getRandomItemByArray(items) {
return items[Math.floor(Math.random() * items.length)];
}将有父子关系的数组转换成树形结构数据将有父子关系的数组转换成树形结构数据
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' },
]
// 转换为树形Array结构
function toTreeAry(arr, pId = 0) {
return arr
.filter(({ parentId }) => parentId === pId)
.map(a => ({
...a,
children: toTreeAry(arr.filter(({ parentId }) => parentId !== pId), a.id)
}))
}
// 转换为树形Object结构
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))
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' },
]
// 转换为树形Array结构
function toTreeAry(arr, pId = 0) {
return arr
.filter(({ parentId }) => parentId === pId)
.map(a => ({
...a,
children: toTreeAry(arr.filter(({ parentId }) => parentId !== pId), a.id)
}))
}
// 转换为树形Object结构
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))生成随机字符串生成随机字符串
// 随机字符串
const randomStr = () => {
return new Date().getTime() + '-' + Math.random().toString(36).substr(2)
}
// 随机字符串
const randomStr = () => {
return new Date().getTime() + '-' + Math.random().toString(36).substr(2)
}过滤html标签过滤html标签
// 过滤html标签
const filterHTMLTag = (str) => {
str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
str = str.replace(/[|]*\n/, '') //去除行尾空格
str = str.replace(/&npsp;/ig, ''); //去掉npsp
return str;
}
// 过滤html标签
const filterHTMLTag = (str) => {
str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
str = str.replace(/[|]*\n/, '') //去除行尾空格
str = str.replace(/&npsp;/ig, ''); //去掉npsp
return str;
}以上就是JavaScript常用工具函数库汇总的详细内容，关于JavaScript工具函数库的资料请关注其它相关文章！
/**
* 对象或数组的深拷贝
* @param {*} cloneObj 被克隆的对象
* @param {*} targetObj 克隆的目标对象
* @param {*} isOverride 若属性重复，是否覆盖被克隆对象的属性
*/
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))) {
//这里要注意，克隆的目标对象也要deepClone下
cloneTarget = isOverride
? Object.assign(cloneTarget, deepClone(targetObj))
: Object.assign(deepClone(targetObj), cloneTarget)
}
return cloneTarget
}
/**
* 对象或数组的深拷贝
* @param {*} cloneObj 被克隆的对象
* @param {*} targetObj 克隆的目标对象
* @param {*} isOverride 若属性重复，是否覆盖被克隆对象的属性
*/
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))) {
//这里要注意，克隆的目标对象也要deepClone下
cloneTarget = isOverride
? Object.assign(cloneTarget, deepClone(targetObj))
: Object.assign(deepClone(targetObj), cloneTarget)
}
return cloneTarget
}精准判断数据类型精准判断数据类型
//精准判断数据类型
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
}
//精准判断数据类型
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 日期对象
* @param {*} beforeHyphen 年月日连字符
* @param {*} afterHyphen 时分秒连字符
*/
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}`
}
/**
* 日期格式化
* @param {*} date 日期对象
* @param {*} beforeHyphen 年月日连字符
* @param {*} afterHyphen 时分秒连字符
*/
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}`
}把时间戳转换为剩余的天、时、分、秒把时间戳转换为剩余的天、时、分、秒
/**
* 把时间戳转换为剩余的天、时、分、秒，一般应用于倒计时场景中
* @param {*} timestamp 时间戳
*/
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)
}
}
/**
* 把时间戳转换为剩余的天、时、分、秒，一般应用于倒计时场景中
* @param {*} timestamp 时间戳
*/
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)
}
}从数组中随机取出一项从数组中随机取出一项
// 从数组中随机取出一项
function getRandomItemByArray(items) {
return items[Math.floor(Math.random() * items.length)];
}
// 从数组中随机取出一项
function getRandomItemByArray(items) {
return items[Math.floor(Math.random() * items.length)];
}将有父子关系的数组转换成树形结构数据将有父子关系的数组转换成树形结构数据
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' },
]
// 转换为树形Array结构
function toTreeAry(arr, pId = 0) {
return arr
.filter(({ parentId }) => parentId === pId)
.map(a => ({
...a,
children: toTreeAry(arr.filter(({ parentId }) => parentId !== pId), a.id)
}))
}
// 转换为树形Object结构
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))
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' },
]
// 转换为树形Array结构
function toTreeAry(arr, pId = 0) {
return arr
.filter(({ parentId }) => parentId === pId)
.map(a => ({
...a,
children: toTreeAry(arr.filter(({ parentId }) => parentId !== pId), a.id)
}))
}
// 转换为树形Object结构
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))生成随机字符串生成随机字符串
// 随机字符串
const randomStr = () => {
return new Date().getTime() + '-' + Math.random().toString(36).substr(2)
}
// 随机字符串
const randomStr = () => {
return new Date().getTime() + '-' + Math.random().toString(36).substr(2)
}过滤html标签过滤html标签
// 过滤html标签
const filterHTMLTag = (str) => {
str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
str = str.replace(/[|]*\n/, '') //去除行尾空格
str = str.replace(/&npsp;/ig, ''); //去掉npsp
return str;
}
// 过滤html标签
const filterHTMLTag = (str) => {
str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
str = str.replace(/[|]*\n/, '') //去除行尾空格
str = str.replace(/&npsp;/ig, ''); //去掉npsp
return str;
}以上就是JavaScript常用工具函数库汇总的详细内容，关于JavaScript工具函数库的资料请关注其它相关文章！
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
