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

目录

数组按指定顺序排列

初始化一个数组

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

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

         获取目标元素的高度height

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

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

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

复制文本

文件下载

url解析成参数

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

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

点击元素外部区域事件

更换对象里key的名称

---

数组按指定顺序排列

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)

结果：

延展：

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=')

结果：

格式化秒为时分秒，小于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;
};

点击元素外部区域事件

/**
 * 点击元素外部事件
 * @param {String} nameClass 元素类名
 * @param {Function} callback
 */
const clickoutSide = (nameClass, callback) => {
  // 全局注册点击事件
  document.onclick = e => {
      //若点击元素为目标元素则返回
      if(e.target.className === nameClass) {
        return
      } else {
        //否则执行回调函数
      callback()
      }
  }
}

更换对象里key的名称

/**
 * newObj-新对象 name
 * oldObj-原对象 title
 */

const newObj = JSON.parse(JSON.stringify(oldObj).replace(/name/g, 'title'));

字节B转化为KB、MB、GB

const changeSize = 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`;
  }

  const sizeStr = `${size}`; // 转成字符串
  const index = sizeStr.indexOf('.'); // 获取小数点处的索引
  const dou = sizeStr.substr(index + 1, 2); // 获取小数点后两位的值
  if (dou === '00') {
    // 判断后两位是否为00，如果是则删除00
    return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
  }
  return size;
};