JavaScript工作中常用的操作

1.时间格式的转换

  /* 
    fmt：yyyy-MM-dd hh:mm:ss 的自由组合
    date: Date格式的时间
  */
  function dateFtt(fmt, date) {
  const o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    'S': date.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
  for (const k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
  }
  return fmt
}

2.数字千分位逗号

function changeNum(num) {
  return String(num).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
}

3.数组去重

let arr = [1,2,3,4,1,2,3,5,6,7,8]

// 方法1：set加拓展运算符
let arr1 = [...new Set(arr)]

// 方法2：Set
let arr2 = Array.from(new Set(arr))

// 方法3：indexof 或 includes
const unique1 = arr => {
  let array = []
  for(let i = 0; i < arr.length; i++) {
    // if (array.indexOf(arr[i]) === -1) {
    if (!array.includes(arr[i])) {
      array.push(arr[i])
    }
  }
  return array;
}
let arr3 = unique1(arr)

// 方法4：filter
const unique2 = arr => {
  return arr.filter((item, index) => {
    // 查找第一个元素与当前的索引匹配
    return arr.indexOf(item) === index
  })
}
let arr4 = unique2(arr);

// 方法5：Map
const unique3 = arr => {
  let map = new Map()
  let array = []
  for(var i = 0; i < arr.length; i++) {
    if(!map.has(arr[i])) {
      map.set(arr[i], true)
      array.push(arr[i])
    }
  }
  return array;
}
let arr5 = unique3(arr);

4. 数组扁平化

所谓扁平化就是将一个多维数组转为一个一维数组；[1,2,[3,4,[5,6]]] => [1,2,3,4,5,6]

let arr = [1,[2,3,[4,5]]]

// 方法1: flat函数
let arr1 = arr.flat(Infinity)

// 方法2: 正则
let arr2 = JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]")

// 方法3: reduce
const flatten = arr => {
  return arr.reduce((total, cur) => {
    return total.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}
let arr3 = flatten(arr)

// 方法4: 循环递归
let arr4 = []
const flatten1 = arr => {
  for(let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      flatten1(arr[i])
    } else {
      arr4.push(arr[i])
    }
  }
}
flatten1(arr);

5.伪数组转为真数组

const lis = document.getElementsByTagName("li")  // 伪数组
// 方法1: es6
const arrLis1 = Array.from(lis)
// 方法2: es5
const arrLis2 = Array.prototype.slice.call(lis)

6.判断是移动端还是PC端

function isPC() {
  var userAgentInfo = navigator.userAgent
  var Agent = ['Android','iPhoone','SymbianOS','Windows Phone','iPad','iPod']
  var flag = true
  for(var v = 0; v <  Agent.length; v++) {
    if(userAgentInfo.indexOf(Agent[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

7.判断是否在微信打开

function isWeChat() {
  var userAgentInfo = navigator.userAgent
  if(userAgentInfo.indexOf('micromessenger') != -1) {
    return true
  } else {
    return false
  }
}

8.防抖

限制执行次数，多次密集的触发只执行一次 场景：搜索框输入

function debounce(callback, delay) {
  let timer
  return function() {
    if (timer) clearTimeout(timer)
    timer= setTimeout(() => {
      callback.apply(this, arguments)
    }, delay)
  }
}

9.节流

限制执行频率，有节奏地执行 场景：drag、scroll事件触发

function throttle(callback, delay) {
  let timer
  return function() {
    if (timer) return
    setTimeout(() => {
      callback.apply(this, arguments)
      clearTimeout(timer)
    }, delay)
  }
}

10.找到字符串中出现最多的字符，并统计个数

let str = 'aghaosbasldskdpqashdaognkdalqjgoddjddjdjdjdjjdjajapaaagaggk'
let obj = {}
for(let i=0;i<str.length;i++) {
    if(!obj[str.charAt(i)]) {
        obj[str.charAt(i)] = 1
    } else {
        obj[str.charAt(i)]++
    }
}
let max = 0
let maxcode = ''
for(var key in obj) {
    if(obj[key] > max) {
        max = obj[key]
        maxcode = key
    }
}
console.log(maxcode,max)  //a 12

11.下划线命名转为小驼峰命名

function toCamel(str) {
  // 使用split件str拆分成数组
  if(str.split('_').length === 1) return
  //使用reduce累加器对数据进行累加，并将索引大于0的元素首字母大写
  //substr(index,index) 截取字符串中指定索引的字符集
  let newStr = str.split('_').reduce((a,b)=>{
    return a+b.substr(0,1).toUpperCase() + b.substr(1)
  })
  return newStr
 }

12.uuid()

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

12.数字转换中文（如1,2,12转一，二，十二）

function convertToChineseNumber(num) {
  const units = ['', '十', '百', '千', '万', '亿'];
  const chineseNumbers = {
    0: '零',
    1: '一',
    2: '二',
    3: '三',
    4: '四',
    5: '五',
    6: '六',
    7: '七',
    8: '八',
    9: '九'
  };

  let result = '';
  const numStr = num.toString();
  const len = numStr.length;

  for (let i = 0; i < len; i++) {
    const digit = parseInt(numStr[i]);
    const unit = units[len - i - 1];

    if (digit === 0) {
      if (unit === '万' || unit === '亿') {
        result += chineseNumbers[0] + unit;
      }
    } else {
      result += chineseNumbers[digit] + unit;
    }
  }
  if (len === 2 && num < 20) {
    result = result.substring(1)
  }

  return result;
}