js 常用方法总结

Aiences

已于 2024-01-25 15:27:49 修改

阅读量89

点赞数

文章标签： javascript

于 2023-06-20 17:49:24 首次发布

本文链接：https://blog.csdn.net/qq_41283814/article/details/131310896

版权

1.日期相关

//获取当前日期
export function getCurrentDateYYYY_MM_DD() {
  var now = new Date();
  var year = now.getFullYear(); //年
  var month = now.getMonth() + 1; //月
  var day = now.getDate(); //日
  if (month < 10) {
    month = '0' + month;
  }
  if (day < 10) {
    day = '0' + day;
  }
  return year + '-' + month + '-' + day;
}

export function formatDate(cellValue) {
  if (cellValue == null || cellValue == "") return "";
  var date = new Date(cellValue)
  var year = date.getFullYear()
  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
}

/**
 * @param {number} time
 * @param {string} option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
  } else {
    time = +time
  }
  const d = new Date(time)
  const now = Date.now()

  const diff = (now - d) / 1000

  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  if (option) {
    return parseTime(time, option)
  } else {
    return (
      d.getMonth() +
      1 +
      '月' +
      d.getDate() +
      '日' +
      d.getHours() +
      '时' +
      d.getMinutes() +
      '分'
    )
  }
}

//获取近几天的日期，参数为数字类型
export function getDay(day) {
  var today = new Date();

  var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

  today.setTime(targetday_milliseconds); //注意，这行是关键代码

  var tYear = today.getFullYear();

  var tMonth = today.getMonth();

  var tDate = today.getDate();

  tMonth = doHandleMonth(tMonth + 1);

  tDate = doHandleMonth(tDate);

  return tYear + '-' + tMonth + '-' + tDate;
}

//处理月份成两位数
function doHandleMonth(month) {
  var m = month;

  if (month.toString().length == 1) {
    m = '0' + month;
  }

  return m;
}


  //获取两个日期间的所有日期
 export function getDayAll(starDay, endDay) {
      var arr = [];
      var dates = [];

      // 设置两个日期UTC时间
      var db = new Date(starDay);
      var de = new Date(endDay);

      // 获取两个日期GTM时间
      var s = db.getTime() - 24 * 60 * 60 * 1000;
      var d = de.getTime() - 24 * 60 * 60 * 1000;

      // 获取到两个日期之间的每一天的毫秒数
      for (var i = s; i <= d; ) {
        i = i + 24 * 60 * 60 * 1000;
        arr.push(parseInt(i));
      }
      // 获取每一天的时间  YY-MM-DD
      for (var j in arr) {
        var time = new Date(arr[j]);
        var year = time.getFullYear(time);
        var mouth = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1);
        var day = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate();
        var YYMMDD = year + '-' + mouth + '-' + day;
        dates.push(YYMMDD);
      }

      return dates;
    }

// 日期格式化
export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null;
  }
  const format = pattern || '{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 time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value];
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value;
    }
    return value || 0;
  });
  return time_str;
}

2.Echart 常用图例

/**
 *
 * @param {} title 表名
 * @param {*} xdata x轴数据
 * @param {*} seriesData 数据源
 * @param {*} domKey  容器的ref
 * @param {*} unit 单位
 */
