zoukankan      html  css  js  c++  java
  • 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 的模块化方法 非常适用于:

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

    例如:

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

    博客地址:https://ainyi.com/49

  • 相关阅读:
    MySQL系列(二)--数据类型
    并发和多线程(十)--锁状态概念
    并发和多线程(九)--并发容器J.U.C和lock简介
    并发和多线程(八)--线程安全、synchronized、CAS简介
    Nuxt 2.3.X 配置babel
    Nuxt 2.3.X 配置sass
    vscode写vue模板--代码片段
    ES6和ES5中的this指向问题
    TypeScript -- JavaScript的救赎
    Pycharm 查看一个类的继承关系图
  • 原文地址:https://www.cnblogs.com/ainyi/p/10819670.html
Copyright © 2011-2022 走看看