32個有用的JS 代碼片段，讓你的代碼顯得更專業(yè)
1、字節(jié)大小
const byteSize1 = str => new Blob([str]).size;const byteSize2 = int => new Blob([int]).size;byteSize1("JavaScript") // 10byteSize2(101) // 3
2、轉(zhuǎn)換為數(shù)組
這個簡單的代碼片段方法會將你的非數(shù)組值或數(shù)據(jù)轉(zhuǎn)換為數(shù)組形式。
const convertToArray = val => (Array.isArray(val) ? val : [val]);convertToArray("Pro") // [Pro]convertToArray(101) // [101]
3、大寫
此代碼段方法將以大寫形式轉(zhuǎn)換字符串中字符的每個第一個字母。檢查下面的代碼以了解它是如何工作的。
const capitalize = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());capitalize('code'); //Codecapitalize('javascript programming'); //Javascript Programming
4、 獲取當(dāng)前網(wǎng)址
此代碼段將有助于獲取運行 javascript 的當(dāng)前 URL。這在前端調(diào)試中派上用場。
const currentURL = () => window.location.href;currentURL() // https://medium.com/@codedev101
5、數(shù)字化
這個是很棒的片段，它會將你的數(shù)字轉(zhuǎn)換為數(shù)字?jǐn)?shù)組。查看下面的代碼示例。
const digitize = n => [...`${n}`].map(i => parseInt(i));digitize(345) // [3,4,5]digitize(123) // [1,2,3]digitize(6) // [6]
6、計數(shù)出現(xiàn)次數(shù)
此片段代碼將計算數(shù)組中某個值的出現(xiàn)次數(shù)。當(dāng)你想知道一個值在大尺寸數(shù)組中出現(xiàn)多少次時，這會派上用場。
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);countOccurrences([2,4,6,2,5,2], 2) // 3countOccurrences([1,4,6,2,5,6], 6) // 2
7、字謎
此片段代碼用于檢查特定字符串是否為字謎。字謎是可以改寫成另一個詞的詞。
const Anagram = (string1, string2) => {const normalize = str =>str.toLowerCase().replace(/[^a-z0-9]/gi, '').split('').sort().join('');return normalize(string1) === normalize(string2);};Anagram("race", "care") // trueAnagram("part", "trap") // true
8、檢查瀏覽器標(biāo)簽焦點
此片段代碼將告訴你當(dāng)前運行 javaScript 的瀏覽器選項卡是否處于焦點狀態(tài)。
const Browser_Tab_Focused = () => !document.hidden;Browser_Tab_Focused(); // true
9、檢查瀏覽器
這段代碼會告訴你運行 JavaScript 的環(huán)境是瀏覽器還是非瀏覽器。眾所周知，我們可以在瀏覽器中運行 JavaScript，node js如果我們可以檢查我們在哪個環(huán)境中工作，那就太好了。
const isBrowser = () => ![typeof window, typeof document].includes('undefined');isBrowser() // true if on isBrowserisBrowser() // false if we are on node js or any other environment
10、檢查空
這段代碼將檢查變量或值是否為空。
const checkNull = val => val === undefined || val === null;checkNull() // truecheckNull(234) // false
11、 isNumber
這個簡單的片段代碼將檢查值的變量是否為數(shù)字。
function isNumeric(num) {return !isNaN(parseFloat(num)) && isFinite(num);}isNumeric(324) //trueisNumeric("Code") // false
12、 isString
此片段代碼將檢查變量或值是否為字符串。
const isString = val => typeof val === 'string';isString('hello world'); // trueisString('1234'); // trueisString(345); // false
13、最大數(shù)字
此代碼段方法將返回列表中的最大數(shù)字。這是從列表中找到最大數(shù)字的最快方法。
const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);maxN([3,8,7]) // 8maxN([1,5,6,23]) // 23
14、反轉(zhuǎn)
此片段代碼只是反轉(zhuǎn)字符串。這在你需要反轉(zhuǎn)字符串或檢查回文的簡短任務(wù)中派上用場。
const reverseStr = str => [...str].reverse().join('');console.log(reverseStr("JavaScript")) // tpircSavaJconsole.log(reverseStr("123")) // 321
15、從列表中隨機
此片段代碼用于從列表中選擇隨機數(shù)。
const random = arr => arr[Math.floor(Math.random() * arr.length)];console.log(random([1,4,5,6])) // 6console.log(random([1,4,0,6])) // 1
16、重定向到網(wǎng)址
這個片段是我最喜歡的片段，它會將你重定向到 URL。當(dāng)你重定向到網(wǎng)站時，這在 Web 開發(fā)中會派上用場。當(dāng)用戶執(zhí)行任何操作時。
const redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);redirect('https://medium.com/')redirect('https://codedev101.medium.com/')
17、列表的頭部元素
這段代碼將展示如何快速獲取任何列表的第一個元素。
const head = arr => arr[0];head([1,2,3]) // 1head(["JavaScript", "Python", "C++"]) // JavaScript
18、List的尾部元素
這段代碼將展示如何以簡單快捷的方式獲取任何列表的尾部元素。
const tail = arr => arr[arr.length - 1];console.log(tail([1,2,3])); // 1console.log(tail(["JavaScript", "Python", "C++"])); // JavaScript
19、最小數(shù)量
這段代碼將快速返回列表中最小的數(shù)字。
const minimum = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);console.log(minimum([2,4,6,1])) // 1console.log(minimum([22, 55, 66, 77, 11, 19])) // 11
20、 isUpper Case
當(dāng)你想檢查 String 是否為大寫時，此片段代碼將很有用。
const isUpperCase = str => str === str.toUpperCase();isUpperCase("Code") //falseisUpperCase("PROGRAMMING") //trueisUpperCase("aB") //false
21、 isLower Case
我們看到的這個大寫片段代碼將檢查字符串是否為小寫。
const isLowerCase = str => str === str.toLowerCase();isLowerCase("code") //trueisLowerCase("PROGRAMMING") //false
22、范圍生成器中的整數(shù)數(shù)組
這段代碼將向你展示如何生成一個帶有n數(shù)字且在一個范圍內(nèi)的隨機整數(shù)數(shù)組。檢查下面的代碼以了解它是如何工作的。
const randomIntArrayInRange = (min, max, n = 1) =>Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min);console.log(randomIntArrayInRange(10, 15, 5)); // [ 14, 11, 15, 10, 13 ]
23、 范圍生成器中的隨機整數(shù)
此片段代碼用于生成給定范圍內(nèi)的隨機整數(shù)。
const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;console.log(randomInteger(1,10)) // 6console.log(randomInteger(1,20)) // 8
24、 獲取類型
此片段代碼可用于檢查 JavaScript 中任何變量或值的類型。
const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();getType([3,4,5]) //arraygetType("JavaScript") //stringgetType(true) //boolean
25、 從數(shù)組中刪除重復(fù)項
這段代碼是從數(shù)組中刪除重復(fù)項的一種快速簡便的方法。
const filterNonUnique = arr => [...new Set(arr)];console.log(filterNonUnique([2,2,5,5,7,7,8])) // [2,5,7,8 ] console.log(filterNonUnique([1,2,3,2,3] ,6])) // [1,2,3,6]
26、半徑的度數(shù)
此片段代碼將向你展示如何以快速簡便的方式將度數(shù)轉(zhuǎn)換為半徑。
const degreeToRad = deg => (deg * Math.PI) / 180.0;degreeToRad(80.0) // 1.3962634015954636degreeToRad(360.0) // 6.283185307179586
27、 一年中的一天
此代碼段將返回一年中的哪一天。
const dayOfYear = date => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);dayOfYear(new Date()) // 140
28、從列表中刪除 False 元素
此代碼段方法將從列表中刪除 false 元素，如 null、false、0 或空元素。
const compactJs = arr => arr.filter(Boolean);compactJs([2,4,false,NaN,5,"",0]) //[2,4,5]
29、 檢查所有相等
此代碼段將檢查數(shù)組的所有元素是否相等。
const AllEqual = arr => arr.every(val => val === arr[0]);AllEqual([1, 2, 3]); // falseAllEqual([1, 2, 2]); // falseAllEqual([2, 2, 2]); // true
30、刪除元素
這段代碼是從左側(cè)的列表中刪除元素。
const drop = (arr, n = 1) => arr.slice(n);console.log(drop([2, 4, 6])) // [4, 6]console.log(drop([2, 4, 6], 2)) //[6]
31、爭取時間
此片段代碼將以字符串格式從數(shù)據(jù)對象返回當(dāng)前時間。
const getTime = date => date.toTimeString().slice(0, 8);getTime(new Date()) // "10:45:12"
32、 讀取文件行
此片段代碼將讀取文件并將其行以數(shù)組格式存儲。
const fs = require('fs');const readFileLines = filename =>fs.readFileSync(filename).toString('UTF8').split('\n');let arr = readFileLines('test.txt');console.log(arr); // ['line 1', 'line 2', 'line 3' ,'line 4]
最后的想法
我希望你覺得這篇文章有趣和有幫助。這些片段代碼將有助于初學(xué)者和當(dāng)前的 JavaScript 開發(fā)人員提高他們的JavaScript編程技能。
如果我錯過了任何有用的片段，請在留言區(qū)告訴。
感謝你的閱讀，祝 JavaScript 編程愉快！
學(xué)習(xí)更多技能
請點擊下方公眾號