import * as echarts from 'echarts';
import theme from '@/api/echartTheme.json';
export const initEchart = {
  methods: {
    //柱状图
    initBarChart(title, xdata, seriesData, domKey, unit) {
      let dom = this.$refs[domKey];
      let barChart = echarts.init(dom, theme);
      let option = {
        title: {
          text: title,
          x: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: unit ? '{b}: {c}' + unit : '{b}: {c}',
        },
        legend: {
          bottom: 0,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: unit ? '{value}' + unit : '{value}',
          },
          max: function (value) {
            return parseInt(value.max + 5);
          },
        },
        xAxis: {
          type: 'category',
          data: xdata,
        },
        series: [
          {
            data: seriesData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
            label: {
              show: true,
              precision: 1,
              position: 'top',
              valueAnimation: true,
              fontSize: '16px',
              fontFamily: 'monospace',
              formatter: unit ? '{c}' + unit : '{c}',
            },
          },
        ],
      };
      barChart.setOption(option, true);
    },
    //双柱状图
    initDoubleBarChart(title, xdata, seriesData, domKey, unit) {
      seriesData.forEach((o) => {
        o.type = 'bar';
        o.label = {
          show: true,
          precision: 1,
          position: 'top',
          valueAnimation: true,
          fontSize: '16px',
          fontFamily: 'monospace',
          formatter: unit ? '{c}' + unit : '{c}',
        };
      });
      let dom = this.$refs[domKey];
      let barChart = echarts.init(dom, theme);
      let option = {
        title: {
          text: title,
          x: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          // formatter: unit ? '{b}: {c}' + unit : '{b}: {c}',
        },
        // legend: {
        //   bottom: 0,
        // },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: unit ? '{value}' + unit : '{value}',
          },
          max: function (value) {
            if (value.max <= 100) {
              return parseInt(value.max + 10);
            } else if (value.max <= 1000) {
              return parseInt(value.max + 100);
            } else if (value.max <= 10000){
              return parseInt(value.max + 1000);
            } else {
              return parseInt(value.max + 10000);
            }
          },
        },
        xAxis: {
          type: 'category',
          data: xdata,
        },
        series: seriesData,
      };
      barChart.setOption(option, true);
    },
    //折线图
    initChart(title, xdata, trendSeries, domKey, unit) {
      let dom = this.$refs[domKey];
      let planCurve = echarts.init(dom, theme);
      let option = {
        title: {
          text: title,
          x: 'center',
        },
        grid: {
          right: 10,
          bottom: 45,
        },
        xAxis: {
          data: xdata,
          type: 'category',
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: unit ? '{value}' + unit : '{value}',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          bottom: 0,
        },
        series: trendSeries,
      };
      if(unit){
        option.tooltip.formatter =  function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + unit;
            }
            return relVal;
          }
      }
      planCurve.setOption(option, true);
    },
    //饼状图
    initPieChart(title, xdata, seriesData, domKey, totalNum) {
      let dom = this.$refs[domKey];
      let pie = echarts.init(dom, theme);
      let option = {
        title: {
          text: title,
          x: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        graphic: {
          //图形中间文字
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: totalNum,
            textAlign: 'center',
            fill: '#409EFF',
            fontSize: 40,
          },
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: true,
              formatter: '{b}\n{d}%',
              // position: 'center',
            },
            // emphasis: {
            //   label: {
            //     show: false,
            //     fontSize: '20',
            //     fontWeight: 'bold',
            //   },
            // },
            // labelLine: {
            //   show: false,
            // },
            data: seriesData,
            // [
            //   { value: 1048, name: 'Search Engine' },
            // ],
          },
        ],
      };
      pie.setOption(option, true);
    },
  },
};

3.树状结构相关

//获取树最大深度
export function getTreeMaxlevel(treeData) {
  let maxLevel = 0
  function loop(data, level) {
    data.forEach(item => {
      item.level = level
      if (level > maxLevel) {
        maxLevel = level
      }
      if (item.children && item.children.length > 0) {
        loop(item.children, level + 1)
      }
    })
  }
  loop(treeData, 1)
  return maxLevel;
}

//获取树分支的深度是否一致
export function getTreeIsComplete(treeData, maxLevel) {
  let flag = false
  function loop(data, level) {
    data.forEach(item => {
      if (level === maxLevel && item.children) {
        delete item.children
      }
      if (level < maxLevel && (!item.children || item.children?.length === 0)) {
        flag = true
      }
      if(level === maxLevel && (!item.value || !item.label )){
        flag = true
      }
      if (item.children && item.children.length > 0) {
        loop(item.children, level + 1)
      }
    })
  }
  loop(treeData, 1)
  return flag
}

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 0
 */
export function handleTree(data, id, parentId, children, rootId) {
  id = id || 'id';
  parentId = parentId || 'parentId';
  children = children || 'children';
  rootId = rootId || 0;
  //对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(data));
  //循环所有项
  const treeData = cloneData.filter((father) => {
    let branchArr = cloneData.filter((child) => {
      //返回每一项的子级数组
      return father[id] === child[parentId];
    });
    if (branchArr.length > 0) {
      father.children = branchArr;
    }
    //返回第一层
    return father[parentId] === rootId;
  });
  return treeData != '' ? treeData : data;
}

4.校验相关

/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

/**
 * URL地址
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * 手机号码
 * @param {*} s
 * @returns {Boolean}
 */
export function isMobile (s) {
  return /^1[0-9]{10}$/.test(s);
}

/**
 * 电话号码
 * @param {*} s
 * @returns {Boolean}
 */
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s);
}

