32个有用的JS 代码片段，让你的代码显得更专业

矫情吗；* 2022-10-11 03:39 131阅读 0赞

![17632fdbb7101ff4ef91c63d85e2cfe6.png][]

英文 | https://javascript.plainenglish.io/32-useful-snippets-to-code-like-a-pro-in-javascript-c8b5be11752f

翻译 | 杨小二

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) // 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'); //Code
    capitalize('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) // 3 
    countOccurrences([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") // true
    Anagram("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 isBrowser
    isBrowser() // false  if we are on node js or any other environment

## **10、检查空** ##

这段代码将检查变量或值是否为空。

const checkNull = val => val === undefined || val === null;
    checkNull() // true
    checkNull(234) // false

## **11、 isNumber** ##

这个简单的片段代码将检查值的变量是否为数字。

function isNumeric(num) { 
      return !isNaN(parseFloat(num)) && isFinite(num); 
    }
    isNumeric(324) //true 
    isNumeric("Code") // false

## **12、 isString** ##

此片段代码将检查变量或值是否为字符串。

const isString = val => typeof val === 'string';
    isString('hello world'); // true
    isString('1234'); // true
    isString(345); // false

## **13、最大数字** ##

此代码段方法将返回列表中的最大数字。这是从列表中找到最大数字的最快方法。

const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
    maxN([3,8,7]) // 8 
    maxN([1,5,6,23]) // 23

## **14、反转** ##

此片段代码只是反转字符串。这在你需要反转字符串或检查回文的简短任务中派上用场。

const reverseStr = str => [...str].reverse().join('');
    console.log(reverseStr("JavaScript")) // tpircSavaJ 
    console.log(reverseStr("123")) // 321

## **15、从列表中随机** ##

此片段代码用于从列表中选择随机数。

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])) // 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]) // 1 
    head(["JavaScript", "Python", "C++"]) // JavaScript

## **18、List的尾部元素** ##

这段代码将展示如何以简单快捷的方式获取任何列表的尾部元素。

const tail = arr => arr[arr.length - 1];
    console.log(tail([1,2,3])); // 1 
    console.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]))   // 1
    console.log(minimum([22, 55, 66, 77, 11, 19]))  // 11

## **20、 isUpper Case** ##

当你想检查 String 是否为大写时，此片段代码将很有用。

const isUpperCase = str => str === str.toUpperCase();
    isUpperCase("Code") //false 
    isUpperCase("PROGRAMMING") //true 
    isUpperCase("aB") //false

## **21、 isLower Case** ##

我们看到的这个大写片段代码将检查字符串是否为小写。

const isLowerCase = str => str === str.toLowerCase();
    isLowerCase("code") //true 
    isLowerCase("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)) // 6 
    console.log(randomInteger(1,20)) // 8

## **24、 获取类型** ##

此片段代码可用于检查 JavaScript 中任何变量或值的类型。

const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
    getType([3,4,5]) //array
    getType("JavaScript")  //string
    getType(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.3962634015954636 
    degreeToRad(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]); // false
    AllEqual([1, 2, 2]); // false
    AllEqual([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 编程愉快！

#  #

**学习更多技能**

**请点击下方公众号**

![51a732f80f0db451253113adb0451e6e.gif][]

[17632fdbb7101ff4ef91c63d85e2cfe6.png]: /images/20221005/0c808973b54e47b9b1bda5b89609cc1c.png
[51a732f80f0db451253113adb0451e6e.gif]: /images/20221005/a378b519d7ba444881190759cd3d457c.png