腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

一定有你會用到的JavaScript一行代碼實用技巧總結(jié)

更新時間：2022年07月19日 11:32:52 作者：CUGGZ

這篇文章主要為大家介紹了一定有你會用到的JavaScript一行代碼總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 復(fù)制內(nèi)容到剪切板
2. 清除所有cookie
3. 獲取選中的文本
4. 檢測是否是黑暗模式
5. 滾動到頁面頂部
6. 判斷當(dāng)前標(biāo)簽頁是否激活
7. 判斷當(dāng)前是否是蘋果設(shè)備
8. 是否滾動到頁面底部
9. 重定向到一個URL
10. 打開瀏覽器打印框

七、其他操作

1. 隨機布爾值
2. 變量交換
3. 獲取變量的類型
4. 華氏度和攝氏度之間的轉(zhuǎn)化
5. 檢測對象是否為空

引言

最近在國外技術(shù)社區(qū)看到了一些關(guān)于一行代碼的文章，感覺很有意思，就整理了一下來分享給大家，希望對你有所幫助~

這些方法使用到了一些API，簡化了操作，但是有些方法寫一行屬實不太優(yōu)雅，所以這里主要還是學(xué)習(xí)API的使用技巧！

一、日期處理

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"))  // 90

距離過年還有90天~

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

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

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

2021年已經(jīng)過去300多天了~

4. 時間格式化

該方法可以用于將時間轉(zhuǎn)化為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());  // 返回當(dāng)前時間 09:00:00

二、字符串處理

1. 字符串首字母大寫

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

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world")  // Hello world

2. 翻轉(zhuǎn)字符串

該方法用于將一個字符串進(jìn)行翻轉(zhuǎn)操作，返回翻轉(zhuǎn)后的字符串：

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)   // 'Hi, I should be truncated because...'

5. 去除字符串中的HTML

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

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

三、數(shù)組處理

1. 從數(shù)組中移除重復(fù)項

該方法用于移除數(shù)組中的重復(fù)項：

const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));

2. 判斷數(shù)組是否為空

該方法用于判斷一個數(shù)組是否為空數(shù)組，它將返回一個布爾值：

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);  // true

3. 合并兩個數(shù)組

可以使用下面兩個方法來合并兩個數(shù)組：

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

四、數(shù)字操作

1. 判斷一個數(shù)是奇數(shù)還是偶數(shù)

該方法用于判斷一個數(shù)字是奇數(shù)還是偶數(shù)：

const isEven = num => num % 2 === 0;
isEven(996);

2. 獲得一組數(shù)的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5);   // 3

3. 獲取兩個整數(shù)之間的隨機整數(shù)

該方法用于獲取兩個整數(shù)之間的隨機整數(shù)

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

4. 指定位數(shù)四舍五入

該方法用于將一個數(shù)字按照指定位進(jìn)行四舍五入：

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轉(zhuǎn)化為十六機制

該方法可以將一個RGB的顏色值轉(zhuǎn)化為16進(jìn)制值：

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

2. 獲取隨機十六進(jìn)制顏色

該方法用于獲取一個隨機的十六進(jìn)制顏色值：

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

六、瀏覽器操作

1. 復(fù)制內(nèi)容到剪切板

該方法使用 navigator.clipboard.writeText 來實現(xiàn)將文本復(fù)制到剪貼板：

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

2. 清除所有cookie

該方法可以通過使用 document.cookie 來訪問 cookie 并清除存儲在網(wǎng)頁中的所有 cookie：

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

3. 獲取選中的文本

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

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

4. 檢測是否是黑暗模式

該方法用于檢測當(dāng)前的環(huán)境是否是黑暗模式，它是一個布爾值：

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

5. 滾動到頁面頂部

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

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

6. 判斷當(dāng)前標(biāo)簽頁是否激活

該方法用于檢測當(dāng)前標(biāo)簽頁是否已經(jīng)激活：

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

7. 判斷當(dāng)前是否是蘋果設(shè)備

該方法用于檢測當(dāng)前的設(shè)備是否是蘋果的設(shè)備：

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

8. 是否滾動到頁面底部

該方法用于判斷頁面是否已經(jīng)底部：

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的隨機數(shù)，與0.5進(jìn)行比較，就有一半的概率獲得真值或者假值。

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. 華氏度和攝氏度之間的轉(zhuǎn)化

該方法用于攝氏度和華氏度之間的轉(zhuǎn)化：

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;

以上就是一定有你會用到的JavaScript一行代碼總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript一行代碼的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线