提升開發幸福感的10條JS技巧

muddyway 發布于2019-08-26 10:25 / 2925人閱讀

摘要：作者陳大魚頭魚頭總結一些能夠提高開發效率的技巧，這些技巧很實用，覺得挺好，想推薦給大家，所以有了這篇文章。如果此時正在看文章的你也有類似的技巧心得，不妨在下方留言來分享給大家。

作者：陳大魚頭

github： KRISACHAN

魚頭總結一些能夠提高開發效率的JS技巧，這些技巧很實用，覺得挺好，想推薦給大家，所以有了這篇文章。

生成隨機UID

const genUid = () => {
  var length = 20
  var soupLength = genUid.soup_.length
  var id = []
  for (var i = 0; i < length; i++) {
    id[i] = genUid.soup_.charAt(Math.random() * soupLength)
  }
  return id.join("")
}
genUid.soup_ = "!#$%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
genUid() // ;l`yCPc9A8IuK}?N6,%}

無loop生成指定長度的數組

const List = len => [...new Array(len).keys()]
const list = List(10) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

一行代碼去重數組

const list = [1, 1, 2, 3, 6, 45, 8, 5, 4, 6, 5]
const uniqueList = [...new Set(list)] // [1, 2, 3, 6, 45, 8, 5, 4]

RGB色值生成16進制色值

const rgb2Hex = rgb => {
    let rgbList = rgb.toString().match(/d+/g)
    let hex = "#"
    for (let i = 0, len = rgbList.length; i < len; ++i) {
      hex += ("0" + Number(rgbList[i]).toString(16)).slice(-2)
    }
    return hex
};
rgb2Hex("100, 50, 0") // "#643200"

顏色混合

const colourBlend = (c1, c2, ratio) => {
    ratio = Math.max(Math.min(Number(ratio), 1), 0)
    let r1 = parseInt(c1.substring(1, 3), 16)
    let g1 = parseInt(c1.substring(3, 5), 16)
    let b1 = parseInt(c1.substring(5, 7), 16)
    let r2 = parseInt(c2.substring(1, 3), 16)
    let g2 = parseInt(c2.substring(3, 5), 16)
    let b2 = parseInt(c2.substring(5, 7), 16)
    let r = Math.round(r1 * (1 - ratio) + r2 * ratio)
    let g = Math.round(g1 * (1 - ratio) + g2 * ratio)
    let b = Math.round(b1 * (1 - ratio) + b2 * ratio)
    r = ("0" + (r || 0).toString(16)).slice(-2)
    g = ("0" + (g || 0).toString(16)).slice(-2)
    b = ("0" + (b || 0).toString(16)).slice(-2)
    return "#" + r + g + b
}
colourBlend("#ff0000", "#3333ff", 0.5) // "#991a80"

判斷是否為質數

const mathIsPrime = n => {
  if (n === 2 || n === 3) {
    return true
  }
  if (isNaN(n) || n <= 1 || n % 1 != 0 || n % 2 == 0 || n % 3 == 0) {
    return false;
  }
  for (let x = 6; x <= Math.sqrt(n) + 1; x += 6) {
    if (n % (x - 1) == 0 || n % (x + 1) == 0) {
      return false
    }
  }
  return true
}
mathIsPrime(0) // true

遍歷類數組對象

const elements = document.querySelectorAll(selector);
[].prototype.forEach.call(elements, (el, idx, list) => {
    console.log(el) // 元素節點
})

判斷對象類型

const type = data => Object.prototype.toString.call(data).replace(/^[object (.+)]$/, "$1").toLowerCase()
type({}) // object

優化多層判斷條件

const getScore = score => {
    const scoreData = new Array(101).fill(0)
    .map((data, idx) => ([idx, () => (idx < 60 ? "不及格" : "及格")]))
    const scoreMap = new Map(scoreData)
    return (scoreMap.get(score) 
          ? scoreMap.get(score)() 
          : "未知分數")
}
getScore(30) // 不及格

時間格式化

