記錄--JavaScript 用簡約的代碼實現一些日常功能

来源:https://www.cnblogs.com/smileZAZ/archive/2022/06/15/16378410.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些JavaScript 知識，希望對大家有所幫助 一、日期處理 1. 檢查日期是否有效 該方法用於檢測給出的日期是否有效： const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf( ...


這裡給大家分享我在網上總結出來的一些JavaScript 知識，希望對大家有所幫助

一、日期處理

1. 檢查日期是否有效

該方法用於檢測給出的日期是否有效：

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");  // true

2. 計算兩個日期之間的間隔

該方法用於計算兩個日期之間的間隔時間：

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
    
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))

3. 查找日期位於一年中的第幾天

該方法用於檢測給出的日期位於今年的第幾天：

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());   // 307

4. 時間格式化

該方法可以用於將時間轉化為hour:minutes:seconds的格式：

const timeFromDate = date => date.toTimeString().slice(0, 8);
  
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // 返回當前時間 09:00:00

二、字元串處理

1. 字元串首字母大寫

該方法用於將英文字元串的首字母大寫處理：

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("hello world")  // Hello world

2. 翻轉字元串

該方法用於將一個字元串進行翻轉操作，返回翻轉後的字元串：

const reverse = str => str.split('').reverse().join('');

reverse('hello world');   // 'dlrow olleh'

3. 隨機字元串

該方法用於生成一個隨機的字元串：

const randomString = () => Math.random().toString(36).slice(2);

randomString();

4. 截斷字元串

該方法可以從指定長度處截斷字元串:

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;

truncateString('Hi, I should be truncated because I am too loooong!', 36)

5. 去除字元串中的HTML

該方法用於去除字元串中的HTML元素：

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

三、數組處理

1. 從數組中移除重覆項

該方法用於移除數組中的重覆項：

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

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));

2. 判斷數組是否為空

該方法用於判斷一個數組是否為空數組，它將返回一個布爾值：

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);  // true

3. 合併兩個數組

可以使用下麵兩個方法來合併兩個數組：

const merge = (a, b) => a.concat(b);

const merge = (a, b) => [...a, ...b];

四、數字操作

1. 判斷一個數是奇數還是偶數

該方法用於判斷一個數字是奇數還是偶數：

const isEven = num => num % 2 === 0;

isEven(996);

2. 獲得一組數的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4, 5);   // 3

3. 獲取兩個整數之間的隨機整數

該方法用於獲取兩個整數之間的隨機整數

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

random(1, 50);

4. 指定位數四捨五入

該方法用於將一個數字按照指定位進行四捨五入：

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(1.005, 2) //1.01
round(1.555, 2) //1.56

五、顏色操作

1. 將RGB轉化為十六機制

該方法可以將一個RGB的顏色值轉化為16進位值：

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

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

2. 獲取隨機十六進位顏色

該方法用於獲取一個隨機的十六進位顏色值：

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

randomHex();

六、瀏覽器操作

1. 複製內容到剪切板

該方法使用 navigator.clipboard.writeText 來實現將文本複製到剪貼板：

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

2. 清除所有cookie

該方法可以通過使用 document.cookie 來訪問 cookie 並清除存儲在網頁中的所有 cookie：

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

3. 獲取選中的文本

該方法通過內置的 getSelection 屬性獲取用戶選擇的文本：

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

getSelectedText();

4. 檢測是否是黑暗模式

該方法用於檢測當前的環境是否是黑暗模式，它是一個布爾值：

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode)

5. 滾動到頁面頂部

該方法用於在頁面中返回頂部：

const goToTop = () => window.scrollTo(0, 0);

goToTop();

6. 判斷當前標簽頁是否激活

該方法用於檢測當前標簽頁是否已經激活：

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

7. 判斷當前是否是蘋果設備

該方法用於檢測當前的設備是否是蘋果的設備：

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

isAppleDevice();

8. 是否滾動到頁面底部

該方法用於判斷頁面是否已經底部：

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

9. 重定向到一個URL

該方法用於重定向到一個新的URL：

const redirect = url => location.href = url

redirect("https://www.google.com/")

10. 打開瀏覽器列印框

該方法用於打開瀏覽器的列印框：

const showPrintDialog = () => window.print()

七、其他操作

1. 隨機布爾值

該方法可以返回一個隨機的布爾值，使用Math.random()可以獲得0-1的隨機數，與0.5進行比較，就有一半的概率獲得真值或者假值。

const randomBoolean = () => Math.random() >= 0.5;

randomBoolean();

2. 變數交換

可以使用以下形式在不適用第三個變數的情況下，交換兩個變數的值：

[foo, bar] = [bar, foo];

3. 獲取變數的類型

該方法用於獲取一個變數的類型：

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

trueTypeOf('');     // string
trueTypeOf(0);      // number
trueTypeOf();       // undefined
trueTypeOf(null);   // null
trueTypeOf({});     // object
trueTypeOf([]);     // array
trueTypeOf(0);      // number
trueTypeOf(() => {});  // function

4. 華氏度和攝氏度之間的轉化

該方法用於攝氏度和華氏度之間的轉化：

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

5. 檢測對象是否為空

該方法用於檢測一個JavaScript對象是否為空：

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

本文轉載於:

https://www.zhihu.com/question/46943112/answer/2527242315

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Redis緩存更新策略
    Redis緩存更新策略 本文整理自黑馬程式員相關資料 記憶體淘汰 超時剔除 主動更新 說明 不用自己維護，利用Redis的記憶體淘汰機制，當記憶體不足時自動淘汰部分數據。下次查詢時更新緩存 給緩存數據添加TTL時間，到期後自動刪除緩存，下次查詢時更新緩存 編寫業務邏輯，在修改數據的同時，更新緩存 一致性 ...
  • 調試Archery連接SQL Server提示驅動錯誤
    一、課程介紹 數據服務API作為數據統一服務平臺建設的最上層，能夠將數據倉庫數據以服務化、介面化的方式提供給數據使用方，屏蔽底層數據存儲、計算的諸多細節，簡化和加強數據的使用。 隨著企業“互聯網化、數字化”進程的不斷深入，越來越多的業務被遷移到互聯網上，產生大量的業務交互和對外服務需求，對API介面 ...
  • Oracle學習筆記二十五：包的定義與調用
    一、包的作用 • Oracle中包的概念與Java中包的概念非常類似，只是Java中的包是為了分類管理類，但是關鍵字都是package。 • 在一個大型項目中，可能有很多模塊，而每個模塊又有自己的過程、函數等。而這些過程、函數預設是放在一起的（如在PL/SQL中，過程預設都是放在一起的，即Proce ...
  • Gradle連載6-AndroidGradle任務之defaultConfig配置
    一、android工程配置 buildscript { repositories { jcenter() } dependencies { classpath 'com.android.tools.build:gradle:3.1.4' } } apply plugin: 'com.android. ...
  • 基於 ZEGO SDK 實現 iOS 一對一音視頻聊天應用
    在開始集成 ZEGO Express SDK 前，請確保開發環境滿足以下要求 ...
  • js中數組reduce的使用原來這麼簡單
    reduce 的學習方法 array.reduce(callback(prev, currentValue, index, arr), initialValue) //簡寫就是下麵這樣的 arr.reduce(callback,[initialValue]) callback （執行數組中每個值的函 ...
  • TypeScript（3）基礎類型
    基礎類型 TypeScript 支持與 JavaScript 幾乎相同的數據類型，此外還提供了實用的枚舉類型方便我們使用。 布爾值 最基本的數據類型就是簡單的true/false值，在JavaScript和TypeScript里叫做boolean（其它語言中也一樣） let isDone: bool ...
  • 行業測試數據
    行業測試數據-案例分享 一 總體介紹 “人類正從IT時代走向DT時代” 1.數據測試指的是檢查局部數據結構時為了保證臨時存儲在模塊內的數據在程式執行過程中完整、正確的過程。2.工程師開發完成後，常常需要製造大批量的偽數據，來測試數據中台的開發效果。例如在數倉開發中，會遇到需要在已構建的數倉模型（各種 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類