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

头像
lzg9527
    阅读 8 分钟
    24

    前言

    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('<p><em>Hello</em> <strong>World</strong></p>') // '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的防抖与节流

    javascript前端ecmascript-6
    lzg9527
    3k 声望8.1k 粉丝

    专注web前端开发，熟悉html5,css3,javascript,vue,react

    « 上一篇
    总结几个webpack打包优化的方法
    下一篇 »
    教你一步步封装vue组件并发布到npm

    引用和评论

    推荐阅读
    头像
    万恶的前端内存泄漏及万善的解决方案

    lzg9527赞 53阅读 21.9k评论 5

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新