20 个JavaScript基本代码片段，解决你日常开发中的常见问题

拼搏现实的明天。 2022-09-08 11:33 162阅读 0赞

![90e4774484c4663324018ae7f91c20f8.png][]

英文 | https://levelup.gitconnected.com/20-essential-snippets-to-code-like-a-pro-in-javascript-c7a6ef4dbddc

翻译 | 杨小二

在本文中，我将分享 20 个解决实际问题的 JavaScript 代码片段，你在日常开发编程中也会遇到的问题。

**1、对数组进行排序**

当你想通过使用 JavaScipt 内置排序方法快速排序数组而不编写长排序函数时，此代码段非常有用。

const months = ['March', 'Jan', 'Feb', 'Dec'];
    const numbers = [5, 7, 1, 0, 13, 10]
    months.sort();
    numbers.sort();
    console.log(months);  //["Dec", "Feb", "Jan", "March"]
    console.log(numbers); //[0, 1, 10, 13, 5, 7]

**2、计数出现次数**

这个有用的代码片段将计算数组中每个元素的出现次数。当你需要知道每个项目在数组中出现的次数时，这会派上用场。

const Occurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
    console.log(Occurrences([1, 4, 5, 5, 1, 3], 1))  // 2
    console.log(Occurrences([2, 5, 5, 6, 7, 6, 6], 6)) // 3

**3、反转字符串**

我将使用以下代码片段向你展示在 JavaScript 中反转字符串的简单方法。

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

**4、从列表中获取随机数**

当我们需要从一长串数字中获取一个随机数时，这个片段会派上用场。

const randomNum = array => array[Math.floor(Math.random() * array.length)];
    console.log(randomNum([5, 6, 10, 23, 1])) // 23
    console.log(randomNum([3, 5, 7, 1, 2])) // 7

**5、最小数组数**

每天我们都必须解决一个问题，即我们需要在大数组或小数组中找到最小的。为了在不使用任何循环的情况下以简单快捷的方式执行此操作，我在下面提供了一个显示代码示例。

const minimumNum = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
    console.log(minimumNum([4, 3, 2, 1, 0]))   // 1
    console.log(minimumNum([12, 34, 12, 5, 7]))  //

**6、最大数组数**

此代码段有助于在短时间内找到数组中的最大值，而无需使用额外的循环。

const LargestNum = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
    LargestNum([12, 34, 78]) // 78
    LargestNum([1, 4, 5, 3, 2]) // 5
    LargestNum([2, 0, 3]) // 3

**7、转换为数组**

此代码段将 JavaScript 中的不同数据类型转换为数组格式。当你需要将字符串转换为数组以对其应用不同的函数时，这会派上用场。

const ConvertToArray = val => (Array.isArray(val) ? val : [val]);
    console.log(ConvertToArray("JavaScript")) // [JavaScript]
    console.log(ConvertToArray(1000)) // [1000]
    console.log(ConvertToArray(true)) // [true]

**8、字节大小**

你总是需要计算任何字符串或整数的大小。

const byteSize1 = str => new Blob([str]).size;
    const byteSize2 = int => new Blob([int]).size;
    byteSize1("Coding") // 6
    byteSize2(1234) // 4
    byteSize2('12344') // 5

**9、数字化整数**

此片段代码可用于将整数转换为数组格式。简单来说，你可以将整数中的每个数字划分为数组索引，例如 301 → \[3, 0, 1\]

const Digitize = n => [...`${n}`].map(i => parseInt(i));
    console.log(Digitize(576)) // [5,7,6]
    console.log(Digitize(89)) // [8,9
    console.log(Digitize(8)) // [6]

**10、检查空**

假设你正在使用 Web 后端，并且正在创建检查空值的条件，那么，此片段代码将会派上用场。

const checkNull = val => val === undefined || val === null;
    checkNull() // true
    checkNull(835) // false
    checkNull("JavaScript") // false

**11、删除列表中的重复项**

从标题中的这个片段代码你就会知道我们将从列表中删除重复项。

