前言
2019已經過去，在疫情沒有消去，居家遠端辦公之際，整理一些工作上常用的JS程式碼給大家做下分享，一方面為大家更好地理解和鞏固知識，一方面也為金三銀四助力，喜歡的大佬們可以給個小贊。
本人github: github.com/Michael-lzg
瀏覽器相關
檢查是否為瀏覽器環境
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
}
}
}
複製程式碼推薦文章
關注的我的公眾號不定期分享前端知識，與您一起進步！