資訊專(zhuān)欄INFORMATION COLUMN
摘要：作者陳大魚(yú)頭魚(yú)頭總結(jié)一些能夠提高開(kāi)發(fā)效率的技巧，這些技巧很實(shí)用，覺(jué)得挺好，想推薦給大家，所以有了這篇文章。如果此時(shí)正在看文章的你也有類(lèi)似的技巧心得，不妨在下方留言來(lái)分享給大家。
作者：陳大魚(yú)頭
github： KRISACHAN
魚(yú)頭總結(jié)一些能夠提高開(kāi)發(fā)效率的JS技巧，這些技巧很實(shí)用，覺(jué)得挺好，想推薦給大家，所以有了這篇文章。
生成隨機(jī)UIDconst 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,%}
無(wú)loop生成指定長(zhǎng)度的數(shù)組
const List = len => [...new Array(len).keys()] const list = List(10) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]一行代碼去重?cái)?shù)組
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進(jìn)制色值
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"
判斷是否為質(zhì)數(shù)
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
遍歷類(lèi)數(shù)組對(duì)象
const elements = document.querySelectorAll(selector);
[].prototype.forEach.call(elements, (el, idx, list) => {
console.log(el) // 元素節(jié)點(diǎn)
})
判斷對(duì)象類(lèi)型
const type = data => Object.prototype.toString.call(data).replace(/^[object (.+)]$/, "$1").toLowerCase()
type({}) // object
優(yōu)化多層判斷條件
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)()
: "未知分?jǐn)?shù)")
}
getScore(30) // 不及格
時(shí)間格式化
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
后記
以上十個(gè)技巧都是我在日常開(kāi)發(fā)中經(jīng)常用到的一些代碼片段，善用這些技巧，可以大大減少我們的開(kāi)發(fā)時(shí)間。如果此時(shí)正在看文章的你也有類(lèi)似的技巧心得，不妨在下方留言來(lái)分享給大家。
如果你、喜歡探討技術(shù)，或者對(duì)本文有任何的意見(jiàn)或建議，你可以?huà)呙柘路蕉S碼，關(guān)注微信公眾號(hào)“魚(yú)頭的Web海洋”，隨時(shí)與魚(yú)頭互動(dòng)。歡迎！衷心希望可以遇見(jiàn)你。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106150.html
本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新~ 1. 類(lèi)型強(qiáng)制轉(zhuǎn)換 1.1 string強(qiáng)制轉(zhuǎn)換為數(shù)字 可以用*1來(lái)轉(zhuǎn)化為數(shù)字(實(shí)際上是調(diào)用.valueOf方法)然后使用Number.isNaN來(lái)判斷是否為NaN，或者使用 a !== a 來(lái)判斷是否為NaN，因?yàn)?NaN !== NaN 32 * 1 // 32 ds * 1 ...
摘要：又一篇來(lái)自日常開(kāi)發(fā)的匯總各位客官請(qǐng)對(duì)號(hào)入席，店小二逐一上菜。解決方案有很多種，例如把字符串?dāng)?shù)組等重組對(duì)象數(shù)組，每個(gè)元素設(shè)置一個(gè)唯一等。另外有個(gè)方式推薦使用生成唯一的數(shù)組，和數(shù)據(jù)數(shù)組一起使用，省去提交數(shù)據(jù)時(shí)再重組數(shù)組。 又一篇來(lái)自日常開(kāi)發(fā)的匯總：各位客官請(qǐng)對(duì)號(hào)入席，店小二逐一上菜。 第一道菜：回鍋肉 react數(shù)組循環(huán)，基本都會(huì)設(shè)置一個(gè)唯一的key，表格的對(duì)象數(shù)組循環(huán)一般沒(méi)什么問(wèn)題，數(shù)據(jù)...
摘要：使用歸類(lèi)重復(fù)樣式和重復(fù)變量一樣，重復(fù)的樣式也可以歸類(lèi)。解決方案可以使用如下的寫(xiě)法兩端對(duì)齊姓名手機(jī)號(hào)碼賬號(hào)密碼效果如下相關(guān)文章輸出計(jì)劃最近總有朋友問(wèn)我相關(guān)的問(wèn)題，因此接下來(lái)我會(huì)輸出篇相關(guān)的文章，希望對(duì)大家有一定的幫助。前言 在這篇文章我會(huì)介紹 9 個(gè)使你的 CSS 更加簡(jiǎn)潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用，覺(jué)得挺高效實(shí)用，所以也就有了這篇文章。 9 個(gè) CSS 技巧 特此聲明，這里說(shuō)的...
摘要：使用歸類(lèi)重復(fù)樣式和重復(fù)變量一樣，重復(fù)的樣式也可以歸類(lèi)。解決方案可以使用如下的寫(xiě)法兩端對(duì)齊姓名手機(jī)號(hào)碼賬號(hào)密碼效果如下相關(guān)文章輸出計(jì)劃最近總有朋友問(wèn)我相關(guān)的問(wèn)題，因此接下來(lái)我會(huì)輸出篇相關(guān)的文章，希望對(duì)大家有一定的幫助。前言 在這篇文章我會(huì)介紹 9 個(gè)使你的 CSS 更加簡(jiǎn)潔優(yōu)雅的使用技巧。這些技巧小生經(jīng)常使用，覺(jué)得挺高效實(shí)用，所以也就有了這篇文章。 9 個(gè) CSS 技巧 特此聲明，這里說(shuō)的...
摘要：技術(shù)前端布局推進(jìn)劑間距規(guī)范化利用變量實(shí)現(xiàn)令人震驚的懸浮效果很棒，但有些情況不適用布局說(shuō)可能是最全的圖片版學(xué)習(xí)網(wǎng)格布局使用的九大誤區(qū)圖解布局布局揭秘和中新增功能探索版本迭代論基礎(chǔ)談?wù)雇麑?duì)比探究繪圖中撤銷(xiāo)功能的實(shí)現(xiàn)方式即將更改的生命周期幾道高 技術(shù) CSS 前端布局推進(jìn)劑 - 間距規(guī)范化 利用CSS變量實(shí)現(xiàn)令人震驚的懸浮效果 Flexbox 很棒，但有些情況不適用 CSS布局說(shuō)——可能是最...
閱讀 2444·2021-11-18 10:07
閱讀 2391·2021-09-22 15:59
閱讀 3149·2021-08-23 09:42
閱讀 2361·2019-08-30 15:44
閱讀 1251·2019-08-29 15:06
閱讀 2420·2019-08-29 13:27
閱讀 1289·2019-08-29 13:21
閱讀 1510·2019-08-29 13:13
