我的项目之js相关示例我项目中一些常用的js示例代码，在此这边记录下，以方便下次或者以后查询下，并帮助他们可以解决想要的

\


第1个

export const numberFormat = function (value) { const param = {}; let k = 10000, sizes = ['', '万', '亿', '万亿'], i; if (value < k) { param.value = value param.unit = '' } else { i = Math.floor(Math.log(value) / Math.log(k));

param.value = ((value / Math.pow(k, i))).toFixed(2);
param.unit = sizes[i];

} return param; }


##### js之格式化数字截图

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6667d85f88043ed91e3af73fa27f4fc~tplv-k3u1fbpfcp-zoom-1.image)

\


第2个

export { expression }


#####

第3个

export function randomSomg(arr,forLen=9){ let result = [] let count = arr.length for(let i=0;i<forLen;i++){ const index = ~~(Math.random()*count)+i if(result.includes(arr[index])){ continue } result[i] = arr[index] arr[index] = arr[i] count-- } return result }


第4个

export function conver(limit){ let size = ""; if( limit < 0.1 * 1024 ){ //如果小于0.1KB转化成B size = limit.toFixed(2) + "B"; }else if(limit < 0.1 * 1024 * 1024 ){//如果小于0.1MB转化成KB size = (limit / 1024).toFixed(2) + "KB"; }else if(limit < 0.1 * 1024 * 1024 * 1024){ //如果小于0.1GB转化成MB size = (limit / (1024 * 1024)).toFixed(2) + "MB"; }else{ //其他转化成GB size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"; }

let sizestr = size + "";
let len = sizestr.indexOf(".");
let dec = sizestr.substr(len + 1, 2);
if(dec == "00"){//当小数点后为00时 去掉小数部分
    return sizestr.substring(0,len) + sizestr.substr(len + 3,2);
}
return sizestr;

}


第5个

export function shuffle(arr){ let _arr = arr.slice() //改变副本，不修改原数组避免副作用 for(let i = 0; i<_arr.length; i++){ let j = getRandomInt(0, i) let t = _arr[i] _arr[i] = _arr[j] _arr[j] = t } return _arr }


\


第6个

//对一个函数做截流，就会返回新的函数，新函数是在延迟执行原函数 //如果很快的多次调用新函数，timer会被清空，不能多次调用原函数，实现截流 export function debounce(func, delay){ let timer

return function (...args) {
    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        func.apply(this, args)
    }, delay)
}

} function dateDiff(date1, date2) { let type1 = typeof date1, type2 = typeof date2; if (type1 == 'string') date1 = this.stringToTime(date1); else if (date1.getTime) date1 = date1.getTime(); if (type2 == 'string') date2 = this.stringToTime(date2); else if (date2.getTime) date2 = date2.getTime(); //alert((date1 - date2) / (10006060)); return (date1 - date2) / (1000 * 60 * 60 * 24); //结果是小时 }


第7个

export function age(opt){ const {createTime,createDays} = opt const formtDate =new Date(createTime) const fy =formtDate.getFullYear() const fm =formtDate.getMonth()+1 const fd = formtDate.getDate() const news=new Date() const [ys,ms,ds] = [news.getFullYear(),news.getMonth()+1,news.getDate()] const olds1 = ${fy}-${fm}-${fd} const news1 = ${ys}-${ms}-${ds} const xt = dateDiff(news1,olds1) if(this.user.createDays<=365){ return ${createDays}天(${fy}年${fm}月注册) } return ${Math.floor(createDays/365)}年 (${fy}年${fm}月注册) }


第8个

export function getTypeCodeList(){ let [newList,oldList,indexList] = [[],[],[]] //newList保存除了其他的数组 oldList保存其他的数组 // indexList 保存0-index的索引值 const typeCodeList=[ {name:'入驻歌手',cat:5001}, {name:'华语男歌手',cat:1001}, {name:'华语女歌手',cat:1002}, {name:'华语组合/乐队',cat:1003}, {name:'欧美男歌手',cat:2001}, {name:'欧美女歌手',cat:2002}, {name:'欧美组合/乐队',cat:2003}, {name:'日本男歌手',cat:6001}, {name:'日本女歌手',cat:6002}, {name:'日本组合/乐队',cat:6003}, {name:'韩国男歌手',cat:7001}, {name:'韩国女歌手',cat:7002}, {name:'其他男歌手',cat:4001}, {name:'其他女歌手',cat:4002}, {name:'其他组合/乐队',cat:4003}, ] //歌手列表 typeCodeList.reduce((olds,news,index)=>{ const {name,cat} =news indexList.push(index) const startsWith = name.startsWith('其他') if(startsWith){ oldList.push(news) } else { newList.push(news) } }, []) newList.sort((n,c)=>{ return n.cat-c.cat }) newList = [...newList,...oldList] return { newList, indexList } }


\


第9个

export function az26(){ let list = [{}] for(let i=0;i<26;i++){ list[i] = {} list[i].name = String.fromCharCode(65+i) } list[list.length-1].name= String.fromCharCode(35) return list }


第10个

// 计算数据的长度，共分为几组，如果不能整除则加1 function listlen(list,num){ const len = list.length const group = len/num if(len%num!==0){ return parseInt(group)+1 } } //每点击一次，记录次数 function autoIncre(opt) { opt.clickNum++; opt.newStart++; opt.newEnd++; if(opt.clickNum===opt.group){ runAnimation(0) } else { runAnimation(opt.group) } }

//截取当前每组的数据 function renderR(opt){ opt.newList= opt.list.slice( opt.numopt.newStart, opt.numopt.newEnd, ) } //计算将点击次数和开始截取的参数清空, 如果点击此时大于当前数据的组数，则重新开始计数。 export function aclear(opt){ if(opt.clickNum>opt.group-1){ opt.newStart = 0 opt.newEnd = 1 opt.clickNum = 0 opt.animationData = {} } } export function djChange(djList,num,options,ajaxNum=6){ if(djList.length>(ajaxNum-1) && djList.length>num){ //点击的时候获取分为几组 listlen(djList,num) //每点击一次记录点击次数 autoIncre(options); aclear(options); renderR(options);

}


\


第11个


\


第12个

const onHistoySearch=value=>{ if(!historyList.value.includes(value)){ historyList.value.unshift(value) //放到store中去 store.dispatch('setStorageHomeSearch',historyList.value) }else{ const index=historyList.value.indexOf(value) historyList.value.splice(index,1) historyList.value.unshift(value) store.dispatch('setStorageHomeSearch',historyList.value) } }


第13个

export function formatChangeTime(dateTimeStamp){ let minute = 1000 * 60; let hour = minute * 60; let day = hour * 24; let week = day * 7; let month = day * 30;

let now = new Date().getTime(); //获取当前时间毫秒 let diffValue = now - dateTimeStamp;//时间差

if (diffValue < 0) { return; }

let minC = diffValue / minute; //计算时间差的分，时，天，周，月 let hourC = diffValue / hour; let dayC = diffValue / day; let weekC = diffValue / week; let monthC = diffValue / month; let result if (monthC >= 1) { if(monthC<13){ result = "" + parseInt(monthC) + "月前"; }else{ result = "" +moment(+dateTimeStamp).format('YYYY-MM-DD') ; }

} else if (weekC >= 1) { result = "" + parseInt(weekC) + "周前"; } else if (dayC >= 1) { result = "" + parseInt(dayC) + "天前"; } else if (hourC >= 1) { result = "" + parseInt(hourC) + "小时前"; } else if (minC >= 1) { result = "" + parseInt(minC) + "分钟前"; } else result = "刚刚"; return result; }


第14个

##### 若对您有所帮助，麻烦点个赞或者分享给其他朋友哦，谢谢

\


export const getScenePage = (uri, params) => {
  const paramsArray = []
  Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
  if (uri.search(/?/) === -1) {
    uri += `?${paramsArray.join('&')}`
  } else {
    uri += `&${paramsArray.join('&')}`
  }
  return uri
}

//跳高德地图
export const routerWebViewGd = ({ lon, lat, data }) => {
  const gdUrl = `https://m.amap.com/navigation/carmap/saddr=${data.x},${data.y}&daddr=${lat},${lon}&src=nyx_super;&innersrc=uriapi`
  return (window.location.href = gdUrl)
}
//进行高德导航操作
export const onClickNavigation = data => {
  if (data.x && data.y) {
    let url = `https://gaode.com/dir?from[name]=起点&from[lnglat]=${data.x},${data.y}&to[name]=终点&to[lnglat]=${data.detail.x},${data.detail.y}&policy=1&type=car`
    location.href = url
  } else {
    vToastText('未找到相关地区信息')
  }
}

/**
 * 获取视频封面
 * @param {*} videoUrl 视频链接
 * @param {*} frames 帧数
 */
export const getVideoFrame = ({ videoUrl = '', frames = 1 } = { videoUrl: '', frames: 1 }) => {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video')
    video.width = 200
    video.height = 200
    video.src = videoUrl
    video.currentTime = (1 / 60) * frames
    video.setAttribute('crossOrigin', 'anonymous')
    video.oncanplay = () => {
      const oCanvas = document.createElement('canvas')
      oCanvas.width = video.width
      oCanvas.height = video.width
      oCanvas.getContext('2d').drawImage(video, 0, 0, video.width, oCanvas.height)
      const base64 = oCanvas.toDataURL('image/png')
      if (base64) {
        resolve(base64)
      } else {
        reject('url异常')
      }
    }
  })
}

