分享 13 个有用的 JavaScript 片段,提升你的工作效率

2023-08-31 09:02:30 浏览数 (1)

JavaScript 是您可以学习的最流行的语言之一。当我开始学习 JavaScript 时,我总是在 StackOverflow、medium 和其他博客上寻找代码片段。在这篇文章中,我将分享我发现它们有用的 15 个 JavaScript 代码片段。

1. 不循环地重复字符串

此 JS 片段将展示如何在不使用任何循环的情况下重复字符串。我们将使用 JS 构建的方法来重复(),通过在其中传递一个数字,该数字将充当您需要循环次数的数字。

代码语言:javascript复制
//Old Method
for(var i = 0; i<5; i  )
{
  console.log("") // 
}
// Best Method
console.log("".repeat(5)) //

2. 数组的区别

另一个很棒的片段可以让你在数组中脱颖而出。当您处理长数组并想了解该数组的相似点或不同点时,这会派上用场。下面的示例代码将加深您的理解,您可以在您的 JS 项目中自由使用该代码。

代码语言:javascript复制
//Code Example
function ArrayDiff(a, b){
  const setX = new Set(a)
  const setY = new Set(b)
return [
    ...a.filter(x=>!setY.has(x)),
    ...b.filter(x=>!setX.has(x))
  ]
}
  const Array1 = [1, 2, 3];
  const Array2 = [1, 2, 3, 4, 5];
console.log(ArrayDiff(Array1, Array2)) // [4, 5]

3. String是否为Json

当您需要检查数据是字符串还是 JSON 时,此代码片段会派上用场。假设您从服务器端收到响应并解析该数据,您需要检查它是 JSON 还是字符串。检查下面的代码片段。

代码语言:javascript复制
//Code Example
function isJSON(str)
{
  try
  {
      JSON.parse(str)
  }
  catch
  {
      return false
  }
return true
}
var str = "JavaScript"
console.log(isJSON(str)) //false

4. 简短的Console.log

厌倦了一次又一次地编写 console.log() 吗?不用担心这个片段会为您节省大量编写长 console.log() 的时间。

代码语言:javascript复制
var cl = console.log.bind(document)
cl(345) 
cl("JAVASCRIPT")
cl("PROGRAMMING") 
<--Give it a try!-->

5.全部替换

此代码片段将向您展示如何替换字符串中的单词,而无需迭代每个单词、匹配它并放置新单词。下面的代码片段使用了replaceAll(Target Word, New Word)方法。

代码语言:javascript复制
//Code Example
var str = "Python is a Programming Language, Python is a top programming language and favourite of every developer"
str = str.replaceAll("Python", "JavaScript")
console.log(str) // JavaScript is a Programming Language, JavaScript 5is a top programming language and favourite of every developer

6. 数字到数字数组

此代码片段对于将数字转换为数字数组非常有用。使用带映射的扩展运算符,我们可以在一秒钟内完成此操作。试一试:

代码语言:javascript复制
//example code
const NumberToArray = number => [...`${number}`].map(i => parseInt(i));
console.log(NumberToArray(86734)) //[8,6,7,3,4]
console.log(NumberToArray(1234)) //[1,2,3,4]
console.log(NumberToArray(9000)) //[9,0,0,0]

7. 数字转二进制

此代码片段将使用 toString() 方法将数字简单地转换为二进制。看一下下面的代码示例。

代码语言:javascript复制
var n1 = 500
console.log(n1.toString(2)) // 111110100
var n2 = 4
console.log(n2.toString(2)) // 100
var n3 = 5004
console.log(n3.toString(2)) // 1001110001100

8.从数组中删除元素

当您需要从数组中删除元素时,此代码片段会派上用场。在下面的代码片段示例中,我们使用了 array.slice() 内置方法。

代码语言:javascript复制
const DropElement = (array, num = 1) => array.slice(num);
console.log(DropElement([2,45,6,7],2)) //[6, 7]
console.log(DropElement([2,45,6,7],1)) //[45, 6, 7]

9. 反转字符串

现在您不需要循环遍历字符串来反转它。此代码片段将展示如何使用扩展运算符(…)和reverse()函数来反转字符串。这在反转大字符串时非常方便,您需要为此提供快速的代码片段。检查下面的代码示例。

代码语言:javascript复制
//example code
function Reverse(str){
return [...str].reverse().join('');
}
console.log(Reverse("data")) //atad
console.log(Reverse("Code")) //edoC

10、 展平深度数组

展平数组是将任何有序数组和二维数组转换为一维数组的过程。简而言之,您可以减少数组的维数。您已经看过“展平数组”片段代码,但是深度展平数组又如何呢?当您有一个大的有序数组并且正常的展平对其不起作用时,此代码片段非常有用。为此,您需要深度平整。

代码语言:javascript复制
//example code
function DeepFlat(array)
{
  return [].concat(...array.map(value=>  (Array.isArray(value) ? DeepFlat(value) : value)));
}
console.log(DeepFlat([1,[2,[4,6,6,[9]],0,],1])) // [1, 2, 4, 6, 6, 9, 0, 1]

11.计算字节大小

每个程序员都希望他们的 JavaScript 程序高效并具有良好的性能。为此,我们需要确保拥有一定大小的数据,不会使内存过载。查看下面的代码片段,了解如何检查任何数据的字节。

代码语言:javascript复制
// byte size calculation
const ByteSize = string => new Blob([string]).size;
console.log(ByteSize("Codding")) // 7 
console.log(ByteSize(true)) // 4
console.log(ByteSize("")) // 4

12. 数组到 CSV

CSV 是当今广泛使用的电子表格,您可以使用如下所示的简单代码片段将数组转换为 CSV。

代码语言:javascript复制
// Code Example
const ArrayToCsv= (array, delimiter =',')=> array.map(value => value.map(num => `"${num}"`).join(delimiter)).join('n');
console.log(ArrayToCsv([['name', 'age'], ['haider', '22'], ['Peter', '23']]))
// Output
// "name","age"
// "haider","22"
// "Peter","23"

13. 数组的最后一个元素

现在您不再需要迭代或循环整个数组并提取最后一个元素。您可以使用下面的简单代码片段执行相同的操作。

代码语言:javascript复制
//code example
const LastElement = array => array[array.length - 1];
console.log(LastElement([2,3,4])) // 4
console.log(LastElement([2,3,4,5])) // 5
console.log(LastElement([2,3])) // 3

结束

由于文章内容篇幅有限,今天的内容就分享到这里,文章结尾,我想提醒您,文章的创作不易,如果您喜欢我的分享,请别忘了点赞和转发,让更多有需要的人看到。同时,如果您想获取更多前端技术的知识,欢迎关注我,您的支持将是我分享最大的动力。我会持续输出更多内容,敬请期待。

0 人点赞