美文网首页
js常用方法封装

js常用方法封装

作者: 朱朱是个小太阳 | 来源:发表于2022-12-04 16:38 被阅读0次

1.常用groupBy分组

static groupBy(ss: any[], fn: string | ((v) => string | number | bigint)) {

    let out = {};

    ss.forEach((s) => {

      let key = typeof fn == 'string' ? s[fn] : fn(s);

      if (!out[key]) {

        out[key] = [];

        out[key].key = key;

      }

      out[key].push(s);

    });

    return Object.keys(out).map((key) => out[key]);

  }

调用例子

groupBy(planSections.items, (section) => section.regionName)

2.生成随机字符串

static getRandom(prefix?) {

    let d = new Date().getTime();

    if (window.performance && typeof window.performance.now === 'function') {

      d += performance.now();

    }

    const _uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(

      /[xy]/g,

      function (c) {

        const r = (d + Math.random() * 16) % 16 | 0;

        d = Math.floor(d / 16);

        return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);

      }

    );

    return prefix? `${prefix}${_uuid}`:_uuid;

  }

3.拷贝copy

static copy(data: any, copy: boolean = true): any {

    if (!copy) return data;

    if (data && typeof data === 'object') {

      let type = Object.prototype.toString.call(data);

      if (type === '[object Date]') return new Date(data.getTime());

      let newObj = type === '[object Array]' ? [] : {};

      for (var i in data) {

        newObj[i] = this.copy(data[i], copy);

      }

      return newObj;

    }

    return data;

  }

4.数字转中文

static toChinesNum(num) {

    let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];

    let unit = ["", "十", "百", "千", "万"];

    num = parseInt(num);

    let getWan = (temp) => {

      let strArr = temp.toString().split("").reverse();

      let newNum = "";

      for (var i = 0; i < strArr.length; i++) {

        newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;

      }

      return newNum;

    }

    let overWan = Math.floor(num / 10000);

    let noWan = `${num % 10000}`;

    if (noWan.toString().length < 4) {

      noWan = "0" + noWan;

    }

    return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);

  }

5.获取因数

static getFactorArr(num: number) {

    const arr = [];

    if (!num) {

      return arr;

    }

    for (let i = 1; i <= num; i *= 2) {

      if ((i & num) !== 0) {

        arr.push(i);

      }

    }

    return arr;

  }

6.格式化url

/**

  * 格式化url

  * @param path 路径

  * @param params 参数

  * @param splicing 是否将剩余参数拼入路径

  */

  static formatUrl(path: string, params: any, splicing = false): string {

    if (!params) return path;

    let matchList = path.match(/\{\w+\}/gi);

    if (matchList && matchList.length) {

      matchList.forEach((m) => {

        let key = m.substring(1, m.length - 1);

        path = path.replace(m, params[key]);

        delete params[key];

      });

    }

    Object.keys(params).forEach((v) => {

      if (

        params[v] == null ||

        params[v] == undefined ||

        params[v].toString() == ''

      )

        delete params[v];

    });

    if (splicing) {

      path += '?' + new URLSearchParams(params).toString();

    }

    return path;

  }

相关文章

  • vue axios cdn 封装

    1.config.js 常用域名封装: 2.utils.js 常用的方法封装: 3.api.js axios接口...

  • js jquery的区别

    1. JS / JQuery介绍 Jquery是JS库,何为JS库,即把常用的js方法进行封装,封装到单独的JS文...

  • 常用js封装方法

  • js常用方法封装

    1.常用groupBy分组 static groupBy(ss: any[], fn: string | ((v)...

  • Javascript第四章内置函数、函数的基本用法第一课

    js的内置对象是js自带,封装了一些常用的方法,供开发者使用,可以无需创建对象直接使用。常用的js内置对象有:St...

  • 常用的js方法封装

    暂时只封装了这些方法,有待提升,如有不对的地方 多谢指正 /* * 2017-11-14 * nick *常用js...

  • 总结:js常用封装方法

    问题所在 这段时间发现一些方法频繁用到,特此总结起来,方便我以后的开发查阅,希望队伍越来越壮大? 1. 数组去重 ...

  • 总结js常用函数和常用技巧

    学习过程中总结的干货,包括常用函数、常用js技巧、常用正则表达式等。 Ajax封装 使用方法: 后台响应Ajax ...

  • Jquery 知识点总结

    一 简介 jquery 是一个js类库,其实就是对js常用的方法进行封装,方便我们使用。 二 jquery和htm...

  • js不懂

    js常用方法和一些封装 -- 时间相关(附案例详解)http://www.jianshu.com/p/e54156...

网友评论

      本文标题:js常用方法封装

      本文链接:https://www.haomeiwen.com/subject/uljufdtx.html