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

英文 | 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 问题。

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

学习更多技能

请点击下方公众号