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

Bertha 。 2023-03-04 09:27 17阅读 0赞

毫无疑问，JavaScript是Web开发中最流行的编程语言之一。无论您使用的是React，Vue还是Angular，都只是JavaScript。围绕JS展开了广泛而重要的生态系统，提供了无数的框架和库，可帮助你更快地开发应用程序。  
但是有时候最好退一步，尝试了解如何在没有库的情况下做事。看看下面的代码片段，以优雅的方式解决简单的问题，并在日常项目情况下使用这些知识或为编码面试做准备。

1.反转字符串  
在此示例中，我们使用扩展运算符（…），Array的reverse方法和String的join方法来反转给定的字符串。

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

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

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

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

const convertToArray = number => [...`${number}`].map(el => parseInt(el));
    
    // 例子
    convertToArray(5678); // [5, 6, 7, 8]
    convertToArray(123456789); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
    我目前是在职前端开发，如果你现在也想学习前端开发技术，
    在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，
    你都可以申请加入我的前端学习交流裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学
    前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，
    PDF文档书籍教程，需要的话都可以自行来获取下载。

4.检查数字是否为2的幂  
这很简单。我们检查该数字不是伪造的，并使用按位AND运算符（＆）来确定数字是否为2的幂。

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

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

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

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

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

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

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

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

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

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

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

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

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

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