18 個のキラー JavaScript ワンライナー

序文

JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に新しい技術オタクの扉を開いています。

また、JavaScript の初心者であっても、プロの開発者であっても、何か新しいことを学ぶことは常に良いことです。

この記事では、作業効率の向上に役立つ非常に便利なワンライナーをいくつかまとめました。

ワンラインコードとは何ですか?

ワンライナーは、たった 1 行のコードで何らかの機能を実行するコーディング手法です。

1行のコード例

1. クリップボードにコピー

navigator.clipboard.writeText を使用すると、任意のテキストを簡単にクリップボードにコピーできます。

const copyToClipboard = (テキスト) => navigator.clipboard.writeText(テキスト);
クリップボードにコピーします("Hello World");

2. 日付が有効かどうかを確認する

指定された日付が有効かどうかを確認するには、次のコードスニペットを使用します。

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("1995年12月17日 03:24:00");
// 結果: true

3. 年の何日目か調べる

指定された日付の曜日を検索します。

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(新しい日付());
// 結果: 272

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

Javascript には大文字関数が組み込まれていないため、次のコードを使用できます。

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)capitalize("follow for more") // 結果: Follow for more

5. 2つの日付の間の日数を求める

指定された 2 つの日付間の日数を見つけるには、次のコードスニペットを使用します。

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)dayDif(new Date("2020-10-21"), new Date("2021-10-22"))// 結果: 366

6. すべてのクッキーを消去する

document.cookie を使用して Cookie にアクセスし、それをクリアすることで、Web ページに保存されているすべての Cookie を簡単にクリアできます。

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

7. ランダムな16進数を生成する

Math.random と padEnd プロパティを使用して、ランダムな 16 進数の色を生成できます。

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(ランダム16進数());
//結果: #92b008

8. 配列から重複を削除する

JavaScript の Set を使用すると、重複を簡単に削除できます。

const removeDuplicates = (arr) => [...new Set(arr)];
console.log(重複を削除([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// 結果: [ 1, 2, 3, 4, 5, 6 ]

9. URLからクエリパラメータを取得する

window.location または元の URL goole.com?search=easy&page=3 を渡すことで、URL からクエリパラメータを簡単に取得できます。

const getParameters = (URL) => {
 URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace(
 /=/g, '":"') + '"}');
 JSON.stringify(URL) を返します。
};
getParameters(window.location) // 結果: { search : "easy", page : 3 }

10. 日付から時間を記録

指定した日付から、時間::分::秒の形式で時間を記録できます。

const timeFromDate = date => date.toTimeString().slice(0, 8);
コンソールにログ出力します。 
// 結果: "17:30:00"

11. 数字が偶数か奇数かを調べる

const isEven = num => num % 2 === 0; console.log(isEven(2));
 // 結果: True

12. 数値の平均を求める

複数の数値の平均を求めるには、reduce メソッドを使用します。

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
平均(1, 2, 3, 4);
// 結果: 2.5

13. 文字列を反転する

split、reverse、join メソッドを使用して、文字列を簡単に反転できます。

const reverse = str => str.split('').reverse().join('');reverse('hello world'); 
// 結果: 'dlrow olleh'

14. 配列が空かどうか確認する

配列が空かどうかをチェックする簡単なワンライナーは、true または false を返します。

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
空ではありません([1, 2, 3]);
// 結果: true

15. 選択したテキストを取得する

組み込みの getSelectionproperty を使用して、ユーザーが選択したテキストを取得します。

const getSelectedText = () => window.getSelection().toString();
選択されたテキストを取得します。

16. 配列をシャッフルする

sort メソッドと random メソッドを使用して配列をシャッフルするのは非常に簡単です。

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random()); console.log(shuffleArray([1, 2, 3, 4])); // 結果: [ 1, 4, 3, 2 ]

17. ダークモードを検出する

次のコードを使用して、ユーザーのデバイスがダークモードになっているかどうかを確認します。

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matchesconsole.log(isDarkMode) // 結果: True または False

18. RGBを16進数に変換する

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);rgbToHex(0, 51, 255); // 結果: #0033ff

要約する

JavaScript ワンラインコードに関するこの記事はこれで終わりです。JavaScript ワンラインコードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: