js 方法整理

时间戳转换为时分

export function timestampHM (time) {
  let hours = parseInt((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  let minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60))
  let seconds = parseInt((time % (1000 * 60)) / 1000)
  hours = hours < 10 ? ('0' + hours) : hours
  minutes = minutes < 10 ? ('0' + minutes) : minutes
  seconds = seconds < 10 ? ('0' + seconds) : seconds
  return `${hours}:${minutes}:${seconds}`
}

时间戳转换为时间

export function timestampToTime (timestamp, type) {
  if (!timestamp) {
    return
  }
  let date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let Y = date.getFullYear() + '-'
  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  let D = lessTen(date.getDate()) + ' '
  let h = lessTen(date.getHours()) + ':'
  let m = lessTen(date.getMinutes()) + ':'
  let s = lessTen(date.getSeconds())
  return type === 'date' ? Y + M + D : Y + M + D + h + m + s
}

canvas海报处理方法

/**
 * @description: 绘制正方形（可以定义圆角），并且有图片地址的话填充图片
 * @param {CanvasContext} ctx canvas上下文
 * @param {number} x 圆角矩形选区的左上角 x坐标
 * @param {number} y 圆角矩形选区的左上角 y坐标
 * @param {number} w 圆角矩形选区的宽度
 * @param {number} h 圆角矩形选区的高度
 * @param {number} r 圆角的半径
 * @param {String} url 图片的url地址
 */
 
 export function drawSquarePic(ctx, x, y, w, h, r, url) {
  ctx.save()
  ctx.beginPath()
  // 绘制左上角圆弧
  ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
  // 绘制border-top
  // 画一条线 x终点、y终点
  ctx.lineTo(x + w - r, y)
  // 绘制右上角圆弧
  ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
  // 绘制border-right
  ctx.lineTo(x + w, y + h - r)
  // 绘制右下角圆弧
  ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
  // 绘制左下角圆弧
  ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
  // 绘制border-left
  ctx.lineTo(x, y + r)
  // 填充颜色(需要可以自行修改)
  ctx.setFillStyle('#ffffff')
  ctx.fill()
  // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
  ctx.clip()
  // 绘制图片
  return new Promise((resolve, reject) => {
    if (url) {
      // const regexp = /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i
      const handleUrl=(res)=>{
        ctx.drawImage(res.path, x, y, w, h)
        ctx.restore() //恢复之前被切割的canvas，否则切割之外的就没办法用
        ctx.draw(true)
        resolve()
      }
      const handleFail = (res) => {
        uni.showToast({
          title: '图片下载异常',
          duration: 2000,
          icon: 'none'
        })
        ctx.restore()
        ctx.draw(true)
        resolve()
      }
       uni.downloadFile({
        url: url,
	success(res) {
	if(res.statusCode !== 200) {
            handleFail(res)
	} else {
           handleUrl({path: res.tempFilePath})
	}
         },
         fail(res) {
           handleFail(res)
         }
       })
    } else {
      ctx.restore()
      ctx.draw(true)
      resolve()
    }
  })
}

canvas 绘制文本

