开箱即用的JS干货助力金三银四

前言

2019已经过去，在疫情没有消去，居家远程办公之际，整理一些工作上常用的JS代码给大家做下分享，一方面为大家更好地理解和巩固知识，一方面也为金三银四助力，喜欢的大佬们可以给个小赞。

本人github: github.com/Michael-lzg

JS基础总结（1）——数据类型
JS基础总结（2）——原型与原型链
JS基础总结（3）——作用域和闭包
JS基础总结（4）——this指向及call/apply/bind
JS基础总结（5）—— JS执行机制与EventLoopd

浏览器相关

检查是否为浏览器环境

const isBrowser = () => ![typeof window, typeof document].includes('undefined')

isBrowser() // true (browser)
isBrowser() // false (Node)

判断手机类型

 getMobile () {
   var u = navigator.userAgent
   var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
   var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
   if (isAndroid) {
     return 'Android'
   }
   if (isIOS) {
     return 'IOS'
   }

判断微信/QQ浏览器

let url = navigator.userAgent.toLowerCase()
//使用toLowerCase将字符串全部转为小写 方便我们判断使用
if (url.indexOf('15b202 qq') > -1) {
  //单独判断QQ内置浏览器
  alert('QQ APP 内置浏览器，做你想做的操作')
}
if (url.indexOf('micromessenger') > -1) {
  //单独判断微信内置浏览器
  alert('微信内置浏览器，做你想做的操作')
}
if (url.indexOf('15b202') > -1) {
  //判断微信内置浏览器，QQ内置浏览器
  alert('QQ和微信内置浏览器，做你想做的操作')
}

判断手机开屏/息屏

document.addEventListener('visibilitychange', () => {
  console.log(document.visibilityState)
  if (document.visibilityState === 'hidden') {
    console.log('息屏时间')
  } else if (document.visibilityState === 'visible' && vm.hidden) {
    console.log('开屏时间')
  }
})

监听浏览器的联网状态

window.addEventListener("offline", function(e) {alert("offline");})
window.addEventListener("online", function(e) {alert("online");})

if(window.navigator.onLine==true){
  alert（"已连接"）
}else{
  alert（"未连接"）
}

JavaScript 检测手机是否横屏

window.addEventListener('resize', () => {
  if (window.orientation === 180 || window.orientation === 0) {
    // 正常方向或屏幕旋转180度
    console.log('竖屏')
  }
  if (window.orientation === 90 || window.orientation === -90) {
    // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
    console.log('横屏')
  }
})

字符串相关

首字母大写

const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join('')

capitalize('fooBar') // 'FooBar'

单个单词首字母大写

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase())

capitalizeEveryWord('hello world!') // 'Hello World!'

删除字符串中的 HTMl 标签

const stripHTMLTags = str => str.replace(/<[^>]*>/g, '')

stripHTMLTags('
Hello World
') // 'Hello World!'

字符串翻转

// 方法一
var arr = str.split('')
var newArr = []
for (var i = 0; i < arr.length; i++) {
  newArr[i] = arr[arr.length - i - 1]
}
var newStr = newArr.join('')
console.log(str0)

// 方法二
var newStr = ''
for (var i = 0; i < str.length; i++) {
  newStr += str.charAt(str.length - i - 1)
}
console.log(newStr)

// 方法三
var newStr = str
  .split('')
  .reverse()
  .join('')
console.log(newStr)

// 方法四
var arr = str.split('')
var obj = Array.from(new Set([...arr]))
var newStr = ''
for (i of obj) {
  newStr += obj[arr.length - i]
}
console.log(newStr)

// 方法五
var arr = str.split('')
var newArr = []
while (arr.length > 0) {
  newArr.push(arr.pop())
}
var newStr = newArr.join('')
console.log(newStr)

统计字符串出现最多的字母和次数

var str = 'abcdeddd'
var n = {}
for (var i = 0; i < str.length; i++) {
  var char = str.charAt(i)
  if (n[char]) {
    n[char]++ //计算出现的次数
  } else {
    n[char] = 1 //第一次出现标记为1
  }
}
console.log(n)
var max = 0
var maxChar = null
for (var key in n) {
  if (max < n[key]) {
    max = n[key]
    maxChar = key
  }
}
console.log('最多的字符' + maxChar) //"最多的字符d"
console.log('出现次数' + max) //"出现次数4"

数字相关

格式化金钱，每千分位加逗号

function format(str) {
  let s = ''
  let count = 0
  for (let i = str.length - 1; i >= 0; i--) {
    s = str[i] + s
    count++
    if (count % 3 == 0 && i != 0) {
      s = ',' + s
    }
  }
  return s
}
function format(str) {
  return str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
}

文件单位显示转换

bytesToSize (bytes) {
  if (bytes === 0) return '0 B'
  var k = 1024 // or 1024
  var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  var i = Math.floor(Math.log(bytes) / Math.log(k))
  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
}

bytesToSize(12) // 12.0 B
bytesToSize(683468) // 667 KB
bytesToSize(4544) // 4.44 KB
bytesToSize(98223445) // 93.7 MB
bytesToSize(9822344566) // 9.15 GB

计算两点间的距离

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0)

