首页 > 编程语言 >10个JavaScript代码片段,帮助你成为更好的开发者

10个JavaScript代码片段,帮助你成为更好的开发者

时间:2022-12-25 15:34:04浏览次数:74  
标签:返回 10 数字 示例 JavaScript 运算符 开发者 数组 Array

10个JavaScript代码片段,帮助你成为更好的开发者_数字转换

英文 | ​​https://medium.com/better-programming/10-javascript-code-snippets-you-can-use-right-now-e1bb7c7ec35e​

翻译 | web前端开发(ID:web_qdkf)

毫无疑问,JavaScript是Web开发中最流行的编程语言之一。无论你使用的是React,Vue还是Angular,它们都属于JavaScript。JS围绕着广阔而至关重要的生态系统发展,提供了许多的框架和库,可帮助你快速地开发应用程序。

但是有时最好退后一步,尝试了解如何在没有库的情况下进行操作。看看下面的代码片段,它们以优雅的方式解决了简单的问题,并在日常项目情况下使用了这些知识,可以为编写代码提升工作效率。

10个JavaScript代码片段,帮助你成为更好的开发者_运算符_02

1、反转字符串

在此示例中,我们使用了散布运算符(…),Array的reverse方法和String的join方法来反转给定的字符串。

10个JavaScript代码片段,帮助你成为更好的开发者_运算符_03

2、计算数字的阶乘

要计算给定数字的阶乘,我们使用箭头函数和嵌套三元运算符。

10个JavaScript代码片段,帮助你成为更好的开发者_运算符_04

3、将数字转换为数字数组

在此示例中,我们使用了散布运算符(…),Array的map方法以及将该给定数字转换为一个单数数组的parseInt 函数 。

10个JavaScript代码片段,帮助你成为更好的开发者_数字转换_05

4、检查数字是否为2的幂

这很简单。我们检查这number不是虚假的,并使用按位AND运算符 (&)确定是否number为2的幂。

10个JavaScript代码片段,帮助你成为更好的开发者_运算符_06

5、从对象创建键-值对数组

在此示例中,我们使用Object中的keys方法和 Array中的map方法来映射Object的键,并创建一个键值对数组。

10个JavaScript代码片段,帮助你成为更好的开发者_数字转换_07


6、从数组中返回[Number]个最大元素

为了从数组中返回最大元素,我们使用了一个箭头函数,该函数获取数组和希望函数返回的元素数。我们使用了散布运算符(…)以及Array中的sort和slice方法。请注意,如果不提供第二个参数,则number默认值为1,因此仅返回一个最大元素。

10个JavaScript代码片段,帮助你成为更好的开发者_数组_08

7、检查数组中的所有元素是否相等

在这个简短的示例中,我们使用Array中的every方法检查数组中的所有元素是否相等。我们基本上检查每个元素是否等于数组中的第一个元素。

10个JavaScript代码片段,帮助你成为更好的开发者_运算符_09

8、返回两个数的平均值

在此示例中,我们使用了spread运算符(…)和Array中的reduce方法来返回两个给定数字或一个数组的平均值。

10个JavaScript代码片段,帮助你成为更好的开发者_运算符_10

9、返回两个或多个数字的和

要返回两个或多个给定数字或一个数组的总和,我们再次使用散布运算符(…) 和 Array中的reduce方法。

10个JavaScript代码片段,帮助你成为更好的开发者_数字转换_11

10、返回数字数组的幂集

在最后一个示例中,我们要返回数字数组的幂集。因此,我们使用Array中的reduce,map和concat方法。

10个JavaScript代码片段,帮助你成为更好的开发者_数字转换_12

如上所见,使用JavaScript和一些ES6魔术来解决这些任务并不困难的。希望对你有帮助。


10个JavaScript代码片段,帮助你成为更好的开发者_数组_13

10个JavaScript代码片段,帮助你成为更好的开发者_运算符_14

标签:返回,10,数字,示例,JavaScript,运算符,开发者,数组,Array
From: https://blog.51cto.com/u_15809510/5968182

相关文章

  • 10个超级实用的JavaScript开发技巧
    英文| https://blog.bitsrc.io/10-super-useful-tricks-for-javascript-developers-f1b76691199b翻译|web前端开发众所周知,JavaScript一直在迅速变化。借助新的ES2020,......
  • 【开发小技巧】13—如何使用HTML CSS和JavaScript创建图像动画?
    英文| https://www.geeksforgeeks.org/how-to-create-image-lightbox-gallery-using-html-css-and-javascript/?ref=rp翻译|web前端开发你可以对JavaScript进行编码,但是......
  • 如何使用JavaScript对数字数组进行排序?
    英文| https://www.geeksforgeeks.org/how-to-sort-numeric-array-using-javascript/翻译|web前端开发(ID:web_qdkf)所述的JavaScript的Array.sort()方法被用来就地数组元......
  • AT_jag2018summer_day2_a 10^N+7 题解
    题目传送门题目大意有三个非负整数$x,y,z$,找到符合以下条件的最小非负整数\(n\);$n\{\rm\mod}\10^1+7\=\x$$n\{\rm\mod}\10^2+7\=\y$$n\{\rm\mo......
  • 15个必须知道的JavaScript数组方法
    原文| https://www.ibrahima-ndaw.com/blog/15-must-known-javascript-array-methods-in-2020/译文|杨小二在JavaScript中,数组是一个特殊的变量,用于存储不同的元素。它......
  • 学会使用这10个有用的Web API,让你的开发效率瞬间提升10倍
    英文| https://blog.bitsrc.io/10-useful-web-apis-for-2020-8e43905cbdc5翻译| web前端开发(如WebWorker,Fetch等),但是我个人更喜欢使用其他一些不太流行的API,我建议你也尝......
  • 安卓编程pdf电子书100本.pdf
      安卓编程pdf电子书100本.pdf孔子家 ​关注  1、Androidstudio开发实战:从零基础到app上线:第2版_欧阳燊.pdf2、Android全埋点解决方案_王灼......
  • 您应该知道的11个JavaScript和TypeScript速记
    英文| https://blog.bitsrc.io/11-javascript-and-typescript-shorthands-you-should-know-690a002674e0在编写简洁高效的代码与编写仅可读的代码之间有一条很好的界限。......
  • 107条Javascript的常用语句
    1、document.write(""); 输出语句2、JS中的注释为//3、传统的HTML文档顺序是:document->html->(head,body)4、一个浏览器窗口中的DOM顺序是:window->(navigator,screen,......
  • 教你用JavaScript实现搜索展开
    欢迎来的我的小院,恭喜你今天又要涨知识了!案例内容利用JavaScript实现搜索框的移动展开。演示学习<!DOCTYPEhtml><htmllang="en"><head><metacharset=......