/**
 * @description: 绘制文本时文本的总体高度
 * @param {Object} ctx canvas上下文
 * @param {String} text 需要输入的文本
 * @param {Number} x X轴起始位置
 * @param {Number} y Y轴起始位置
 * @param {Number} maxWidth 单行最大宽度
 * @param {Number} fontSize 字体大小
 * @param {String} color 字体颜色
 * @param {Number} lineHeight 行高
 * @param {String} textAlign 字体对齐方式
*/
  export function drawTextReturnH(
  ctx,
  text,
  x,
  y,
  maxWidth = 375,
  fontSize = 14,
  color = '#000',
  lineHeight = 30,
  textAlign = 'left',
) {
  if (textAlign) {
    ctx.setTextAlign(textAlign) //设置文本的水平对齐方式  ctx.setTextAlign这个可以兼容百度小程序 ，注意：ctx.textAlign百度小程序有问题
    switch (textAlign) {
      case 'center':
        x = getSystem().w / 2
        break
      case 'right':
        x = (getSystem().w - maxWidth) / 2 + maxWidth
        break
      case 'left':
        x = (getSystem().w - maxWidth) / 2
        break
      default:
        break
    }
  }
  let arrText = text.split('')
  let line = ''
  for (let n = 0; n < arrText.length; n++) {
    let testLine = line + arrText[n]
    ctx.font = fontSize + 'px sans-serif' //设置字体大小，注意：百度小程序 用ctx.setFontSize设置字体大小后，计算字体宽度会无效
    ctx.setFillStyle(color) //设置字体颜色
    let metrics = ctx.measureText(testLine) //measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。
    let testWidth = metrics.width
    if (testWidth > maxWidth && n > 0) {
      ctx.fillText(line, x, y)
      line = arrText[n]
      y += lineHeight
    } else {
      line = testLine
    }
  }
  ctx.fillText(line, (arrText.length < 4 ? x + fontSize : x), y + lineHeight)
  ctx.draw(true) //本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。
  return y
}

定位坐标计算

function handlerZeroDistance(aqn, cwh, returnObj ,key) {
  if(key){
    returnObj[key] = {...aqn}
  }
  for(let keys in aqn){
    if( typeof aqn[keys] ==='object') {
      handlerZeroDistance(aqn[keys],cwh,returnObj,keys)
    } else {
      returnObj[key][keys] = {...aqn[keys]}
      if(keys === 'x' && aqn[keys] !== 0){
        if(aqn[keys] > (225 / 2)) {
          returnObj[key][keys] = aqn[keys] + cwh.cxtw
        } else if (aqn[keys] < (225 / 2)) {
          returnObj[key][keys]= aqn[keys] + (cwh.cxtw / 2)
        }
      } else if(keys === 'x' && aqn[keys] === 0) {
        returnObj[key][keys] = aqn[keys]
      }
      if(keys === 'y' && aqn[keys] !== 0) {
        if (aqn[keys] > (400 / 2)) {
          returnObj[key][keys] = aqn[keys] + cwh.cxth
        } else if(aqn[keys] < (400 / 2)){
          returnObj[key][keys] = aqn[keys] + (cwh.cxth / 2)
        }
      } else if(keys === 'y' && aqn[keys] === 0) {
          returnObj[key][keys] = aqn[keys]
      }
    }
  }
}

图片转行为base64

 export function getImageBase64 (imgUrl) {
  return new Promise((resolve, reject) => {
    window.URL = window.URL ?? window.webkitURL
    var xhr = new XMLHttpRequest()
    xhr.open('get', imgUrl, true)
    // 至关重要
    xhr.responseType = 'blob'
    xhr.onload = function () {
      if (this.status == 200) {
        //得到一个blob对象
        var blob = this.response
        // 至关重要
        let oFileReader = new FileReader()
        oFileReader.onloadend = function (e) {
          // 此处拿到的已经是 base64的图片了
          let base64 = e.target.result
          resolve(base64)
        }
        oFileReader.readAsDataURL(blob)
        //====为了在页面显示图片，可以删除====
        var img = document.createElement('img')
        img.onload = function (e) {
          window.URL.revokeObjectURL(img.src) // 清除释放
        }
        let src = window.URL.createObjectURL(blob)
        img.src = src
        // document.getElementById("container1").appendChild(img);
        //====为了在页面显示图片，可以删除====
      }
    }
    xhr.send()
  })
}

获取字典数据列表

export function getDictDataList (dictType) {
  const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
  if (type) {
    return type.dataList
  } else {
    return []
  }
}

获取字典名称

export function getDictLabel (dictType, dictValue) {
  const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
  if (type) {
    const val = type.dataList.find((element) => (element.dictValue === dictValue + ''))
    if (val) {
      return val.dictLabel
    } else {
      return dictValue
    }
  } else {
    return dictValue
  }
}

获取uuid

export function getUUID () {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
  })
}

树形数据转换

