四川职来科技有限公司
电子科技大学成都研究院
数字化人才培养基地
咨询热线:180-8114-4091

学会这些JS小技巧,工作效率直接翻倍!

发表时间:2022-09-28 17:38

作为初入职场的前端人,你是不是常常感到很疑惑。为什么同样的工作量,别人每天都能准时下班,而你却天天都要加班。同样都是使用JS,难道他们打字的速度比你快?当然不是啦。那是因为别人不仅会熟练运用JS,更会一些能节省工作时间,提升工作效率的JS小技巧。

野蛮人与文明人的区别是文明人会使用工具,而聪明人与普通人的区别则在于他们会运用头脑和技巧。所以,想要每天都能够准时下班,并且留出摸鱼的时间,一味地埋头苦干是没有用的,提升工作效率才是关键。

想要提升工作效率,并且让你的代码看起来更加专业,下面这些简单且实用的JS小技巧你一定要掌握好~

一、滚动到页面顶部

  • /*niemvuilaptrinh.com*/

  • const scrollToTop = () => window.scrollTo(0, 0);

  • scrollToTop();


二、创建“返回”按钮

  • <button onclick="history.back()">

  • 返回

  • </button>

只需用 history.back() 就可以创建一个“返回”按钮。


三、数值分隔符

在编写代码时遇到很长一段数字,为了方便阅读,可以利用下划线作为数值分隔符。但是需要注意,分隔符不能出现在首位0后面和数字的末尾。

  • const largeNumber = 4_000_000;

  • console.log(largeNumber); // 4000000


四、过滤唯一值

Set类型是在ES6中新增的,类似于数组,但成员的值是唯一的。结合扩展运算符(...)可以创建一个新的数组,来达到过滤原数组重复值的功能。但是需要注意的是这只适用于undefined, null, boolean, string, number等数值类型,若数值中包含object, function, array,则不适用。

  • const array = [1,3, 3, 2, 4, 5, 6,6];

  • const uniqueArray = [...new Set(array)];

  • console.log(uniqueArray); // [1, 2, 3, 4,5,6]


五、转换Boolean型

常规的boolean型值只有“true”和 “false”,但在JS中可以把其他值认为是“truthy”或者是“falsy”的。除0, “”, null, undefined, NaN 和 false之外,其他值都可以认为是‘truthy’的。这样就可以通过负运算符!将一系列变量转换成“boolean”型。

  • const isTrue   = !0;

  • const isFalse = !1;

  • const alsoFalse = !!0;

  • console.log(isTrue); // Result: true

  • console.log(typeof true);// Result: "boolean"


六、过滤数值中的虚值

像 “0, undefined, null, false, "", ''”这样的虚值,我们可以通过下面的方法来过滤掉:

  • const array = [4, 2, 0, 5,null, 0];

  • array.filter(Boolean);

  • // 输出

  • (3) [4, 2, 5]


七、获取数组中的平均值

求数组中的平均值需要先获取到所有的参数,然后将这些参数转化为数组,再把数组中的第一项和最后一项去掉,最后用数组中剩余的数据求和并取平均值即可。代码如下:

  • function sumAverage() {

  • let arr = []

  • // console.log(arguments)

  • //   for (let index = 0; index < arguments.length; index++) {

  • //    arr.push(arguments[index]);

  • // }

  • arr=Array.from(arguments)

  • // arr=[...arguments]

  • arr.pop()//pop从后面删除

  • arr.shift()//shift从前面删除

  • let sumTotal=0

  • // for (let index = 0; index < arr.length; index++) {

  • //      let item = arr[index]

  • //      sumTotal += item   

  • // }

  • sumTotal = eval(arr.join('+'))

  • return sumTotal/arguments.length

  • }

  • let result = sumAverage(...[1, 6, 7, 8, 9, 9, 44, 1, 55, 1])//...展开数组

  • console.log(result)


八、 数组中获取最值

如果想要获取数组中的最大值或者最小值,可以利用Math.min() 或 Math.max() 结合扩展运算符来查找。

  • const numbers = [4, 3, 5,7,6];

  • console.log(Math.max(...numbers)); // 7

  • console.log(Math.min(...numbers)); // 3

九、字符串转化为数字

将字符串值乘以1并不会改变值,且默认情况下它会转换为数字。

  • str = '2841'

  • console.log(str * 1) // expected result: 2841


十、数字转化为字符串

将数字“+”上空字符即可将数字转化为字符串

  • const myNumber = 2841;

  • console.log(myNumber + ''); // '2841'


十一、数组求和

可以利用reduce来对数组求和,代码如下:

  • const myArray = [3,8, 5, 4];

  • const reducer = (total, currentValue) => total + currentValue;

  • console.log(myArray.reduce(reducer)); // 20


十二、数字取整

如果你想要对一个含小数的数字取整,可以利用“| 0”来实现,这个方法对于负数也同样适用。代码如下:

  • 2.43825437 | 0         // 2

  • -4.3245617 | 0        // -4


工欲善其事必先利其器,如果将JS作为比作我们工作的工具,那么这些小技巧的作用就是让我们的工具更加锋利,更加好用。脚踏实地、埋头苦干固然重要,找对方法、掌握技巧也同样重要。

熟练掌握JS基本内容只能让你完成工作,但是学习并且熟练运用这些技巧,就能让你更快更好地完成工作。所以,在我们在工作中不仅要思考怎么完成工作,更要思考如何更快更好地完成工作,这样才能让我们在工作中事半功倍,也能为上班摸鱼腾出更多时间。

福利来了!职来offer精心总结整理的前端资料,还含有面试辅导资料,包括HTML、CSS、H5+CSS3、JavaScript、JS、react、Vue、uniapp、项目学习等新鲜出炉了!现在起,关注“职来offer”官方公众号,发送信息“领取资料”即可免费自助领取你想要的资料。


文章分类: 头条资讯
分享到:
咨询热线:180-8114-4091 校区地址:四川省成都市武侯区天府五街吉泰锦江大厦2层
微信公众号
抖音号
数字化人才培养基地