15 个有用的 JavaScript 代码段

2024-01-16 06:38
文章标签 java 15 script 有用 代码段

本文主要是介绍15 个有用的 JavaScript 代码段,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

英文 | https://levelup.gitconnected.com/15-useful-javascript-snippets-you-can-understand-in-15-seconds-3aa244d9c326

翻译 | 杨小二

JavaScript 是你学习编程,可以选择学习的最流行的语言之一。当我开始学习 JavaScript 时,我总是在 StackOverflow、Medium 和其他博客上寻找优秀解决方案来处理实际开发中遇到的问题。在本文中,我将分享我发现的15个有用的JavaScript 代码段。

1、不循环地重复一个字符串

此 JavaScript 代码段将展示如何在不使用任何循环的情况下重复字符串。我们将通过JavaScript 中的repeat()方法来构建一个数字,该数字将作为你需要的数字副本。

//Old Method
for(var i = 0; i<5; i++)
{console.log("????") // ????????????????????
}
// Best Method
console.log("????".repeat(5)) //????????????????????

2、 数组的差异

这一个很棒的代码片段,可以帮助你区分数组。当你处理一个长数组并想知道该数组的相似之处或不同之处时,这个会派上用场。

下面的示例代码将帮助你更加清晰理解,你可以在你的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 还是字符串。下面的代码片段。

//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()。

var cl = console.log.bind(document)
cl(345) 
cl("JAVASCRIPT")
cl("PROGRAMMING") 
<--Give it a try!-->

5、全部替换

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

//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、将数字转换数字数组

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

//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、检查数字是否为 2 的幂

现在,此代码段将帮助你检查是否为 2 的幂。尝试从下面的示例代码中理解它。

//example code
const isPowerTwo = n => !!n &&( n & (n - 1) ) == 0;
console.log(isPowerTwo(3)) //true
console.log(isPowerTwo(8)) //true
console.log(isPowerTwo(4)) //true

8、数字转换为二进制

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

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

9、返回数组的幂集

此代码段将返回你的任何数字数组的 Powerset。检查下面的代码片段以获得更好的理解。

//example code
const PowerSet = array => array.reduce((accumalator, current) => accumalator.concat(accumalator.map(n => [current].concat(n))), [[]]);
console.log(PowerSet([1,2]))

10、从数组中删除元素

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

//example code
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]

11、反转字符串

现在你不需要循环遍历字符串来反转它。此代码段将展示如何使用扩展运算符 (...) 和 reverse() 函数来反转字符串。

这在反转大字符串时会派上用场,你需要为此提供快速片段代码。检查下面的代码示例。

//example code
function Reverse(str){
return [...str].reverse().join('');
}
console.log(Reverse("data")) //atad
console.log(Reverse("Code")) //edoC

12、深度扁平化阵列

展平数组是将任何有序数组和二维数组转换为一维数组的过程。简而言之,你可以降低数组的维数。你已经看过 Flatten Array 片段代码,但是深展平数组呢。

当你有一个大的有序数组并且正常的展平对它不起作用时,此代码段非常有用。为此,你将需要一个深展平。

//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]

13、计算字节大小

每个程序员的目标都是让他们的 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

14、数组转为CSV

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

// 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"

15、数组的最后一个元素

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

//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

最后的想法

以上就是我今天与你分享的15个JavaScript代码片段,我希望你喜欢这篇文章,并从这篇文章中学到一些新东西。

最后,如果你觉得今天内容对你有帮助,请与你的 JavaScript 开发人员朋友分享 它。

感谢你的阅读。

学习更多技能

请点击下方公众号

这篇关于15 个有用的 JavaScript 代码段的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/611625

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Java中的@SneakyThrows注解用法详解

《Java中的@SneakyThrows注解用法详解》:本文主要介绍Java中的@SneakyThrows注解用法的相关资料,Lombok的@SneakyThrows注解简化了Java方法中的异常... 目录前言一、@SneakyThrows 简介1.1 什么是 Lombok?二、@SneakyThrows