/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslate (data, id = 'id', pid = 'pid') {
  var res = []
  var temp = {}
  for (var i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (var k = 0; k < data.length; k++) {
    if (!temp[data[k][pid]] || data[k][id] === data[k][pid]) {
      res.push(data[k])
      continue
    }
    if (!temp[data[k][pid]]['children']) {
      temp[data[k][pid]]['children'] = []
    }
    temp[data[k][pid]]['children'].push(data[k])
    data[k]['_level'] = (temp[data[k][pid]]._level || 0) + 1
  }
  return res
}

获取当前光标位置

export function getPositionforNode(ctrl){
  let caretPos = {
    start: 0,
    end: 0
  }
  if(ctrl.selectionStart) caretPos.start = ctrl.selectionStart
  if(ctrl.selectionEnd) caretPos.end = ctrl.selectionEnd
  return caretPos
}

节流

 /** 
  * @param fun  执行函数
  * @param wait 间隔时间
 */
  export function throttle(func, wait) {
    let previous = 0
    let context, args, time, remaining
    return function() {
      let now = +new Date()
      context = this
      args = arguments
      remaining = wait - (now - previous)// 剩余的还需要等待的时间
      if (remaining <= 0) {
        func.apply(context, args)
        previous = now // 重置“上一次执行”的时间
      } else {
        if (time) {
          clearTimeout(time)
        }
        time = setTimeout(() => {
          func.apply(context, args)
          time = null
          previous = +new Date() // 重置“上一次执行”的时间
        }, remaining) //等待还需等待的时间
      }
    }
  }

递归节点

handleFindCurNode(tree,key,keyField, node = null) {
      const stack = []
      for (const item of tree) {
        if (item) {
          stack.push(item)
          while(stack.length) {
            const temp = stack.shift()
            if (temp.nodeValue !== null && (temp.nodeValue.includes(key))) {
              // console.log(temp)
              node = temp
              break
            }
            const childNodes = temp.childNodes || []
            for (let i = 0; i < childNodes.length; i++) {
              stack.push(childNodes[i])
            }
          }
        }
      }
        return node
    },

下载方法

  // 避免发生乱码要要进行转码
  function saveTXT(content, fileName){
     var blob = new Blob(['\ufeff' + content], {type: 'text/txt,charset=UTF-8'});
     openDownloadDialog(blob, fileName)；
    }


const openDownloadDialog = (url, fileName) => {
  if (typeof url === 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  const aLink = document.createElement('a');
  aLink.href = url;
  aLink.download = fileName;
  aLink.click();
};
export default {
  /**
   * 保存CSV文件
   * @params content csv文件内容
   * @params fileName 保存的文件名
   */
   
 /** TODO: excel在 office下还是会乱码， wps显示正常 后期可通过插件js-xlsx（https://github.com/SheetJS/sheetjs） 处理**/
 
  saveCSV: (content, fileName) => {
    const blob = new Blob(['\ufeff' + content], {type: 'text/csv,charset=UTF-8'});
    openDownloadDialog(blob, `${fileName}.csv`);
  },
  saveTXT: (content, fileName) => {
    // const href = 'data:text/txt;charset=utf-8,\ufeff' + encodeURIComponent(content); // ie浏览器不支持
    const blob = new Blob(['\ufeff' + content], {type: 'text/tet,charset=UTF-8'});
    openDownloadDialog(blob, `${fileName}.txt`);
  }
}

获取用户IP地址

    // 引入生产版js或者开发版js
<script src="https://cdn.jsdelivr.net/gh/joeymalvinni/webrtc-ip/dist/production.min.js"></script>
<!---- OR use the dev bundle: ----->
<script src="https://cdn.jsdelivr.net/gh/joeymalvinni/webrtc-ip/dist/bundle.dev.js"></script>




<script>
// Using Promises:
getIPs().then(data=>{
  console.log(data.join('\n'))
})

// Using Async/Await:
(async function(){
  let data = await getIPs();
  console.log(data.join('\n'));
})();

</script>

Javascript中的对象从两个数组中获取相同的值？

const res = test.filter(t1 => test2.some(t2 => t1.firstName == t2.firstName && t1.lastName == t2.lastName )); console.log(res);