js公共函数，自己在工作中接触到（遇到就及时更新）

红太狼 2022-11-13 04:19 106阅读 0赞

## 数组按指定顺序排列 ##

var objs = [
        {name: 'A', type: 'fly'},
        {name: 'B', type: 'blur'},
        {name: 'C', type: 'wipe'},
        {name: 'D', type: 'cube'},
        {name: 'B', type: 'zoom'},
        {name: 'C', type: 'cube'},
        {name: 'E', type: 'iris'},
        {name: 'F', type: 'fade'},
        {name: 'F', type: ''}
    ];
    objs.sort((star,next)=>{
        // 按type的指定顺序排序
        var order = ["wipe", "fly", "iris", "flip", "cube",
                "blur", "fade",'zoom'];
        return order.indexOf(star.type) - order.indexOf(next.type)
    })
    
    console.log(objs)

结果：

![bb1333c672481ef58aa4d6a9d609cc07.png][]

延展：

let list = [3,1,5,2];
    list.sort((star,next)=>{
        // 按type的指定顺序排序
        var order = [1,2,3,4,5];
        return order.indexOf(star) - order.indexOf(next)
    })
    console.lig(list)
    
    //打印结果：：[1, 2, 3, 5]

## 初始化一个数组 ##

1.初始化一个数组 0~10 =》结果 **\[0,1,2,3,4,5,6,7,8,9,10\]**

Array.from(Array(10).keys())
    // 结果：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

2.初始化一个数组 9~18 =》结果 **\[9,10,11, ..., 17, 18\]**

function range(start, end) {
      return Array(end - start + 1).fill().map((_, idx) => start + idx)
    }
    var result = range(9, 18); 
    // result：[9, 10, 11, 12, 13, 14, 15, 16, 17, 18]

3.初始化一个数组 =》结果 **\['0','1','2', ..., ‘9’,'10'\] 注意 数组内是字符串**

var arr = ['a', , 'c'];
    var sparseKeys = Object.keys(arr);
    var denseKeys = [...arr.keys()];
    console.log(sparseKeys); // ['0', '2']
    console.log(denseKeys);  // [0, 1, 2]

## 生成一个不重复的随机数组 ##

/**
     * 生成一个不重复的随机数组
     *
     * @param {number} len 数组长度
     * @param {number} min 最小随机数
     * @param {number} max 最大随机数
     * @return {array} 不重复的随机数组
     */
    const randomUniqueArr = (len, min, max) => {
      if (max - min < len) {
        // 可生成数的范围小于数组长度
        return null;
      }
      const hash = [];
    
      while (hash.length < len) {
        const num = Math.floor(Math.random() * 100);
    
        if (hash.indexOf(num) === -1) {
          hash.push(num);
        }
      }
      return hash;
    };

# 获得目标元素的位置\{x, y\} #

/**
     * getElementPosition
     *
     * @description 获得目标元素x,y
     * @param {target} 目标元素
     * @return {object} {x, y}
     *
     */
     const getElementPosition = element => {
      let [actualLeft, actualTop, current] = [
        element.offsetLeft,
        element.offsetTop,
        element.offsetParent,
      ];
      while (current !== null) {
        actualLeft += current.offsetLeft;
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }
      let [elementScrollLeft, elementScrollTop] = [0, 0];
     
      if (document.compatMode === 'BackCompat') {
        elementScrollLeft = document.body.scrollLeft;
        elementScrollTop = document.body.scrollTop;
      } else {
        elementScrollLeft = document.documentElement.scrollLeft;
        elementScrollTop = document.documentElement.scrollTop;
      }
     
      return {
        x: actualLeft - elementScrollLeft,
        y: actualTop - elementScrollTop,
      };
    };

# 获取目标元素的高度height #

/**
     * getElementHeight
     *
     * @description 获得目标元素height
     * @param {target} 目标元素
     * @return {string}
     *
     */
     const getElementHeight = element => {
      if (element) {
        return Math.max(
          element.scrollHeight,
          element.offsetHeight,
          element.clientHeight,
        );
      }
      const { body } = document;
      const html = document.documentElement;
      return Math.max(
        body.scrollHeight,
        body.offsetHeight,
        html.clientHeight,
        html.scrollHeight,
        html.offsetHeight,
      );
    };

# 检测设备是移动端还是PC端 #

// 检测设备状态    
    const detectDeviceType = () =>
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent,
      )
        ? 'Mobile'
        : 'Desktop';
     
    const isMobile = detectDeviceType() === 'Mobile';
    console.info(isMobile, '--true: 是移动端--')
     
    const isDesktop = detectDeviceType() === 'Desktop';
    console.info(isDesktop, '--true: 是PC端--')

## 直接抓取网页上的同属性内容（在控制台打印） ##

$$('[属性]').map(t => t.innerText)
    
    例子：
      $$('[style="mso-height-source:userset;13.5pt"]').map(t => t.innerText)

## 删除数组或字符串中指定的项元素 ##

/**
     * 删除数组或字符串中指定的项元素
     *
     * @param {string} str 目标字符串/数组
     * @param {string} s 要去掉的指定项元素
     * @return {arr} 结果数组
     */
    const delArrElem = (str, s) => {
      const arr = str.split(',');
      let i = arr.length;
      while (i--) if (arr[i] === s) arr.splice(i, 1);
      return arr.join(',');
    };

