前端從業兩年總結的一些js使用小技巧

genetalks_大資料發表於2019-04-04
前端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基礎持有學習總結的態度，萬變不離其宗。

作者簡介： 張栓，人和未來大資料前端工程師，專注於html/css/js的學習與開發。

相關文章