常用js函数

// 文字排序
['李四','张三','王五'].sort((a,b) => a.localeCompare(b))  // ['李四', '王五', '张三']

// 上边的方法有时候可能不会严格的按照拼音来排序,如果需要严格按照拼音排序,可以使用以下方法
const  collator = new Intl.Collator('zh-Hans-CN', { sensitivity: 'base' });
 ['李四','张三','王五'].sort((a,b) => collator.compare(a,b)) //  ['李四', '王五', '张三']

//JS把全角转为半角的函数  
function CtoH(str)  
{  
    var result="";  
    for (var i = 0; i < str.length; i++){  
        if (str.charCodeAt(i)==12288){  
            result+= String.fromCharCode(str.charCodeAt(i)-12256);  
            continue;  
        }
        if (str.charCodeAt(i)>65280 && str.charCodeAt(i)<65375) {
            result+= String.fromCharCode(str.charCodeAt(i)-65248);  
        } else {
            result+= String.fromCharCode(str.charCodeAt(i));  
        }  
    }  
    return result;  
} 

// 节流公共函数
function debounce(func, wait = 200, immediate = false) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在,重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
}

//  时间戳格式转换函数
function parseTime(time, cFormat = '{y}-{m}-{d} {h}:{i}:{s}') {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = cFormat
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string')) {
      if ((/^[0-9]+$/.test(time))) {
        // support "1548221490638"
        time = parseInt(time)
      } else {
        // support safari
        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
        time = time.replace(new RegExp(/-/gm), '/')
      }
    }

    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(/{([ymdhisa])}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    return value.toString().padStart(2, '0')
  })
  return time_str
}