## 复制文本 ##

/**
     * 复制
     * @param {string} text
     */
    export default function handleCopy(text) {
      if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return window.clipboardData.setData('Text', text);
      }
      if (
        document.queryCommandSupported &&
        document.queryCommandSupported('copy')
      ) {
        const textarea = document.createElement('textarea');
        textarea.textContent = text;
        textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
          return document.execCommand('copy'); // Security exception may be thrown by some browsers.
        } catch (ex) {
          console.warn('Copy to clipboard failed.', ex);
          return false;
        } finally {
          document.body.removeChild(textarea);
        }
      }
    
      return null;
    }

## 文件下载 ##

/**
     * 文件下载
     * @param {String} url 下载地址
     * @param {String} fileName 下载的文件名
     * @param {Function} callback
     */
    const downloadFile = (url, fileName, callback) => {
      // https://github.com/rndme/download
      const anchor = document.createElement('a');
      const isSupportDownload = 'download' in anchor;
      let urls = url;
      urls = urls.replace(
        /^(http(?:s)?:\/\/)(.*)/gi,
        (str, $1, $2) => `https://${$2}`,
      );
      if (navigator.userAgent.indexOf('Firefox') === -1 && isSupportDownload) {
        anchor.href = urls;
        // anchor.target = '_blank';
        anchor.style.display = 'none';
        anchor.setAttribute('download', fileName || 'download');
        document.body.appendChild(anchor);
        anchor.click();
        setTimeout(() => {
          document.body.removeChild(anchor);
        }, 66);
        if (typeof callback === 'function') callback();
      } else {
        createIframe('j_downloadFile', urls);
        if (typeof callback === 'function') callback();
      }
    };

const batchDownloadFile = url => {
      const tempwindow = window.open('_blank');
      tempwindow.location = url;
    };

## url解析成参数 ##

/**
     * 通过url string解析参数
     * @param {String}} str
     * @returns {Object}
     * @returns {str} anchor
     * @returns {str} query
     * @returns {str} file
     * @returns {str} directory
     * @returns {str} path
     * @returns {str} relative
     * @returns {str} port
     * @returns {str} host
     * @returns {str} password
     * @returns {str} user
     * @returns {str} userInfo
     * @returns {str} authority
     * @returns {str} protocol
     * @returns {str} source
     * @returns {Object} queryKey
     */
    const parseUri = str => {
      if (!parseUri || !parseUri.options) {
        parseUri.options = {
          strictMode: false,
    
          key: [
            'source',
            'protocol',
            'authority',
            'userInfo',
            'user',
            'password',
            'host',
            'port',
            'relative',
            'path',
            'directory',
            'file',
            'query',
            'anchor',
          ],
          q: {
            name: 'queryKey',
            parser: /(?:^|&)([^&=]*)=?([^&]*)/g,
          },
          parser: {
            strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
    
            loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/,
          },
        };
      }
      if (!str) {
        return '';
      }
      const o = parseUri.options;
      const m = o.parser[o.strictMode ? 'strict' : 'loose'].exec(str);
      const uri = {};
      let i = 14;
      while (i--) uri[o.key[i]] = m[i] || '';
      uri[o.q.name] = {};
      uri[o.key[12]].replace(o.q.parser, (_$0, $1, $2) => {
        if ($1) uri[o.q.name][$1] = $2;
      });
      return uri;
    };

例：

parseUri('https://so.csdn.net/so/search/all?q=%E9%9A%8F%E6%9C%BA&t=all&p=3&s=hot&tm=30&lv=2&ft=0&l=&u=')

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

## 格式化秒为时分秒，小于10的将自动补0 ##

/**
     * 格式化秒为时分秒，小于10的将自动补0
     *
     * @param  {string} duration 单位为s
     * @return {string} 时分秒，即 hh：mm: ss
     */
    
    const formatDuration = duration => {
      let hours = parseInt(duration / 3600, 10);
      let minutes = parseInt((duration % 3600) / 60, 10);
      let seconds = parseInt((duration % 3600) % 60, 10);
    
      hours = hours < 10 ? `0${hours}` : hours;
      minutes = minutes < 10 ? `0${minutes}` : minutes;
      seconds = seconds < 10 ? `0${seconds}` : seconds;
    
      return hours > 0 ? `${hours}:${minutes}:${seconds}` : `${minutes}:${seconds}`;
    };

测试：

console.info(formatDuration('6002'))

结果：

01:40:02

## 一个数组分割指定数量数组 ##

/**
     * 一个数组分割指定数量数组
     *
     * @param {array} dataList 原数组
     * @param {number} MOD 数组数量
     * @return {array} newList n个新数组
     */
    const segmentArr = (dataList, MOD) => {
      const newList = [];
      let reli = [];
      (dataList || []).forEach((t, i, arr) => {
        reli.push(t);
        if (reli.length >= MOD || (i + 1 >= arr.length && reli.length)) {
          newList.push(reli);
          reli = [];
        }
      });
      return newList;
    };

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1][]

[bb1333c672481ef58aa4d6a9d609cc07.png]: /images/20221022/fbafe7de7fb44344be877af0dbce4f1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: /images/20221022/affdcbf6c09440a5b2131285ffbf5484.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1]: /images/20221022/46ac52844b2242699e71685fa0fa8b56.png