前端從業兩年總結的一些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的學習與開發。