const dateFormatter = (formatter, date) => {
    date = (date ? new Date(date) : new Date)
    const Y = date.getFullYear() + "",
          M = date.getMonth() + 1,
          D = date.getDate(),
          H = date.getHours(),
          m = date.getMinutes(),
          s = date.getSeconds()
    return formatter.replace(/YYYY|yyyy/g, Y)
                    .replace(/YY|yy/g, Y.substr(2, 2))
                    .replace(/MM/g, (M < 10 ? "0" : "") + M)
                    .replace(/DD/g, (D < 10 ? "0" : "") + D)
                    .replace(/HH|hh/g, (H < 10 ? "0" : "") + H)
                    .replace(/mm/g, (m < 10 ? "0" : "") + m)
                    .replace(/ss/g, (s < 10 ? "0" : "") + s)
}

dateFormatter("YYYY-MM-DD HH:mm", "1995/02/15 13:55") // 1995-02-15 13:55

后記

以上十個技巧都是我在日常開發中經常用到的一些代碼片段，善用這些技巧，可以大大減少我們的開發時間。如果此時正在看文章的你也有類似的技巧心得，不妨在下方留言來分享給大家。

如果你、喜歡探討技術，或者對本文有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

GPU云服務器云服務器 js開發技巧 Win10技巧 win10小技巧 win10使用技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106150.html

JS 中可以提升幸福度的小技巧

本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新~ 1. 類型強制轉換 1.1 string強制轉換為數字可以用*1來轉化為數字(實際上是調用.valueOf方法)然后使用Number.isNaN來判斷是否為NaN，或者使用 a !== a 來判斷是否為NaN，因為 NaN !== NaN 32 * 1 // 32 ds * 1 ...

tain335 2019-08-22 11:16 評論0 收藏0
React開發中提升幸福度的一些小技巧

摘要：又一篇來自日常開發的匯總各位客官請對號入席，店小二逐一上菜。解決方案有很多種，例如把字符串數組等重組對象數組，每個元素設置一個唯一等。另外有個方式推薦使用生成唯一的數組，和數據數組一起使用，省去提交數據時再重組數組。又一篇來自日常開發的匯總：各位客官請對號入席，店小二逐一上菜。第一道菜：回鍋肉 react數組循環，基本都會設置一個唯一的key，表格的對象數組循環一般沒什么問題，數據...

smartlion 2019-08-23 11:54 評論0 收藏0
【前端詞典】提高幸福感的 9 個 CSS 技巧

摘要：使用歸類重復樣式和重復變量一樣，重復的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機號碼賬號密碼效果如下相關文章輸出計劃最近總有朋友問我相關的問題，因此接下來我會輸出篇相關的文章，希望對大家有一定的幫助。前言在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優雅的使用技巧。這些技巧小生經常使用，覺得挺高效實用，所以也就有了這篇文章。 9 個 CSS 技巧特此聲明，這里說的...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
【前端詞典】提高幸福感的 9 個 CSS 技巧

摘要：使用歸類重復樣式和重復變量一樣，重復的樣式也可以歸類。解決方案可以使用如下的寫法兩端對齊姓名手機號碼賬號密碼效果如下相關文章輸出計劃最近總有朋友問我相關的問題，因此接下來我會輸出篇相關的文章，希望對大家有一定的幫助。前言在這篇文章我會介紹 9 個使你的 CSS 更加簡潔優雅的使用技巧。這些技巧小生經常使用，覺得挺高效實用，所以也就有了這篇文章。 9 個 CSS 技巧特此聲明，這里說的...

mozillazg 2019-05-21 19:50 評論0 收藏0
前端方便面

摘要：技術前端布局推進劑間距規范化利用變量實現令人震驚的懸浮效果很棒，但有些情況不適用布局說可能是最全的圖片版學習網格布局使用的九大誤區圖解布局布局揭秘和中新增功能探索版本迭代論基礎談展望對比探究繪圖中撤銷功能的實現方式即將更改的生命周期幾道高技術 CSS 前端布局推進劑 - 間距規范化利用CSS變量實現令人震驚的懸浮效果 Flexbox 很棒，但有些情況不適用 CSS布局說——可能是最...

liaoyg8023 2019-08-22 17:01 評論0 收藏0