JavaScript 相关的工具代码
博客地址：https://ainyi.com/49
记录一些数据处理需要的方法工具代码
持续更新中...
时间戳转与日期格式相互转换
- 时间戳转换成日期格式
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); // 1398250549123
console.log(time2); // 1398250549123
console.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 的具体用法见：https://ainyi.com/41
function randomArray (arr) {
return arr.sort(() => 0.5 - Math.random());
}
randomArray([1, 2, 3, 4, 5]) // [3, 4, 2, 1, 5]
数组去重
更多内容和方法看：https://ainyi.com/32
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]
嵌套数组的合并，扁平化数组
更多内容和方法看：https://ainyi.com/19
// toString、split、map （支持多维数组~~~写法简便，速度又快）
// 全部是数字类型，重新映射 map，若是字符串类型就不用 map
let newArr = [];
let nowTime = new Date();
newArr = arr.toString().split(',').map(item => +item);
JS 数组、对象的深拷贝
更多内容和方法看：https://ainyi.com/72
// 使用 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 // 返回 12
false && 12 // 返回 false
|| 运算符
false || 12 // 返回 12
true || 12 // 返回 true
以下输出 1 3
if([]==false){console.log(1)}; // true []==false
if({}==false){console.log(2)}; // false
if([]){console.log(3)} // true
if([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 实用工具库
官方文档地址：https://www.lodashjs.com
使用理由：
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
Lodash 的模块化方法 非常适用于：
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
例如：
// 只需要拷贝对象里特定的某几个值
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
博客地址：https://ainyi.com/49