5.下载相关

const mimeMap = {
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  zip: 'application/zip'
}
const baseUrl = process.env.VUE_APP_BASE_API
/**
 * 下载Zip文件
 * @param {*} str 文件路径
 */
export function downLoadZip(str, filename) {
  var url = baseUrl + str
  axios({
    method: 'get',
    url: url,
    responseType: 'blob',
    headers: { 'Authorization': 'Bearer ' + getToken() }
  }).then(res => {
    resolveBlob(res, mimeMap.zip)
  })
}
/**
 * 解析blob响应内容并下载
 * @param {*} res blob响应内容
 * @param {String} mimeType MIME类型
 */
export function resolveBlob(res, mimeType) {
  const aLink = document.createElement('a')
  var blob = new Blob([res.data], { type: mimeType })
  // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  var contentDisposition = decodeURI(res.headers['content-disposition'])
  var result = patt.exec(contentDisposition)
  var fileName = result[1]
  fileName = fileName.replace(/\"/g, '')
  aLink.href = URL.createObjectURL(blob)
  aLink.setAttribute('download', fileName) // 设置下载文件名称
  document.body.appendChild(aLink)
  aLink.click()
  document.body.appendChild(aLink)
}



//通用下载文件
export function commonDownload(url, params) {
  request({
    url,
    method: 'get',
    params,
    responseType: 'blob',
  }).then((res) => downloadFile(res));
}

export function downloadFile(res) {
  const content = res.data;
  let disposition = res.headers['content-disposition'];
  let fileName = 'export.xlsx';
  if (disposition) {
    let idx = disposition.indexOf('filename=');
    if (idx != -1) {
      fileName = decodeURI(disposition.substring(idx + 'filename='.length));
    }
  }
  fileName = fileName.replace(new RegExp('"', 'gm'), '');
  const blob = new Blob([content]);
  const elink = document.createElement('a');
  elink.download = fileName;
  elink.style.display = 'none';
  elink.href = URL.createObjectURL(blob);
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL 对象
  document.body.removeChild(elink);
}



// 通用下载方法
export function download(fileName) {
  window.location.href =
    baseURL + '/common/download?fileName=' + encodeURI(fileName) + '&delete=' + true;
}

6.浏览器相关

//判断是否IE<11浏览器
export function isIE() {
  return navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1;

}

export function isIE11() {
  return navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf('rv:11.0') > -1;
}

//判断是否IE的Edge浏览器
export function isEdge() {
  return navigator.userAgent.indexOf('Edge') > -1 && !isIE();
}

//获取IE浏览器版本
export function getIEVersion() {
  let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  let isIE = isIE();
  let isIE11 = isIE11();
  let isEdge = isEdge();

  if (isIE) {
    let reIE = new RegExp('MSIE (\\d+\\.\\d+);');
    reIE.test(userAgent);
    let fIEVersion = parseFloat(RegExp['$1']);
    if (fIEVersion === 7 || fIEVersion === 8 || fIEVersion === 9 || fIEVersion === 10) {
      return fIEVersion;
    } else {
      return 6;//IE版本<7
    }
  } else if (isEdge) {
    return 'edge';
  } else if (isIE11) {
    return 11;
  } else {
    return -1;
  }
}

7.其他常用

//去除字符串两端的空格
export function trimSpace(str) {
  if (str == undefined || str == null) {
    return str;
  }
  return str.trim();
}
//去除字符串的空格和换行符
export function filterSpecialCode(str) {
  if (str == undefined || str == null) {
    return str;
  }
  return str.replace(/ /g, '').replace(/[\r\n]/g, '');
}

//浏览器复制
export function copyValue(val) {
  //ctrl+c复制功能
  let oInput = document.createElement('input');
  oInput.value = val;
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象
  document.execCommand('Copy'); // 执行浏览器复制命令
  oInput.remove();
}

//把一个数组按某个属性分类
export function arrayGroupBy(list, groupId) {
  function groupBy(array, f) {
    const groups = {};
    array.forEach(function (o) {
      const group = JSON.stringify(f(o));
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });

    return groups;
  }
  return groupBy(list, function (item) {
    return item[groupId];
  });
}

//深拷贝
export function deepClone(obj) {
  if (obj && typeof obj === 'object') {
    let newObj = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        newObj[key] = obj && typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
      }
    }
    return newObj;
  } else {
    return obj;
  }
}