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

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

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

5.

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

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

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(';').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. 現在のデバイスが 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('');     // 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 サイトの他の関連記事を参照してください。