distance(1, 1, 2, 3) // 2.23606797749979

数组/对象相关

获取url参数

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  var r = window.location.search.substr(1).match(reg)
  if (r != null) return unescape(r[2])
  return null
}

实现对五种 JS 数据类型的克隆

function clone(obj) {
  var copy
  switch (typeof obj) {
    case 'undefined':
      break
    case 'number':
      copy = obj - 0
      break
    case 'string':
      copy = obj + ''
      break
    case 'boolean':
      copy = obj
      break
    case 'object': // object分为两种情况 对象（Object）和数组（Array）
      if (obj === null) {
        copy = null
      } else {
        if (object.prototype.toString.call(obj).slice(8, -1) === 'Array') {
          copy = []
          for (var i = 0; i < obj.length; i++) {
            copy.push(clone(obj[i]))
          }
        } else {
          copy = {}
          for (var j in obj) {
            copy[j] = clone(obj[j])
          }
        }
      }
      break
    default:
      copy = obj
      break
  }
  return copy
}

统计数组中出现的次数的对象

const nums = [3, 5, 6, 82, 1, 4, 3, 5, 82]

const result = nums.reduce((tally, amt) => {
  tally[amt] ? tally[amt]++ : (tally[amt] = 1)
  return tally
}, {})

console.log(result)
//{ '1': 1, '3': 2, '4': 1, '5': 2, '6': 1, '82': 2 }

检测数值出现次数

const countOccurrences = (arr, val) => {
  arr.reduce((a, v) => (v === val ? a + 1 : a), 0)
}
countOccurrences([1, 1, 2, 1, 2, 3], 1) // 3

数组对象排序

1、单个属性排序

compare(property) {
  return function(a, b) {
    let value1 = a[property]
    let value2 = b[property]
    return value1 - value2
  }
}

2、多个属性排序

compare(name, minor) {
  return function(o, p) {
    var a, b
    if (o && p && typeof o === 'object' && typeof p === 'object') {
      a = o[name]
      b = p[name]
      if (a === b) {
        return typeof minor === 'function' ? minor(o, p) : 0
      }
      if (typeof a === typeof b) {
        return a < b ? -1 : 1
      }
      return typeof a < typeof b ? -1 : 1
    } else {
      thro('error')
    }
  }
}

数组去重

基本数组去重

1、利用数组的indexOf下标属性来查询。

function unique4(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// 结果是[1, 2, 3, 5, 6, 7, 4]

2、先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。

function unique2(arr) {
  var formArr = arr.sort()
  var newArr = [formArr[0]]
  for (let i = 1; i < formArr.length; i++) {
    if (formArr[i] !== formArr[i - 1]) {
      newArr.push(formArr[i])
    }
  }
  return newArr
}
console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

3、利用对象属性存在的特性，如果没有该属性则存入新数组。

function unique3(arr) {
  var obj = {}
  var newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = 1
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

4、利用数组原型对象上的includes方法。

function unique5(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

5、利用数组原型对象上的 filter 和 includes方法。

function unique6(arr) {
  var newArr = []
  newArr = arr.filter(function(item) {
    return newArr.includes(item) ? '' : newArr.push(item)
  })
  return newArr
}
console.log(unique6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

6、利用 ES6的set 方法。

function unique10(arr) {
  return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))

根据数组某个属性去重

// 方法一
function unique(arr) {
  const res = new Map()
  return arr.filter(item => !res.has(item.productName) && res.set(item.productName, 1))
}

// 方法二
function unique(arr) {
  let result = {}
  let obj = {}
  for (var i = 0; i < arr.length; i++) {
    if (!obj[arr[i].key]) {
      result.push(arr[i])
      obj[arr[i].key] = true
    }
  }
}

推荐文章

从零开始构建一个webpack项目
总结几个webpack打包优化的方法
总结前端性能优化的方法
几种常见的JS递归算法
搭建一个vue-cli的移动端H5开发模板
封装一个toast和dialog组件并发布到npm
一文读尽前端路由、后端路由、单页面应用、多页面应用
关于几个移动端软键盘的坑及其解决方案
浅谈JavaScript的防抖与节流