作为前端开发，你知道这些常用的JavaScript片段吗？让你开发事半功倍

如果有人问我，作为一个初学者应该学习什么编程语言，我会推荐 JavaScript，这种强大的语言几乎涉及到编程各个方面 - 前端、后端、web应用程序、桌面应用程序、移动应用程序等等。

这篇文章我将展示18个常用的JavaScript片段，在日常开发工作中，它们为我大大节省了时间。

1. maxItemOfArray

获取数组中的最大数字

constmaxItemOfArray =(arr) =>arr.sort((a, b) =>b - a)[0];letmaxItem = maxItemOfArray([3,5,12,5]);

2. areAllEqual

检查数组的所有项是否相等

constareAllEqual =array=>array.every(item=>item === array[0]);letcheck1 = areAllEqual([3,5,2]);// falseletcheck2 = allEqual([3,3,3]);// true

3. averageOf

求给定数字的平均值

constaverageOf =(…numbers) =>numbers.reduce((a, b) =>a + b,0) / numbers.length;letaverage = averageOf(5,2,4,7);// 4.5

4. reverseString

反转一个字符串

constreverseString =str=>[…str].reverse().join(‘’);leta = reverseString(‘Have a nice day!’);// !yad ecin a evaH

5. sumOf

求给定数字的和

const sumOf = (…numbers) => numbers.reduce((a, b) => a + b, 0);let sum = sumOf(5, -3, 2, 1); // 5

6. findAndReplace

在字符串中查找给定的单词，并替换为另一个单词

constfindAndReplace =(string, wordToFind, wordToReplace) =>string.split(wordToFind).join(wordToReplace);letresult = findAndReplace(‘I like banana’, ‘banana’, ‘apple’);// I like apple

7. RGBToHex

将RGB模式下的颜色转换为十六进制

constRGBToHex =(r, g, b) =>((r <<16) + (g <<8) + b).toString(16).padStart(6, ‘0’);lethex = RGBToHex(255,255,255);// ffffff

8. shuffle

音乐播放器如何随机播放播放项目？

constshuffle =([…array]) =>{letm = array.length;while(m) {consti =Math.floor(Math.random() * m — ); [array[m], array[i]] = [array[i], array[m]]; }returnarray;};shuffle([5,4,3,6,20]);

9. removeFalseValues

从数组中删除false值，包括false，undefined，NaN，empty

constremoveFalseValues =arr=>arr.filter(item=>item);letarr = removeFalseValues([3,4,false, ‘’,5,true,undefined,NaN, ‘’]);// [3, 4, 5, true]

10. removeDuplicatedValues

从数组中删除重复的项

constremoveDuplicatedValues =array=>[…newSet(array)];letarr = removeDuplicatedValues([5,3,2,5,6,1,1,6]);// [5, 3, 2, 6, 1]

11. getTimeFromDate

以日期对象的字符串形式返回时间

constgetTimeFromDate =date=>date.toTimeString().slice(0,8);lettime = getTimeFromDate(newDate());// 09:46:08

12. capitalizeAllWords

将字符串中所有单词的第一个字母大写

constcapitalizeAllWords =str=>str.replace(/\b[a-z]/g,char=>char.toUpperCase());letstr = capitalizeAllWords(‘i love reading book’);// I Love Reading Book

13. getDayDiff

返回两个日期之间以天为单位的差值

constgetDayDiff =(date1, date2) =>((date2 - date1) / (1000*3600*24));letdiff = getDayDiff(newDate('2020-04-01'),newDate('2020-08-15'));// 136

14. radianToDegree

把弧度转换成角度

constradianToDegree =radian=>(radian *180.0) /Math.PI;letdegree = radianToDegree(2.3);// 131.78

15. isValidJSON

检查给定字符串是否是有效的JSON

constisValidJSON =string=>{try{JSON.parse(string);returntrue; }catch(error) {returnfalse; }};letcheck1 = isValidJSON(‘{“title”: “javascript”, “price”:14}’);// trueletcheck2 = isValidJSON(‘{“title”: “javascript”, “price”:14, subtitle}’);// false

16. toWords

将给定的字符串转换为单词数组

consttoWords =(string, pattern =/[^a-zA-Z-]+/) =>string.split(pattern).filter(item=>item);letwords = toWords(‘I want to be come a great programmer’);// [“I”, “want”, “to”, “be”, “come”, “a”, “great”, “programmer”]

17. scrollToTop

位于长页面的底部，并且想快速向上滚动至顶部

constscrollToTop =() =>{constt =document.documentElement.scrollTop ||document.body.scrollTop;if(t >0) {window.requestAnimationFrame(scrollToTop);window.scrollTo(0, t — t /8); }};

18. isValidNumber

验证数字是否有效

constisValidNumber =n=>!isNaN(parseFloat(n)) &&isFinite(n) &&Number(n) === n;letcheck1 = isValidNumber(10);// trueletcheck2 = isValidNumber(‘a’);// false

好了，今天的分享就到这里，如果你是正在学习前端或准备学习前端，可以去我的前端学习交流群免费下载一些前端学习视频，而且不定时还有大咖直播分享，希望能帮助大家共同成长。