export function getGroupsCategoryList(arrList) {
  const data = arrList
  const map = {}
  const list = []
  if (data.length) {
    data.map(item => {
      if (!map[item.subScene]) {
        if (item.sceneSort !== '1000') {
          list.push({
            Group: item.subScene,
            id: item.sceneId,
            category: item.subScene,
            leftName: item.subScene_dictText,
            logo: item.sceneLogo,
            navList: data
          })
          map[item.subScene] = item
        }
      } else {
        list.map(j => {
          const dj = j
          if (dj.subScene == item.subScene) {
            dj.navList.push(item)
          }
        })
      }
    })
    return list
  }
}

截图

//换一换
import {reactive} from "vue";
export default function (){
  const sceneReactive=reactive({
    newList:[], //处理后的list
    timeStart:0, //截取第几组的开始参数
    timeEnd:1, //截取第几组的结束参数
    group:0, //默认为0组
    num:4, //一页展示list数量
    clickNum:0,//点击换一批次数
  })
  //换一批数据
  const onRouterClickScene=(list,num=4)=>{
    if(list.length>=num&&list.length>=sceneReactive.num) {
      onRouterToggle(list)
    }
  }
  const onRouterToggle=(list)=>{
    onRouterClickListLen(list.length)
    onRouterClickAutoIncre()
    onRouterClickListClear(sceneReactive.clickNum,sceneReactive.group)
    onRouterClickRenderR(list)
  }
//点击的时候获取分为几组
  const onRouterClickListLen=(len)=>{
    sceneReactive.group=len/sceneReactive.num
    if(len%sceneReactive.num!==0){
      sceneReactive.group=parseInt(sceneReactive.group)+1
    }
  }
//每点击一次记录点击次数
  const onRouterClickAutoIncre=()=>{
    sceneReactive.clickNum++
    sceneReactive.timeStart++
    sceneReactive.timeEnd++
  }
//计算将点击次数和开始截取的参数清空, 如果点击此时大于当前数据的组数，则重新开始计数。
  const onRouterClickListClear=(num,group)=>{
    if(num>group-1){
      sceneReactive.timeStart=0
      sceneReactive.timeEnd=1
      sceneReactive.clickNum=0
    }
  }
//截取当前每组的数据
  const onRouterClickRenderR=(arr)=>{
    sceneReactive.newList=arr.slice(
      sceneReactive.timeStart*sceneReactive.num,
      sceneReactive.timeEnd*sceneReactive.num)
  }
  return {
    sceneReactive,
    onRouterClickScene
  }
}

