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

作为初入职场的前端人，你是不是常常感到很疑惑。为什么同样的工作量，别人每天都能准时下班，而你却天天都要加班。同样都是使用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”官方公众号，发送信息“领取资料”即可免费自助领取你想要的资料。