请选择 进入手机版 | 继续访问电脑版
创作

web前端开发中常用的JavaScript片段

JavaScript  / 只看大图  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-8-26

跳转到指定楼层
本帖最后由 泡沫 于 2020-8-26 22:58 编辑

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

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

55555.webp.jpg


1. maxItemOfArray
获取数组中的最大数字
  1. constmaxItemOfArray =(arr) =>arr.sort((a, b) =>b - a)[0];letmaxItem = maxItemOfArray([3,5,12,5]);
复制代码

2. areAllEqual
检查数组的所有项是否相等
  1. constareAllEqual =array=>array.every(item=>item === array[0]);letcheck1 = areAllEqual([3,5,2]);// falseletcheck2 = allEqual([3,3,3]);// true
复制代码

3. averageOf
求给定数字的平均值
  1. constaverageOf =(…numbers) =>numbers.reduce((a, b) =>a + b,0) / numbers.length;letaverage = averageOf(5,2,4,7);// 4.5
复制代码

4. reverseString
反转一个字符串
  1. constreverseString =str=>[…str].reverse().join(‘’);leta = reverseString(‘Have a nice day!’);// !yad ecin a evaH
复制代码

5. sumOf
求给定数字的和
  1. const sumOf = (…numbers) => numbers.reduce((a, b) => a + b, 0);let sum = sumOf(5, -3, 2, 1); // 5
复制代码

6. findAndReplace
在字符串中查找给定的单词,并替换为另一个单词
  1. constfindAndReplace =(string, wordToFind, wordToReplace) =>string.split(wordToFind).join(wordToReplace);letresult = findAndReplace(‘I like banana’, ‘banana’, ‘apple’);// I like apple
复制代码

7. RGBToHex
将RGB模式下的颜色转换为十六进制
  1. constRGBToHex =(r, g, b) =>((r <<16) + (g <<8) + b).toString(16).padStart(6, ‘0’);lethex = RGBToHex(255,255,255);// ffffff
复制代码

8. shuffle
音乐播放器如何随机播放播放项目?
  1. 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
  1. constremoveFalseValues =arr=>arr.filter(item=>item);letarr = removeFalseValues([3,4,false, ‘’,5,true,undefined,NaN, ‘’]);// [3, 4, 5, true]
复制代码


10. removeDuplicatedValues

从数组中删除重复的项
  1. constremoveDuplicatedValues =array=>[…newSet(array)];letarr = removeDuplicatedValues([5,3,2,5,6,1,1,6]);// [5, 3, 2, 6, 1]
复制代码

11. getTimeFromDate
以日期对象的字符串形式返回时间
  1. constgetTimeFromDate =date=>date.toTimeString().slice(0,8);lettime = getTimeFromDate(newDate());// 09:46:08
复制代码

12. capitalizeAllWords
将字符串中所有单词的第一个字母大写
  1. constcapitalizeAllWords =str=>str.replace(/\b[a-z]/g,char=>char.toUpperCase());letstr = capitalizeAllWords(‘i love reading book’);// I Love Reading Book
复制代码

13. getDayDiff
返回两个日期之间以天为单位的差值
  1. constgetDayDiff =(date1, date2) =>((date2 - date1) / (1000*3600*24));letdiff = getDayDiff(newDate('2020-04-01'),newDate('2020-08-15'));// 136
复制代码

14. radianToDegree
把弧度转换成角度
  1. constradianToDegree =radian=>(radian *180.0) /Math.PI;letdegree = radianToDegree(2.3);// 131.78
复制代码

15. isValidJSON
检查给定字符串是否是有效的JSON
  1. 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
将给定的字符串转换为单词数组
  1. 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
位于长页面的底部,并且想快速向上滚动至顶部
  1. constscrollToTop =() =>{constt =document.documentElement.scrollTop ||document.body.scrollTop;if(t >0) {window.requestAnimationFrame(scrollToTop);window.scrollTo(0, t — t /8);  }};
复制代码

18. isValidNumber
验证数字是否有效
  1. constisValidNumber =n=>!isNaN(parseFloat(n)) &&isFinite(n) &&Number(n) === n;letcheck1 = isValidNumber(10);// trueletcheck2 = isValidNumber(‘a’);// false
复制代码


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

更多前端学习干货和内容,尽在WEB光明顶(https://web.xingruanedu.com/




转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部