開箱即用的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('<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

數組對象排序

一、單個屬性排序

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

二、多個屬性排序

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')
    }
  }
}

數組去重

基本數組去重

一、利用數組的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]

二、先將原數組排序，在與相鄰的進行比較，若是不一樣則存入新數組。

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]))

三、利用對象屬性存在的特性，若是沒有該屬性則存入新數組。

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]))

四、利用數組原型對象上的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]))

五、利用數組原型對象上的 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]))

六、利用 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的防抖與節流