博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 相关的工具代码
阅读量:5030 次
发布时间:2019-06-12

本文共 4391 字,大约阅读时间需要 14 分钟。

博客地址:

记录一些数据处理需要的方法工具代码

持续更新中...

时间戳转与日期格式相互转换

  • 时间戳转换成日期格式
function timestampToTime (timestamp) {  // 时间戳为10位需*1000,时间戳为13位的话不需乘1000  let dateTime = timestamp.toString().length > 10 ? timestamp : timestamp * 1000;  let date = new Date(dateTime);  let Y = date.getFullYear() + '-';  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';  let D = (date.getDate()+1 < 10 ? '0'+date.getDate() : date.getDate()) + ' ';  let h = (date.getHours()+1 < 10 ? '0'+date.getHours() : date.getHours()) + ':';  let m = (date.getMinutes()+1 < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';  let s = (date.getSeconds()+1 < 10 ? '0'+date.getSeconds() : date.getSeconds());  return Y+M+D+h+m+s;}let onTime = new Date().valueOf();timestampToTime(onTime) // "2019-04-29 14:54:35"
  • 日期格式转换成时间戳
let date = new Date('2014-04-23 18:55:49:123');// 有三种方式获取let time1 = date.getTime();let time2 = date.valueOf();let time3 = Date.parse(date);console.log(time1); // 1398250549123console.log(time2); // 1398250549123console.log(time3); // 1398250549000

获取 24 小时制的时间

当前 toLocaleTimeString 方法只能获取到 12 小时制的时间('上午09:10:01' | '下午08:10:24')

这里给出 js 获取 24 小时制的时间

var myDate = new Date()console.log(myDate.toLocaleTimeString('chinese', {hour12: false}));// 14:57:15

数组元素随机打乱

这是我看过最简洁的数组打乱方式了,利用数组的 sort 方法

sort 的具体用法见:

function randomArray (arr) {  return arr.sort(() => 0.5 - Math.random());}randomArray([1, 2, 3, 4, 5]) // [3, 4, 2, 1, 5]

数组去重

更多内容和方法看:

function unique(arr){  return [...(new Set(arr))];}unique([1,1,2,3,4,2,3,4,5,3,3,4]); // [1, 2, 3, 4, 5]

嵌套数组的合并,扁平化数组

更多内容和方法看:

// toString、split、map (支持多维数组~~~写法简便,速度又快)// 全部是数字类型,重新映射 map,若是字符串类型就不用 maplet newArr = [];let nowTime = new Date();newArr = arr.toString().split(',').map(item => +item);

JS 数组、对象的深拷贝

更多内容和方法看:

// 使用 JSON.parse(JSON.stringify(obj))let a = [1, [2, {aa: 2}, [4]], {aa: 5, cc: { dd: 6 }}]let b = JSON.parse(JSON.stringify(a)) // 完美

获取当前 URL 截取参数对象

// ?foo=bar&baz=bing => {foo: bar, baz: bing}let q = {};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);console.log(q); // {foo: bar, baz: bing}

生成随机 16 进制颜色

'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

间歇调用和超时调用

setInterval()、setTimeout()

首先两个方法都会返回一个调用 ID,该 ID 表示当前的定时器,可用于将来取消该定时器的调用

var timeoutId = setTimeout(()=>{}, 1000);var intervalId = setInterval(()=>{}, 1000);clearTimeout(timeoutId);clearInterval(intervalId);
  • 使用普通 setInterval
let num = 0;let max = 10;let intervalId = null;function incrementNumber () {  num++;  // 如果执行次数达到了 max 设定的值,则取消尚未执行的调用  if (num === max) {    clearInterval(intervalId);    alert('Done');  }}// 追踪调用 ID,用于取消定时器intervalId = setInterval(incrementNumber, 500);

使用 setTimeout 代替 setInterval

let num = 0;let max = 10;function incrementNumber () {  num++;  // 如果执行次数没有达到 max 设定的值,则就设置另外一次超时调用  if (num < max) {    setTimeout(incrementNumber, 500);  } else {    alert('Done');  }}setTimeout(incrementNumber, 500);

可见,在使用超时调用 setTimeout 代替 setInterval 时,没有必要追踪调用 ID,因为在每次执行代码之后,如果不在设置另一次超时调用,调用就会自动停止

一般认为,使用 setTimeout 代替 setInterval 是一种==最佳的==间歇调用模式,在开发环境下,很少真正使用 setInterval,原因是==后一个间歇调用可能会在前一个间歇调用结束之前启动==。而使用 setTimeout 代替 setInterval,完全可以避免这一点

所以最好使用 setTimeout 代替 setInterval

小技巧

&& 运算符

true && 12 // 返回 12false && 12 // 返回 false

|| 运算符

false || 12 // 返回 12true || 12 // 返回 true

以下输出 1 3

if([]==false){console.log(1)}; // true  []==falseif({}==false){console.log(2)}; // falseif([]){console.log(3)} // trueif([1]==[1]){console.log(4)} // 地址不一样
[] == false; // 表达式为 true[] !== false; // 表达式为 true// 但是if ([]) { // 可以进入  console.log(2); // 是可以打印的};if ({}) { // 可以进入  console.log(2); // 是可以打印的};

判断是否为空数组,可以用 length

判断是否为空对象,可以用 JSON 序列化,JSON.stringify(obj) === '{}'

实际开发中,尽量避免使用 ==,要用就用全等 ===

  • 创建日历集合
// 创建过去七天的数组[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));// 创建未来七天的数组,减号换加号[...Array(7).keys()].map(days => new Date(Date.now() + 86400000 * days));
  • 生成 11 位随机 ID
// 生成长度为 11 的随机字母数字字符串Math.random().toString(36).substring(2);// "lr7fs27id3"
  • 创建特定大小的数组
[...Array(3).keys()]// [0, 1, 2]

Lodash

推荐使用 Lodash 工具,这是一个一致性、模块化、高性能的 JavaScript 实用工具库

官方文档地址:

使用理由:

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

Lodash 的模块化方法 非常适用于:

  1. 遍历 array、object 和 string
  2. 对值进行操作和检测
  3. 创建符合功能的函数

例如:

// 只需要拷贝对象里特定的某几个值var object = { 'a': 1, 'b': '2', 'c': 3 }; _.pick(object, ['a', 'c']);// => { 'a': 1, 'c': 3 }

 博客地址:

转载于:https://www.cnblogs.com/ainyi/p/10819670.html

你可能感兴趣的文章
JS中 String/JSON 方法总结
查看>>
二叉树的遍历问题总结
查看>>
3.14-3.20周总结
查看>>
Spring之面向切面编程AOP
查看>>
MATLAB GUI程序设计中使文本框接收多行输入的方法
查看>>
全文检索-Elasticsearch (四) elasticsearch.net 客户端
查看>>
Oracle DBMS_SESSION
查看>>
sublime复制当前行到下一行
查看>>
WPF 3D变换应用
查看>>
luogu4012 深海机器人问题 网络流
查看>>
android 拍照上传照片
查看>>
ArchLinux安装开源VMware Tools
查看>>
系统用户分析模型
查看>>
DB2 锁升级示例1
查看>>
16.RDD实战
查看>>
MainFrame知识小结(20120210)—dfsort/syncsort中的数据类型
查看>>
jsp题库 (一)小测(25/21)
查看>>
D - Flip tile
查看>>
Java连接RabbitMQ之创建连接
查看>>
开户vim编程之--cscope支持
查看>>