你現在可以使用的10個JavaScript代碼段

雲棲號資訊：【點擊查看更多行業資訊】
在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！

---

毫無疑問，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魔術來解決這些任務並不總是困難的。

【雲棲號在線課堂】每天都有產品技術專家分享！
課程地址：https://yqh.aliyun.com/live

立即加入社羣，與專家面對面，及時瞭解課程最新動態！
【雲棲號在線課堂 社羣】https://c.tb.cn/F3.Z8gvnK

原文發佈時間：2020-08-01
本文作者：杜尼卜
本文來自：“掘金”，瞭解相關信息可以關注“掘金”