一些js干货，赶紧收藏起来吧！

作者: MrHong_bfea | 来源:发表于2020-06-09 10:24 被阅读0次

一些js干货，赶紧收藏起来吧！
玄关不知道怎么装？来分享一些玄关干货，赶紧收藏#南昌装修
人民日报推荐14种高效背诵法+16种记忆增强法
不会这几步，再高级的护肤品也仅能吸收30%
干货来了，赶紧收藏
干货分享，赶紧收藏。
【初中英语】必看！仅需60秒，8种时态全掌握
平价好用水乳套装
自媒体干货，赶紧收藏
意大利语干货|意大利语美文欣赏

转载于大佬给自己观看

浏览器相关
检查是否为浏览器环境
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') {
   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
   }
 }
}

作者：lzg9527
链接：https://juejin.im/post/5e4365006fb9a07cd248c21d
来源：掘金

一些js干货，赶紧收藏起来吧！
作者：lzg9527链接：https://juejin.im/post/5e4365006fb9a07cd248c...
玄关不知道怎么装？来分享一些玄关干货，赶紧收藏#南昌装修
玄关不知道怎么装？来分享一些玄关干货，赶紧收藏#南昌装修
人民日报推荐14种高效背诵法+16种记忆增强法
大家赶紧收藏，行动起来吧！
不会这几步，再高级的护肤品也仅能吸收30%
跟踪正确护肤女士五年，十年的科学见证，总结出以下满满的科学护肤干货！不想拿美丽做赌注，就赶紧收藏练起来吧！首先，...
干货来了，赶紧收藏
2020年1月7日星期二晴直接上干货，价值投资中怎么找入场时机？利用沪深300和中证500的估值判断，当其...
干货分享，赶紧收藏。
给复习SAT的你，祝你成功！
【初中英语】必看！仅需60秒，8种时态全掌握
#纯干货# ❤️Vicky吐血整理初中英语时态考点 ❤️❤️❤️赶紧收藏！！！
平价好用水乳套装
嗨喽！小伙伴们我又来啦。今天给大家推荐几款好用的平价水乳，小伙伴们赶紧收藏起来吧！话不多说，直接上干货第一套...
自媒体干货，赶紧收藏
(1)传递价值传递的价值不是指狭义的送礼给钱，也不是授课答疑，是能让用户看完之后，或在精神上、或在改动物质上有所...
意大利语干货|意大利语美文欣赏
本期给大家带来的是意大利语美文欣赏赶紧收藏起来吧~ Le cose succedono. Non le puoi...