// 百度地图 api引入函数
function BMPGL(ak) {
  return new Promise(function(resolve, reject) {
    window.MapJsInit = function() {
      // eslint-disable-next-line
      resolve(BMapGL)
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=MapJsInit`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

// 深拷贝函数
function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}
//  压缩图片函数 
function compressImg (file, limit = 512000) {   //  limit要压缩到多大以下,这里默认500k
  if (file.size > 1024 * 1024 * 10) {
    //  默认不能传大于10M的图片
    return {code: 500, msg: '图片大于10M,请选择小于10M的图片'}
  } else if (file.size < limit) {
    return {code: 200, data: file}
  } else {
    return new Promise((resolve, reject) => {
      let turl = null
      let timg = new Image()
      turl = window.URL.createObjectURL(file)
      timg.src = turl
      timg.onload = async function () {
        let tmpImg = await compare(timg, limit)
        let tfile = dataURLtoFile(tmpImg.src, 'picture.png') //  这里依赖下边的函数,将base64转成文件,因为传入的是文件
        resolve({code: 200, data: tfile})
      }
    })
  }
  function compare (img, limit) { // 递归函数,只要不小于限制值就继续压缩
    let tsrc = comp(img)
    let timg = new Image()
    timg.src = tsrc
    return new Promise((resolve, reject) => {
      timg.onload = async function () {
        timg.size = Math.ceil(tsrc.length * 0.76)
        if (timg.size > limit) {
          resolve(compare(timg, limit))
        } else {
          resolve(timg)
        }
      }
    })
  }
  function comp (img) {
    let twidth = img.width * 0.9
    let theight = img.height * 0.9
    if (twidth > 900) {
      twidth = 900
      theight = img.height / img.width * 900
    }
    let tcan = document.createElement('canvas')
    tcan.setAttribute('width', twidth)
    tcan.setAttribute('height', theight)
    let ctx = tcan.getContext('2d')
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, twidth, theight)
    return tcan.toDataURL('image/png')
  }
}
// 复制图片函数,图片包含的一些信息,(比如ps痕迹等),可通过复制删除
 function copyImg (ele) {
        // 检测文件类型
        let file = ele.files[0]
        let extendName = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase()
        if (extendName != 'jpg' && extendName != 'png' && extendName != 'jpeg' && extendName != 'bmp') {
          alert('请上传图片文件')
          ele.value = ''
          return
        }
        // 开始复制
        let img = new Image()
        img.onload = () => {
          let canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          canvas.toBlob(blob => {
            let ta = document.createElement('a')
            ta.href = window.URL.createObjectURL(blob)
            ta.download = 'newPicture.png'
            ta.click()
          })
          
        }
        img.src = window.URL.createObjectURL(file)
 }
//  base64 转文件函数
function dataURLtoFile(dataurl, filename) {
  // 将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png)
  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 File([u8arr], filename, {type:mime});
}

//  检查图片是否为方形
function checkIsRect (file, allow = 0) { // allow是容差,看起来是方形还是绝对是方形,单位像素
  if ((file.type && file.type.startsWith('image')) || (file.name && (file.name.endsWith('.jpg') || file.name.endsWith('.png') || file.name.endsWith('.jpeg')))) {
    return new Promise((resolve, reject) => {
      let turl = window.URL.createObjectURL(file)
      let timg = new Image()
      timg.onload = () => {
        if (Math.abs(timg.width - timg.height) > allow) {
          resolve(false)
        } else {
          resolve(true)
        }
      }
      timg.src = turl
    })
  } else {
    return false
  }
}

// 兼容的videoDom对象申请全屏显示api
function toFullVideo(){
  if(videoDom.requestFullscreen){
    return videoDom.requestFullscreen();
  }else if(videoDom.webkitRequestFullScreen){
    return videoDom.webkitRequestFullScreen();
  }else if(videoDom.mozRequestFullScreen){
    return videoDom.mozRequestFullScreen();
  }else{
    return videoDom.msRequestFullscreen();
  }
}

单行获取指定名字的cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
    
cookie('_ga');

单行rgb颜色转16进制颜色

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 //  <<  位操作符,有符号左移
rgbToHex(0, 51, 255); 

单行代码 把文本写入剪切板

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
    
copyToClipboard("Hello World");

生成随机 十六进制颜色

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
    
 console.log(randomHex());

获取用户选择的文本

const getSelectedText = () => window.getSelection().toString();
    
getSelectedText();

检测用户设备是否处于暗夜模式

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    
console.log(isDarkMode) 

对象的Array 根据某个key排序

// 按照某个key排序, desc 是否 正序  
function sortObj (arr, key, desc = false) {
  let tkey = 1
  if (desc) { tkey = -1 }
  arr.sort((a, b)=> {
    if (a[key] > b[key]) {
      return tkey
    } else if (a[key] < b[key]) {
      return -1 * tkey
    } else {
      return 0
    }
  })
}

取出一个数组的所有集合,列出集合

// 一个数组取出n 个不重复的数有几种取法,【性能不咋地】
function getRandomN (ar, n) {
  let arr = Object.assign([], ar)
  let tmpar = arr.map(item => [item])
  if (arr.length <= n) { return [arr.join(' ')] }
  if (n == 1) {return arr}

  let m = 1
  let tar = []
  let length = tmpar.length
  while (m < n) {
    while(tmpar.length) {
      let tj = tmpar.shift()
      for (let i=0;i<arr.length;i++) {
        let tn = Object.assign([], tj)
        if (!tn.includes(arr[i])) {
          tn.push(arr[i])
          tar.push(tn)
        }
      }
    }
    m++
    tmpar = tar.filter(item => item.length == m)
    
    length = tmpar.length
    tar = []
  }
  tmpar.forEach(item => item.sort())
  let tret = Array.from(new Set(tmpar.map(item =>item.join(' '))))
  return tret
}

监听浏览器复制事件 、粘贴事件

document.addEventListener('copy', function(e){
      console.log(e.clipboardData, window.clipboardData)
    })
    document.addEventListener('paste', function(e){
      console.log(e.clipboardData.getData('Text'))
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容