JavaScript技巧小结（实战篇）

1.浏览器兼容问题。

在我们需要用原生js添加属性的场景比如js动画中，如果不做特殊处理，那么操作一个属性（如transfrom）时往往要写非常冗长的兼容代码，而且代码大量重复，如果使用webpack的postcss-loader，那也只能处理css，不能兼容js。这就到了考验原生js功底的时候了。那么如何让兼容的js代码写的更加优雅呢？

//第一步，识别浏览器内核的类型
let elementStyle = document.createElement('div').style
let vendor = (() => {
  let transformNames = {
    webkit: 'webkitTransform',//webkit内核(safari和chrome)
    Moz: 'MozTransform',//Firefox浏览器内核
    O: 'OTransform',//Opera浏览器内核
    ms: 'msTransform',//IE内核(即Trident)
    standard: 'transform'//标准形式
  }
  for (let key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }
  return false
})()

//第二步 添加属性
export function prefixStyle(style) {
  if (vendor === false) {
    return false
  }
  if (vendor === 'standard') {
    return style
  }
  return vendor + style.charAt(0).toUpperCase() + style.substr(1)//样式属性在js中写成驼峰形式，和css有区别
}

代码已经秀出来了，导入调用即可，十分方便。

2.如何获得一个随机排序的的数组

在平常的业务中常常会有随机排序的这种需求。不妨也封装一下。

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)//注意加1，不然取不到max
}

export function shuffle(arr) {
  let _arr = arr.slice()//深拷贝，为了不影响原来的数组
  for (let i = 0; i < _arr.length; i++) {
    let j = getRandomInt(0, i)
    let t = _arr[i]
    _arr[i] = _arr[j]
    _arr[j] = t
  }
  return _arr
}

这样就可以生成一个“乱七八槽”的数组啦。

3.队列问题

这个问题可以说相当常见了，我接触过的有“歌单以及歌曲播放历史”，“添加购物车”等等业务都涉及将新元素插入队列数据结构的使用。虽然不难，但是每次自己写还是稍显繁琐。

几点原则：1.如果新加的值就在队首，直接停止操作；

                  2.如果已经存在，删除已经存在的值，将新值插入队首；

                  3.如果队满，删队尾，插入新值到队首。

function insertArray(arr, val, compare, maxLen) {
  //arr为原始数组，val为带插入的值，compare为比较函数，maxLen为队列最大长度
  const index = arr.findIndex(compare)//找已经存在的值，不存在返回-1
  if (index === 0) {//是队首直接停止
    return
  }
  if (index > 0) {
    arr.splice(index, 1)//删除重值
  }
  if (maxLen && arr.length > maxLen) {
    arr.pop()//删除队尾
  }
  arr.unshift(val)//插入到队首

}

PS:个人认为以上代码算是非常简洁了，JavaScript不愧是世界上。。。（你懂的）

今天的干货就分享到这里，如果你觉得有用的话，请打上标签存在你的代码库里面，方便以后随时想起来调用，省时省心。