实用工具类函数,开发倍儿爽

2019-09-11 admin

业务开发中经常和数据打交道,为了提高开发效率和节省开发周期,那么下面工具类就是你说需要滴

1. 时间格式化

/**
 * @params time时间戳
 * @params cFormat 格式化类型 {y}-{m}-{d} {h}:{i}:{s}
 * 其中 y | m | d | h | m | s | a 分别表示 年 | 月 | 日 | 时 | 分 | 秒 | 周几
 * 支持 {y}-{m}-{d}、 {y}年{m}月{d}日
*/
export function formatTime (time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    if (key === 'a') { return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return timeStr
}

:::tip formatTime(1568171857433) --> 2019-09-11 11:17:37

formatTime(1568171857433, ‘{y}-{m}-{d}’) --> 2019-09-11

formatTime(1568171857433, ‘{h}:{i}:{s}’) --> 11:17:37

formatTime(1568171857433, ‘{a}’) --> 周三

formatTime(1568171857433, ‘{y}年{m}月{d}日’) --> 2019年09月11日

formatTime(128000, ‘{i}:{s}’) --> 02:08 :::

2. 以“天”为单位获取响应的时间戳

/**
 * @params num > 0 获得未来的时间
 * @params num < 0 获得过去时间
*/
export function setDate(num) {
  return Date.now() + num * 24 * 60 * 60 * 1000
}

::: tip 12 个小时之前的时间 -> setDate(-.5)

24 个小时之前的时间 -> setDate(-1)

三天后的时间 -> setDate(3) :::

3. 获取 URL 中的参数

export function getUrlParams (param) {
  let reg = new RegExp('(^|&)' + param + '=([^&]*)(&|$)'),
    result = location.search.substring(1).match(reg)
  return result && result[2]
}

::: tip 举例:https://xxx.com?id=352&valiag…

getUrlParams(id) --> 352 :::

4. 深层拷贝

export function deepClone (source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach((keys) => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}

5. 将驼峰命名转为中横杠

export function toMiddleLine (str) {
  let temp = str.replace(/[A-Z]/g,
  function (match) {
    return '-' + match.toLowerCase()
  })
  // 如果首字母是大写,执行replace时会多一个-,这里需要去掉
  if (temp.slice(0, 1) === '-') {
    temp = temp.slice(1)
  }
  return temp
}

::: tip toMiddleLine(PlInputGroup) --> pl-input-group :::

6. 手机端运行环境判断

BrowserType = {
  isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
  isIPhone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
  isIPad: Boolean(navigator.userAgent.match(/ipad/ig)),
  isWeiChat: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
  isAli: Boolean(navigator.userAgent.match(/AlipayClient/ig)),
  isPhone: Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent))
}

浏览器是否为安卓 & 苹果 & iPad & 微信 & 支付宝 & 手机端

7. 多维数组降维

二维数组

export function toTwoArray(arr) {
  return Array.prototype.concat.apply([], arr)
}

:::tip let arr = [ [1], [2], [3] ]

toTwoArray(arr) --> [1, 2, 3] :::

多维数组

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

flat 有兼容性问题,手机端问题不大。浏览器端不兼容 edge,使用 Infinity 作为深度,展开任意深度的嵌套数组 :::tip var arr1 = [1, 2, [3, 4]]; arr1.flat(); –> [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); –> [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); –> [1, 2, 3, 4, 5, 6]

// 使用 Infinity 作为深度,展开任意深度的嵌套数组

arr3.flat(Infinity); –> [1, 2, 3, 4, 5, 6] :::

8. 数组最大最小值

// 最小值
export function minimum (array) {                      
  return Math.min.apply(Math, array)   
}
// 最大值
export function maximum (array) {                      
  return Math.max.apply(Math, array) 
}

:::tip minimum([0, 1, 4, 9]); --> 0

maximum([0, 1, 4, 9]); --> 9 :::

9. 防抖 & 节流

防抖

function debounce (func, delay) {
  let timer
  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

节流

function throttle(func, wait) {
  let previous = 0
  return function() {
    let now = Date.now()
    let context = this
    let args = arguments
    if (now - previous > wait) {
      func.apply(context, args)
      previous = now
    }
  }
}

10. 生成一个取值内的随机数

export const rand = (function () {
  const today = new Date()
  let seed = today.getTime()
  // 生成
  function generated() {
    seed = (seed * 9301 + 49297) % 233280
    return seed / (233280.0)
  }
  return function rand(number) {
    return Math.ceil(generated(seed) * number)
  }
})()

11. 数字单位转换

export const transNumber = (num) => {
  let numStr = parseInt(num).toString()
  if (numStr.length < 5) { // 一万以内直接返回
    return num
  } else if (numStr.length > 8) { // 大于8位数是亿
    let decimal = numStr.substring(numStr.length - 8)
    return parseInt(parseInt(num / 100000000) + '.' + decimal) + '亿'
  } else {
    let decimal = numStr.substring(numStr.length - 4)
    return parseInt(parseInt(num / 10000) + '.' + decimal) + '万'
  }
}

12. 毫秒转标准分钟

用上面第一个方法formatTime()就可以实现

// 毫秒转标准分钟
export function standardTime (second) {
  second = Math.floor(second)
  let minute = Math.floor(second / 60)
  second = second - minute * 60
  return minute + ':' + formatTime(second)
}

// 格式化分秒
export function formatMiniTime (time) {
  let timeStr = '00'
  if (time > 0 && time < 10) {
    timeStr = '0' + time;
  } else if (time >= 10) {
    timeStr = time
  }
  return timeStr
}

[转载]原文链接:https://segmentfault.com/a/1190000020359381

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74877.html

文章标题:实用工具类函数,开发倍儿爽

相关文章
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
JavaScript初学者必看“箭头函数”
本文我们介绍箭头 (arrow) 函数的优点。 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2); &#x2F;&#...
2017-05-26
搜狐发力html5让用户更爽,自媒体人更嗨
曾经有资深互联网分析师说过”2015年,新闻综合类 APP 如果还没有大量的个性化阅读功能,将被淘汰出局。”枣哥非常同意此观点,移动互联网时代已经席卷全球,移动互联网代表的就是个性张扬的时代,在互联网圈说道个性张扬首先想到的是搜狐老板张朝阳...
2015-11-12
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
图片优化的那些工具
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、im...
2016-01-13
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
回到顶部