你現(xiàn)在可以使用的10個JavaScript代碼段

2020-7-5    seo達(dá)人

毫無疑問,JavaScript是Web開發(fā)中最流行的編程語言之一。無論您使用的是React,Vue還是Angular,都只是JavaScript。圍繞JS展開了廣泛而重要的生態(tài)系統(tǒng),提供了無數(shù)的框架和庫,可幫助你更快地開發(fā)應(yīng)用程序。


但是有時候最好退一步,嘗試了解如何在沒有庫的情況下做事??纯聪旅娴拇a片段,以優(yōu)雅的方式解決簡單的問題,并在日常項目情況下使用這些知識或為編碼面試做準(zhǔn)備。


1.反轉(zhuǎn)字符串

在此示例中,我們使用擴(kuò)展運算符(…),Array的reverse方法和String的join方法來反轉(zhuǎn)給定的字符串。


const reverseString = string => [...string].reverse().join('');


// 例子

reverseString('javascript'); // 'tpircsavaj'

reverseString('good'); // 'doog'

2.計算數(shù)字的階乘

要計算給定數(shù)字的階乘,我們使用箭頭函數(shù)和嵌套三元運算符。


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.將數(shù)字轉(zhuǎn)換為數(shù)字?jǐn)?shù)組

在此示例中,我們使用擴(kuò)展運算符(…),Array的map方法和 parseInt 函數(shù)將給定的數(shù)字轉(zhuǎn)換為一個單數(shù)的數(shù)組。


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.檢查數(shù)字是否為2的冪

這很簡單。我們檢查該數(shù)字不是偽造的,并使用按位AND運算符(&)來確定數(shù)字是否為2的冪。


const isNumberPowerOfTwo = number => !!number && (number & (number - 1)) == 0;


// 例子

isNumberPowerOfTwo(100); // false

isNumberPowerOfTwo(128); // true

5.從對象創(chuàng)建鍵值對數(shù)組

在此示例中,我們使用Object中的keys方法和Array中的map方法來映射Object的鍵并創(chuàng)建鍵/值對數(shù)組。


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.返回數(shù)組中的[Number]個最大元素

為了從數(shù)組中返回最大元素,我們使用了一個箭頭函數(shù),該函數(shù)獲取數(shù)組和我們希望函數(shù)返回的元素數(shù)。我們使用擴(kuò)展運算符(…)以及Array中的sort和slice方法。請注意,如果我們不提供第二個參數(shù),則 number 的默認(rèn)值為 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.檢查數(shù)組中的所有元素是否相等

在這個簡短的示例中,我們使用Array中的every方法檢查數(shù)組中的所有元素是否相等。我們基本上檢查每個元素是否等于數(shù)組中的第一個元素。


const elementsAreEqual = array => array.every(el => el === array[0]);


// 例子

elementsAreEqual([9,8,7,6,5]); // false

elementsAreEqual([4,4,4,4,4]); // true

8.返回兩個數(shù)的平均值

在此示例中,我們使用了擴(kuò)展運算符(…)和Array中的reduce方法來返回兩個給定數(shù)字或一個數(shù)組的平均值。


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.返回兩個或多個數(shù)字的總和

要返回兩個或多個給定數(shù)字或一個數(shù)組的總和,我們再次使用擴(kuò)展運算符(…)和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.返回數(shù)字?jǐn)?shù)組的冪集

在最后一個示例中,我們要返回數(shù)字?jǐn)?shù)組的冪集。因此,我們使用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魔術(shù)來解決這些任務(wù)并不總是困難的。

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



分享本文至:

日歷

鏈接

個人資料

存檔