乐趣区

关于javascript:你现在可以使用的10个JavaScript代码段

jiezi

毫无疑问，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]

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 魔术来解决这些工作并不总是艰难的。

起源：公众号《前端全栈开发者》（ID：by-zhangbing-dev）

退出移动版