JavaScript常用工具函数库汇总


Posted in Javascript onSeptember 17, 2020

对象或数组的深拷贝

/**
 * 对象或数组的深拷贝
 * @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
}

日期格式化

/**
 * 日期格式化
 * @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)
 }
}

从数组中随机取出一项

// 从数组中随机取出一项
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))

生成随机字符串

// 随机字符串
const randomStr = () => {
 return new Date().getTime() + '-' + Math.random().toString(36).substr(2)
}

过滤html标签

// 过滤html标签
const filterHTMLTag = (str) => {
 str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
 str = str.replace(/[|]*\n/, '') //去除行尾空格
 str = str.replace(/&npsp;/ig, ''); //去掉npsp
 return str;
}

以上就是JavaScript常用工具函数库汇总的详细内容,更多关于JavaScript工具函数库的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
el-form 多层级表单的实现示例
Sep 10 #Javascript
详解React的回调渲染模式
Sep 10 #Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 #Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
vue中jsonp插件的使用方法示例
Sep 10 #Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
You might like
php设计模式 State (状态模式)
2011/06/26 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP最常用的正则表达式
2017/02/13 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python数据归一化及三种方法详解
2019/08/06 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
应聘教师自荐信
2013/10/12 职场文书
幼师自我鉴定
2014/02/01 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
Python实现生成bmp图像的方法
2021/06/13 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers