我寫這10+個JavaScript單行程式碼，被組長誇程式碼寫得優雅！

語言: CN / TW / HK
時間 2022-09-29 08:15:04

我報名參加金石計劃1期挑戰——瓜分10萬獎池，這是我的第2篇文章，點選檢視活動詳情

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

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

陣列去重

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

unique_arr.png ```js 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了。

url_params.png ``js 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。

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

is_empty.png

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

反轉字串

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

reverse_str.png js const reverse = str => str.split('').reverse().join(''); reverse('this is reverse'); // esrever si siht

生成隨機十六進位制

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

random_hex_color.png js const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}` console.log(randomHexColor()); // #a2ce5b

檢查當前選項卡是否在後臺

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

is_tab_active.png ```js const isTabActive = () => !document.hidden;

isTabActive() // true|false ```

檢測元素是否處於焦點

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

is_in_focus.png

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

elementIsInFocus(anyElement) // 元素處於焦點返回true，反之返回false ```

檢查裝置型別

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

judge_device_type.png

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

judgeDeviceType() // PC | Mobile ```

文字複製到剪貼簿

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

copy_text.png

js const copyText = async (text) => await navigator.clipboard.writeText(text) copyText('單行程式碼 前端世界')

獲取選定的文字

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

get_selected.png ```js const getSelectedText = () => window.getSelection().toString();

getSelectedText(); // 返回選中的內容 ```

查詢某天是否為工作日

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

is_weekday.png ```ts const isWeekday = (date) => date.getDay() % 6 !== 0;

isWeekday(new Date(2022, 03, 11)) // true ```

轉換華氏/攝氏

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

hua_to_she.png - 將華氏溫度轉換為攝氏溫度 ```js const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

fahrenheitToCelsius(50); // 10 ```

  • 將攝氏溫度轉華氏溫度 ```js const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;

celsiusToFahrenheit(100) // 212 ```

兩日期之間相差的天數

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

day_diff.png ```js 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 轉換為十六進位制

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

rgbToHex(255, 255, 255); // #ffffff ```

計算陣列平均值

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

average.png js const average = (arr) => arr.reduce((a, b) => a + b) / arr.length; average([1,9,18,36]) //16

「」
「」