前端从业两年总结的一些js使用小技巧

1.‘+’

首先介绍的就是我经常使用的'+'(使用ts规则后使用较少了)。平时我们将字符串转换成数字的方法有Number(),parseInt(),等，我们可以将'+’运算符看作简写版的Nuber()。字符串中出现非数字则会NaN。

+'1223'     ///123
+'dgfg45'  //NaN
+'-98      //-98

2. '!!'

很简单，强制将数据转换成布尔值。主要是处理null/undifined/0/""等值。同时也可以判断空对象空数组(一般用于回调)。用法类似短路表达式: demo||false

!!0  //false
!!{} //true
!!1  //true
!!'' //false

3. '数组去重'

写逻辑的时候总是会遇到数组去重的情况。我甚至在某一个博文中看到过有十二种方法对数组去重。下面我就归类我认为比较好的两种：一种是通过枚举，一种是通过Set.

/// 1.枚举
const demoArr = arr => {
  const obj = {};
  const returnArr = [];
  for (item of arr) {
    if (!obj[item]) {
      obj[item] = '1';
      returnArr.push (item);
    }
  }
  return returnArr;
};
///2.
[...new Set(arr)]

4. '获取随机字符串'

有时候可能为了模拟而需要获取随机的字符串，最常用的办法当然是将需要的字符写进数组中，然后获取随机下标组成随机字符串。但是如果我们需要的字符串比较短，可以用下面方法获取一个最大长度为10的随机字符串

Math.random().toString(36).slice(2)

5.‘简单的懒加载’

现在三大框架，jq各行其道，其中关于图片懒加载的插件也是五花八门，但是如果要摈弃各类插件使用原生来实现懒加载呢？最常用的就是判断元素的距离顶部的高度和可视区域高度加上滚动条的高度进行判断。简直有点复杂。其实原生js就有实现的方法

const intersectionObserver = new IntersectionObserver(function(entries) {
  //监听intersectionRatio,如果大于0就说明该元素进入了可视区域了，简直不要太简单了....
  if (entries[0].intersectionRatio <= 0) return;
// 这里执行对img添加src的方法
});
// 然后对你想要监听的元素进行绑定即可
intersectionObserver.observe(document.querySelector('.img'));

6.其他简短的技巧

1.获取数组最后一个数据

arr.slice(-1)

2.合并数组

[...arr1,...arr2]
arr1.concat(arr2)

3.清空数组

arr.length = 0

4.浮点数取整

const x = 3.012254
x>>0   //3
~~x    //3
Math.floor(x) /// 3

5.判断是否为对象或者是数组

Object.prototype.toString.call([])   // '[object Array]'
Object.prototype.toString.call({})   // '[object Object]'

总结

虽然现在的框架和类库让我们写js变得轻松加愉快，但是我们要对js基础持有学习总结的态度，万变不离其宗。

原文链接：tech.gtxlab.com/someTips.ht…

作者简介：张栓，人和未来大数据前端工程师，专注于html/css/js的学习与开发。