毫无疑问,JavaScript是Web开发中最流行的编程语言之一。不管您使用的是React,Vue仍是Angular,都只是JavaScript。围绕JS展开了普遍而重要的生态系统,提供了无数的框架和库,可帮助你更快地开发应用程序。javascript
可是有时候最好退一步,尝试了解如何在没有库的状况下作事。看看下面的代码片断,以优雅的方式解决简单的问题,并在平常项目状况下使用这些知识或为编码面试作准备。前端
在此示例中,咱们使用扩展运算符(…
),Array的reverse方法和String的join方法来反转给定的字符串。java
const reverseString = string => [...string].reverse().join(''); // 例子 reverseString('javascript'); // 'tpircsavaj' reverseString('good'); // 'doog'
要计算给定数字的阶乘,咱们使用箭头函数和嵌套三元运算符。面试
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
在此示例中,咱们使用扩展运算符(…
),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]
这很简单。咱们检查该数字不是伪造的,并使用按位AND运算符(&
)来肯定数字是否为2的幂。数组
const isNumberPowerOfTwo = number => !!number && (number & (number - 1)) == 0; // 例子 isNumberPowerOfTwo(100); // false isNumberPowerOfTwo(128); // true
在此示例中,咱们使用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] ]
为了从数组中返回最大元素,咱们使用了一个箭头函数,该函数获取数组和咱们但愿函数返回的元素数。咱们使用扩展运算符(…
)以及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]
在这个简短的示例中,咱们使用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
在此示例中,咱们使用了扩展运算符(…
)和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
要返回两个或多个给定数字或一个数组的总和,咱们再次使用扩展运算符(…
)和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
在最后一个示例中,咱们要返回数字数组的幂集。所以,咱们使用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魔术来解决这些任务并不老是困难的。
来源:公众号《前端全栈开发者》(ID:by-zhangbing-dev)