/**
 * 获取地图上两点间距离。单位：米
 * @param {lat1} 第一个点的纬度
 * @param {lon1} 第一个点的经度
 * @param {lat2} 第二个点的纬度
 * @param {lon2} 第二个点的经度
 * @author 不爱喝橙子汁
 */
export function getDistance(lat1, lon1, lat2, lon2) {
  const radLat1 = (lat1 * Math.PI) / 180.0;
  const radLat2 = (lat2 * Math.PI) / 180.0;
  const a = radLat1 - radLat2;
  const b = (lon1 * Math.PI) / 180.0 - (lon2 * Math.PI) / 180.0;
  let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  s = s * 6378137;
  s = Math.round(s * 10000) / 10000;
  return s;
}

/**
 * 节流
 * 在给定时间内只有第一次的操作会返回结果
 * 结合了防抖的思路：在delay时间内生成定时器，一旦到了delay的时间就返回结果
 * 当用户只点击了一次的时候，在delay时间后得到结果
 * 当用户点击了多次的时候，在delay时间后得到第一次的结果，其余的被节流阀忽视掉
 * @author 不爱喝橙子汁
 * @version 1.0.0
 * @param {Function} fn 要包装的回调函数
 * @param {number} delay 延迟时间，单位ms，默认500
 * @return {Function} 被节流函数劫持的新的函数
 */

export function throttle(fn, delay = 500) {
  let last = 0;
  let timer = null;

  return function () {
    let args = arguments;
    let now = +new Date();
    let context = this;

    if (now - last < delay) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        last = now;
        fn.apply(context, args);
      }, delay);
    } else {
      last = now;
      fn.apply(context, args);
    }
  }
}

/**
 * 防抖
 * 在delay时间后得到结果
 * 如果没等到delay的时间一直触发则永远也得不到结果
 * @author 不爱喝橙子汁
 * @version 1.0.0
 * @param {Function} fn 要包装的回调函数
 * @param {number} delay 延迟时间，单位ms，默认500
 * @return {Function} 被防抖函数劫持的新的函数
 */
export function debounce(fn, delay = 500) {
  let timer = null;
  return function () {
    let args = arguments;

    if(timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}

/**
 * 类型检测函数
 * 为typeof关键字的增强版，可以准确判断null，date类型
 * 原理是使用V8引擎最初的toString方法观察数据类型
 * @author 不爱喝橙子汁
 * @version 1.0.0
 * @param {Object} obj 任意对象，例如null，undefined，date
 * @return {String} 类型的全小写字符串
 */
export function objType(obj) {
  return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

export const toNumFixed=(num)=>{
  if(!num){
    return 0
  }
  return ~~(+num * 100) / 100;
}

export function getBase64(data) {
  return new Promise((resolve, reject) => {
    const blob = new Blob([data], { type: "image/png" }); //类型一定要写！！！
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}

export function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    type: mime,
  });
}