非常に実用的なJavaScriptの一行コード33個、集めておくのがおすすめ！-フロントエンドQ&A-php.cn

この記事では、33 個の非常に実用的な JavaScript の 1 行コードを整理して共有します。これらのメソッドは操作を簡素化するためにいくつかの API を使用しますが、一部のメソッドは 1 行で記述するのがあまり洗練されていないため、主なコードを以下に示します。 APIの使い方を学びましょう！みんなが助けてくれることを願っています。

非常に実用的なJavaScriptの一行コード33個、集めておくのがおすすめ！

#1. 日付処理

1. 日付が有効かどうかを確認します

このメソッドは、指定された日付が有効かどうかを確認するために使用されます:

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00");  // true

ログイン後にコピー

#2. 2 つの日付間の間隔を計算します

##このメソッドは使用される 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

ログイン後にコピー

3. 日付が位置する年の何日かを検索します

このメソッドは、指定された日付を検出するために使用されます。 date 今年の日付:

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

ログイン後にコピー

2021 が過ぎました

4. 時間の形式

このメソッドは時間を変換するために使用できます。時:分:秒:

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

ログイン後にコピー

2. 文字列処理

1. 文字列の最初の文字を大文字にする

このメソッドは、英語の文字列の最初の文字を大文字にするために使用されます:

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

ログイン後にコピー

2. 文字列を反転する

このメソッドは、文字列を反転するために使用されます。文字列を取得し、反転した文字列を返します:

const reverse = str => str.split(&#39;&#39;).reverse().join(&#39;&#39;);
reverse(&#39;hello world&#39;);   // &#39;dlrow olleh&#39;

ログイン後にコピー

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(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36)   // &#39;Hi, I should be truncated because...&#39;

ログイン後にコピー

# 内の文字列 HTML を削除します。 ##このメソッドは、文字列から HTML 要素を削除するために使用されます:

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

ログイン後にコピー

3. 配列処理

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. 2 つの配列を結合します

次のことができます。 2 つの配列をマージするには、次の 2 つの方法を使用します:

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

ログイン後にコピー

4. 数値演算

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. 2 つの整数の間のランダムな整数を取得します

このメソッドは、2 つの整数の間のランダムな整数を取得するために使用されます

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

ログイン後にコピー

#5. カラー演算

##1. RGB を 16 進数に変換するメカニズムこのメソッドは、RGB カラー値を 16 進数の値に変換できます:

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

ログイン後にコピー

2.ランダムな 16 進数の色

このメソッドは、ランダムな 16 進数の色の値を取得するために使用されます:

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

ログイン後にコピー

6. ブラウザの操作

1. コンテンツをクリップボードにコピーしますこのメソッドは、navigator.clipboard.writeText を使用してテキストをクリップボードにコピーします:

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

ログイン後にコピー

2。すべての Cookie をクリア#このメソッドは、document.cookie を使用して Cookie にアクセスし、Web ページに保存されているクッキーをクリアします。すべての Cookie:

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

ログイン後にコピー

3. 選択したテキストを取得します

このメソッドは、組み込みの getSelection プロパティを通じてユーザーが選択したテキストを取得します:

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

ログイン後にコピー

4. ダークモードかどうかを検出します

#このメソッドは、現在の環境がダークモードであるかどうかを検出するために使用され、ブール値です:

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

ログイン後にコピー

5. スクロールしてページの先頭に移動します

#このメソッドは、ページの先頭に戻るために使用されます:

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

ログイン後にコピー

6. 現在のタブがアクティブ化されているかどうかを確認します

このメソッドは、現在のタブがアクティブ化されているかどうかを検出するために使用されます。現在のタブページがアクティブ化されました:

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

ログイン後にコピー

7. 現在のデバイスが Apple デバイスであるかどうかを確認します

このメソッドは、現在のデバイスが Apple デバイスであるかどうかを検出するために使用されます。 Apple デバイス Device:

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 へのリダイレクトに使用されます。ブラウザの print を開きます。 box

このメソッドは、ブラウザの印刷ボックスを開くために使用されます:

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

ログイン後にコピー

7. その他の操作

1. ランダムなブール値

このメソッドはランダムなブール値を返すことができます。0 から 1 までの乱数を取得するには Math.random() を使用します。0.5 と比較すると、 true または false の値が得られる確率は半分です。

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

ログイン後にコピー

2. 変数の交換

3 番目の変数が適用できない場合、次の形式を使用して 2 つの変数の値を交換できます:

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

ログイン後にコピー

3. 変数の型の取得

このメソッドは、変数の型を取得するために使用されます:

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
trueTypeOf(&#39;&#39;);     // 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;

ログイン後にコピー

【相关推荐：javascript学习教程】

以上が非常に実用的なJavaScriptの一行コード33個、集めておくのがおすすめ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。