const RemoveDupli = arr => [...new Set(arr)];
    console.log(RemoveDupli([2, 2, 2, 5, 1, 0, 2])) // [2,5,1,0]
    console.log(RemoveDupli([9, 6, 7, 8, 8, 6]))  // [9,6,7,8]

**12、交换值**

这段代码将展示如何在不创建第三个变量 (temp) 的情况下以更快的方式交换值。检查下面的代码示例。

let a = 5, b = 9;
    [a,b] = [b,a];
    console.log(a, b)  // 9 5

**13、错误处理**

有时，我们面临的错误异常难以察觉，因为它们是突然的错误。如果你正在处理 API，有时会出现 404 错误，在这种情况下，你可以使用 JavaScript 的错误处理语句。

try {
      try_statements
    }
    catch (exception_var) {
      catch_statements
    }
    finally {
      finally_statements
    }

**14、合并数组**

这段代码将帮助你将两个数组合并为一个数组。这是一种简单快捷的方法，无需每个迭代并可将它们放置在新数组中。

const lang1 = ["JavaScript", "Python", "C++"];
    const lang2 = ["C#", "Dart", "Java"];
    const merge = [...lang1, ...lang2];
    console.log(merge); // [""JavaScript", "Python", "C++", "C#", "Dart", "Java"]

**15、清空数组**

当你需要在短时间内清空数组时，此片段代码将很有帮助。检查以下代码以了解如何操作。

var array = ["Haider", "Jeff", "Jessica", "Tadashi"];
    array.length = 0; //making size zero
    console.log(array) // [] array is now empty

**16、缩短数组**

你知道有一种简单的方法来缩短你的数组吗？这个代码片段将通过一个示例代码向你展示如何做到这一点。

var items = [4, 5, 7, 8, 2, 1, 3, 6];
    items.length = 3
    console.log(items) //[4, 5, 7]

**17、数据类型转换**

这段代码使用内置的 JavaScript 方法简单地将字符串转换为整数，并将整数转换为字符串。

// converting string to number
    let string2 = "903"
    let num = Number(string2)
    // converting number to string
    let num = 49
    let string1 = num.toString();

**18、性能检测**

有时你需要知道你的代码完成其执行需要多少时间。查看下面的代码示例，则可以帮助你完成检测工作。

const startTime = performance.now();
    something();
    const endTime = performance.now();
    console.log("Cpde take ${startTime - endTime} milliseconds")

**19、替换字符串中的字符**

这段代码使用正则表达式在短时间内替换字符串中的特定字符。

var string = "JavaScript"; 
    
    
    console.log(string.replace(/Script/, "code"));  //Javacode

**20、删除字符串中的空格**

这段代码将使用 JavaScript 中的 regex 方法从字符串中删除空格。当你从 Internet 获取原始数据并且其中包含制表符和空格时，这会派上用场。

var str = " a b    c  d   e   f g   hi j ";
    var newStr = str.replace(/\s+/g, '');
    console.log(newStr)

**最后的想法**

我希望你能从这篇文章中学到一些新东西。好吧，本文旨在帮助你解决在日常开发编程中可能遇到的一些基本 JavaScript 问题。

感谢你的阅读，祝编程快乐！

#  #

**学习更多技能**

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

![a37efc1f60551fc62d8a61353ef29b5d.gif][]

![4f218f1db239f4939721ce8ff7a5ac20.png][]

![0734f1204d828e890ad44988696eee1b.png][]

[90e4774484c4663324018ae7f91c20f8.png]: /images/20220829/445bbdbed831457386e7dd899b2acd62.png
[a37efc1f60551fc62d8a61353ef29b5d.gif]: /images/20220829/397cf1baf66b4990a1c1a394732b397f.png
[4f218f1db239f4939721ce8ff7a5ac20.png]: /images/20220829/aef7aa0d280d4ebb8dd7221df92cb806.png
[0734f1204d828e890ad44988696eee1b.png]: /images/20220829/611b451913364a8c98e2581e484a053b.png