技術文章 » 15個優雅又簡單的JS單行程式碼，讓你的工作效率事半功倍！

15個優雅又簡單的JS單行程式碼，讓你的工作效率事半功倍！

2022-10-12 22:00:38
JavaScript 非常大的特點容易上手且非常靈活，程式碼實現方式五花八門；有時候能一行程式碼解決，就儘量不用兩行。

本文整理了非常有用的單行程式碼，這些需求都是在開發中非常常見的，用單行程式碼可以幫助你提高工作效率。

陣列去重

從陣列中刪除所有重複值，實現方式非常多，我們這裡就說最簡單的方式，一行程式碼搞定：

1.png

php入門到就業線上直播課：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr(["前端","js","html","js","css","html"]));
// ['前端', 'js', 'html', 'css']
登入後複製

uniqueArr方法將資料轉為Set，然後再解構為陣列返回。

從url獲取引數並轉為物件

網頁路徑經常是：www.baidu.com?search=js&xxx=kkk這種形式的，我們是經常需要取引數的，可以使用第三方的qs包實現，如果你只是要實現去引數，這一句程式碼就可以實現，不用再引入qs了。

2.png

const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`
  )

getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");
// {q: 'js+md', newwindow: '1'}
登入後複製

檢查物件是否為空

檢查物件是否為空，實際上並不那麼簡單，即使物件為空，每次檢查物件是否等於 {} 也會返回 false。

幸運的是，下面的單行程式碼正是我們想要的。

3.png

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false
登入後複製

反轉字串

反轉字串可以使用split結合reverse和join方法輕鬆實現。

4.png

const reverse = str => str.split('').reverse().join('');
reverse('this is reverse');
// esrever si siht
登入後複製

生成隨機十六進位制

生成亂數相信你能信手拈來，那隨機生成十六進位制，例如生成十六進位制顏色值。

5.png

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHexColor());
// #a2ce5b
登入後複製

檢查當前索引標籤是否在後臺

瀏覽器使用索引標籤式瀏覽，任何網頁都有可能在後臺,此時對使用者來說是沒有在瀏覽的, 知道怎麼快速檢測到，你的網頁對使用者是隱藏還是可見嗎？

6.png

const isTabActive = () => !document.hidden; 

isTabActive()
// true|false
登入後複製

檢測元素是否處於焦點

activeElement 屬性返回檔案中當前獲得焦點的元素。

7.png

const elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement)
// 元素處於焦點返回true，反之返回false
登入後複製

檢查裝置型別

使用navigator.userAgent 判斷是移動裝置還是電腦裝置：

8.png

const judgeDeviceType =
      () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC';

judgeDeviceType()  // PC | Mobile
登入後複製

文字複製到剪貼簿

Clipboard API 它的所有操作都是非同步的，返回 Promise 物件，不會造成頁面卡頓。而且，它可以將任意內容（比如圖片）放入剪貼簿。

9.png

const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('單行程式碼 前端世界')
登入後複製

獲取選定的文字

使用內建的 getSelection 獲取使用者選擇的文字:

10.png

const getSelectedText = () => window.getSelection().toString();

getSelectedText();
// 返回選中的內容
登入後複製

查詢某天是否為工作日

我們自己寫日曆元件時經常會用到，判斷某個日期是否為工作日；週一至週五為工作日:

11.png

const isWeekday = (date) => date.getDay() % 6 !== 0;

isWeekday(new Date(2022, 03, 11))
// true
登入後複製

轉換華氏/攝氏

處理溫度有時會暈頭轉向。這兩個函數則能幫助大家將華氏溫度轉換為攝氏溫度，以及將攝氏溫度轉換為華氏溫度。

12.png

  • 將華氏溫度轉換為攝氏溫度
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

fahrenheitToCelsius(50);
// 10
登入後複製
  • 將攝氏溫度轉華氏溫度
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;

celsiusToFahrenheit(100)
// 212
登入後複製

兩日期之間相差的天數

日常開發中經常遇到需要顯示剩餘天數， 一般我們就需要計算兩日期之間相差天數：

13.png

const dayDiff = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);

dayDiff(new Date("2021-10-21"), new Date("2022-02-12"))
// Result: 114
登入後複製

將 RGB 轉換為十六進位制

14.png

const rgbToHex = (r, g, b) =>   "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(255, 255, 255); 
//  #ffffff
登入後複製

計算陣列平均值

計算平均值的方式很多，計算的邏輯都是一樣的， 但是實現方式各不相同，一行程式碼簡單實現：

15.png

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;
average([1,9,18,36]) //16
登入後複製

原文地址：https://juejin.cn/post/7145623660680708104

（學習視訊分享：、）