你现在可以使用的10个JavaScript代码段

开发 前端
看看下面的代码片段,以优雅的方式解决简单的问题,并在日常项目情况下使用这些知识或为编码面试做准备。

毫无疑问,JavaScript是Web开发中最流行的编程语言之一。无论您使用的是React,Vue还是Angular,都只是JavaScript。围绕JS展开了广泛而重要的生态系统,提供了无数的框架和库,可帮助你更快地开发应用程序。

但是有时候最好退一步,尝试了解如何在没有库的情况下做事。看看下面的代码片段,以优雅的方式解决简单的问题,并在日常项目情况下使用这些知识或为编码面试做准备。

[[336137]]

1. 反转字符串

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

  1. const reverseString = string => [...string].reverse().join(''); 
  2.  
  3. // 例子 
  4. reverseString('javascript'); // 'tpircsavaj' 
  5. reverseString('good'); // 'doog' 

2. 计算数字的阶乘

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

  1. const factoriaOfNumber = number => number < 0 ? (() => { 
  2.   throw new TypeError('No negative numbers please'); 
  3. })() 
  4. : number <=1  
  5. ? 1 
  6. : number * factoriaOfNumber(number -1); 
  7.  
  8. // 例子 
  9. factoriaOfNumber(4); // 24 
  10. factoriaOfNumber(8); // 40320 

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

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

  1. const convertToArray = number => [...`${number}`].map(el => parseInt(el)); 
  2.  
  3. // 例子 
  4. convertToArray(5678); // [5, 6, 7, 8] 
  5. convertToArray(123456789); // [1, 2, 3, 4, 5, 6, 7, 8, 9] 

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

这很简单。我们检查该数字不是伪造的,并使用按位AND运算符(&)来确定数字是否为2的幂。

  1. const isNumberPowerOfTwo = number => !!number && (number & (number - 1)) == 0; 
  2.  
  3. // 例子 
  4. isNumberPowerOfTwo(100); // false 
  5. isNumberPowerOfTwo(128); // true 

5. 从对象创建键值对数组

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

  1. const keyValuePairsToArray = object => Object.keys(object).map(el => [el, object[el]]); 
  2.  
  3. // 例子 
  4. keyValuePairsToArray({ Better: 4, Programming: 2 }); 
  5. // [ ['Better', 4], ['Programming', 2] ] 
  6. keyValuePairsToArray({ x: 1, y: 2, z: 3 }); 
  7. // [ ['x', 1], ['y', 2], ['z', 3] ] 

6. 返回数组中的[Number]个最大元素

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

  1. const maxElementsFromArray = (array, number = 1) => [...array].sort((x, y) => y - x).slice(0, number); 
  2.  
  3. // 例子 
  4. maxElementsFromArray([1,2,3,4,5]); // [5] 
  5. maxElementsFromArray([7,8,9,10,10],2); // [10, 10] 

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

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

  1. const elementsAreEqual = array => array.every(el => el === array[0]); 
  2.  
  3. // 例子 
  4. elementsAreEqual([9,8,7,6,5]); // false 
  5. elementsAreEqual([4,4,4,4,4]); // true 

8. 返回两个数的平均值

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

  1. const averageOfTwoNumbers = (...numbers) => numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0) / numbers.length; 
  2.  
  3. // 例子 
  4. averageOfTwoNumbers(...[6,7,8]); // 7 
  5. averageOfTwoNumbers(6,7,8,9); // 7.5 

9. 返回两个或多个数字的总和

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

  1. const sumOfNumbers = (...array) => [...array].reduce((accumulator, currentValue) => accumulator + currentValue, 0); 
  2.  
  3. // 例子 
  4. sumOfNumbers(5,6,7,8,9.10); // 45 
  5. sumOfNumbers(...[1,2,3,4,5,6,7,8,9,10]); // 50 

10. 返回数字数组的幂集

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

  1. const powersetOfArray = array => array.reduce((accumulator, currentValue) => accumulator.concat(accumulator.map(el => [currentValue].concat(el))), [[]]); 
  2.  
  3. // 例子 
  4. powersetOfArray([4, 2]); // [[], [4], [2], [2, 4]] 
  5. powersetOfArray([1, 2, 3]); / 
  6. // [[], [1], [2], [2, 1], [3], [3, 1], [3, 2], [3, 2, 1]] 

如你所见,使用JavaScript和一些ES6魔术来解决这些任务并不总是困难的。

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2023-10-18 10:21:23

JavaScript前端

2019-07-02 10:36:30

JavaScript硬件开发

2022-06-21 12:27:12

JavaScript前端

2013-04-08 12:41:35

JavaScriptJS

2021-07-17 22:57:07

开发框架工具

2021-06-04 09:17:13

JavaScriptBoolean函数

2020-12-02 11:06:25

Windows 10Android

2011-10-08 13:54:27

JavaScript

2016-05-26 10:21:18

Windows 10配置性能

2011-07-20 09:29:34

2021-01-05 15:04:48

区块链稳定币货币

2020-11-11 07:52:04

CSS功能浏览器

2011-02-16 09:30:42

IPv6

2020-05-26 08:38:57

JavaScript语言

2015-11-06 14:54:10

程序员习惯

2016-05-06 10:02:33

CSSJavaScript工具

2021-06-30 00:14:24

JS代码数组

2023-01-27 15:22:11

JavaScript开发编程语言

2021-09-17 15:31:47

代码JavaScript数组

2022-09-21 12:46:39

开发JavaScrip代码
点赞
收藏

51CTO技术栈公众号