32个有用的JS 代码片段，让你的代码显得更专业
翻译 | 杨小二
JavaScript 无疑是 Web 开发中最流行的编程语言之一。无论你选择使用 Angular、jQuery、Vue.js 还是 React，JavaScript 在所有这些中都扮演着重要的角色。
由于 JavaScript 的庞大社区，它们拥有大量的内置库来解决你的日常问题。
在本文中，我们将研究 32 个片段，这些技巧可以让你更像 JavaScript 专家一样进行编程。我们将看到一些有趣的代码片段，它们将帮助你解决编程中的日常问题，并且你将学习如何进行通用编程。
其中一些你可能已经知道，但其中大部分都是新的并且很有趣，你可以学习。
1、字节大小
此代码段将显示你的字符串或整数的字节大小。简单来说，它会显示字符串或整数的长度。
const byteSize1 = str => new Blob([str]).size;
const byteSize2 = int => new Blob([int]).size;
byteSize1("JavaScript") // 10
byteSize2(101) // 32、转换为数组
这个简单的代码片段方法会将你的非数组值或数据转换为数组形式。
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'); //Code
capitalize('javascript programming'); //Javascript Programming4、 获取当前网址
此代码段将有助于获取运行 javascript 的当前 URL。这在前端调试中派上用场。
const currentURL = () => window.location.href;
currentURL() // https://medium.com/@codedev1015、数字化
这个是很棒的片段，它会将你的数字转换为数字数组。查看下面的代码示例。
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) // 3
countOccurrences([1,4,6,2,5,6], 6) // 27、字谜
此片段代码用于检查特定字符串是否为字谜。字谜是可以改写成另一个词的词。
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") // true
Anagram("part", "trap") // true8、检查浏览器标签焦点
此片段代码将告诉你当前运行 javaScript 的浏览器选项卡是否处于焦点状态。
const Browser_Tab_Focused = () => !document.hidden;
Browser_Tab_Focused(); // true9、检查浏览器
这段代码会告诉你运行 JavaScript 的环境是浏览器还是非浏览器。众所周知，我们可以在浏览器中运行 JavaScript，node js如果我们可以检查我们在哪个环境中工作，那就太好了。
const isBrowser = () => ![typeof window, typeof document].includes('undefined');
isBrowser() // true if on isBrowser
isBrowser() // false if we are on node js or any other environment10、检查空
这段代码将检查变量或值是否为空。
const checkNull = val => val === undefined || val === null;
checkNull() // true
checkNull(234) // false11、 isNumber
这个简单的片段代码将检查值的变量是否为数字。
function isNumeric(num) {
return !isNaN(parseFloat(num)) && isFinite(num);
}
isNumeric(324) //true
isNumeric("Code") // false12、 isString
此片段代码将检查变量或值是否为字符串。
const isString = val => typeof val === 'string';
isString('hello world'); // true
isString('1234'); // true
isString(345); // false13、最大数字
此代码段方法将返回列表中的最大数字。这是从列表中找到最大数字的最快方法。
const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
maxN([3,8,7]) // 8
maxN([1,5,6,23]) // 2314、反转
此片段代码只是反转字符串。这在你需要反转字符串或检查回文的简短任务中派上用场。
const reverseStr = str => [...str].reverse().join('');
console.log(reverseStr("JavaScript")) // tpircSavaJ
console.log(reverseStr("123")) // 32115、从列表中随机
此片段代码用于从列表中选择随机数。
const random = arr => arr[Math.floor(Math.random() * arr.length)];
console.log(random([1,4,5,6])) // 6
console.log(random([1,4,0,6])) // 116、重定向到网址
这个片段是我最喜欢的片段，它会将你重定向到 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]) // 1
head(["JavaScript", "Python", "C++"]) // JavaScript18、List的尾部元素
这段代码将展示如何以简单快捷的方式获取任何列表的尾部元素。
const tail = arr => arr[arr.length - 1];
console.log(tail([1,2,3])); // 1
console.log(tail(["JavaScript", "Python", "C++"])); // JavaScript19、最小数量
这段代码将快速返回列表中最小的数字。
const minimum = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
console.log(minimum([2,4,6,1])) // 1
console.log(minimum([22, 55, 66, 77, 11, 19])) // 1120、 isUpper Case
当你想检查 String 是否为大写时，此片段代码将很有用。
const isUpperCase = str => str === str.toUpperCase();
isUpperCase("Code") //false
isUpperCase("PROGRAMMING") //true
isUpperCase("aB") //false21、 isLower Case
我们看到的这个大写片段代码将检查字符串是否为小写。
const isLowerCase = str => str === str.toLowerCase();
isLowerCase("code") //true
isLowerCase("PROGRAMMING") //false22、范围生成器中的整数数组
这段代码将向你展示如何生成一个带有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)) // 6
console.log(randomInteger(1,20)) // 824、 获取类型
此片段代码可用于检查 JavaScript 中任何变量或值的类型。
const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
getType([3,4,5]) //array
getType("JavaScript") //string
getType(true) //boolean25、 从数组中删除重复项
这段代码是从数组中删除重复项的一种快速简便的方法。
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.3962634015954636
degreeToRad(360.0) // 6.28318530717958627、 一年中的一天
此代码段将返回一年中的哪一天。
const dayOfYear = date => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date()) // 14028、从列表中删除 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]); // false
AllEqual([1, 2, 2]); // false
AllEqual([2, 2, 2]); // true30、删除元素
这段代码是从左侧的列表中删除元素。
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 编程愉快！