32个有用的JS 代码片段，让你的代码显得更专业
前端达人
共 6746字，需浏览 14分钟
·
2021-07-05 04:09
1、字节大小
const byteSize1 = str => new Blob([str]).size;const byteSize2 = int => new Blob([int]).size;byteSize1("JavaScript") // 10byteSize2(101) // 3
2、转换为数组
这个简单的代码片段方法会将你的非数组值或数据转换为数组形式。
const convertToArray = val => (Array.isArray(val) ? val : [val]);convertToArray("Pro") // [Pro]convertToArray(101) // [101]
3、大写
此代码段方法将以大写形式转换字符串中字符的每个第一个字母。检查下面的代码以了解它是如何工作的。
const capitalize = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());capitalize('code'); //Codecapitalize('javascript programming'); //Javascript Programming
4、 获取当前网址
此代码段将有助于获取运行 javascript 的当前 URL。这在前端调试中派上用场。
const currentURL = () => window.location.href;currentURL() // https://medium.com/@codedev101
5、数字化
这个是很棒的片段，它会将你的数字转换为数字数组。查看下面的代码示例。
const digitize = n => [...`${n}`].map(i => parseInt(i));digitize(345) // [3,4,5]digitize(123) // [1,2,3]digitize(6) // [6]
6、计数出现次数
此片段代码将计算数组中某个值的出现次数。当你想知道一个值在大尺寸数组中出现多少次时，这会派上用场。
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、检查浏览器标签焦点
此片段代码将告诉你当前运行 javaScript 的浏览器选项卡是否处于焦点状态。
const Browser_Tab_Focused = () => !document.hidden;Browser_Tab_Focused(); // true
9、检查浏览器
这段代码会告诉你运行 JavaScript 的环境是浏览器还是非浏览器。众所周知，我们可以在浏览器中运行 JavaScript，node js如果我们可以检查我们在哪个环境中工作，那就太好了。
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
这个简单的片段代码将检查值的变量是否为数字。
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、最大数字
此代码段方法将返回列表中的最大数字。这是从列表中找到最大数字的最快方法。
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、反转
此片段代码只是反转字符串。这在你需要反转字符串或检查回文的简短任务中派上用场。
const reverseStr = str => [...str].reverse().join('');console.log(reverseStr("JavaScript")) // tpircSavaJconsole.log(reverseStr("123")) // 321
15、从列表中随机
此片段代码用于从列表中选择随机数。
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、重定向到网址
这个片段是我最喜欢的片段，它会将你重定向到 URL。当你重定向到网站时，这在 Web 开发中会派上用场。当用户执行任何操作时。
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、最小数量
这段代码将快速返回列表中最小的数字。
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
当你想检查 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、范围生成器中的整数数组
这段代码将向你展示如何生成一个带有n数字且在一个范围内的随机整数数组。检查下面的代码以了解它是如何工作的。
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、 范围生成器中的随机整数
此片段代码用于生成给定范围内的随机整数。
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、 从数组中删除重复项
这段代码是从数组中删除重复项的一种快速简便的方法。
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、半径的度数
此片段代码将向你展示如何以快速简便的方式将度数转换为半径。
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、 检查所有相等
此代码段将检查数组的所有元素是否相等。
const AllEqual = arr => arr.every(val => val === arr[0]);AllEqual([1, 2, 3]); // falseAllEqual([1, 2, 2]); // falseAllEqual([2, 2, 2]); // true
30、删除元素
这段代码是从左侧的列表中删除元素。
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、争取时间
此片段代码将以字符串格式从数据对象返回当前时间。
const getTime = date => date.toTimeString().slice(0, 8);getTime(new Date()) // "10:45:12"
32、 读取文件行
此片段代码将读取文件并将其行以数组格式存储。
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]
最后的想法
我希望你觉得这篇文章有趣和有帮助。这些片段代码将有助于初学者和当前的 JavaScript 开发人员提高他们的JavaScript编程技能。
如果我错过了任何有用的片段，请在留言区告诉。
感谢你的阅读，祝 JavaScript 编程愉快！
学习更多技能
请点击下方公众号
评论