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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 開発でよく使われる JavaScript の 1 行コード 25 個 (要約)
  • 1行のテキストを上にスクロールする効果を実現する js の例コード
  • jsの1行メッセージスクロールコードでは、無数に追加できます
  • 20個のJavaScriptワンラインコードを共有する

<<:  MySQLのよくある間違い

>>:  初心者がHTMLタグを学ぶ(3)

推薦する

jQuery は拡張アニメーションによるナビゲーション バー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計...

Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...

MySQL EXPLAIN出力列の詳細な説明

1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...

JavaScriptでマクロを使用する方法

言語では、DSL を実装するためにマクロがよく使用されます。マクロを使用すると、開発者は JSX 構...

Linuxプロセス通信におけるFIFOの実装

FIFO通信(先入れ先出し)関連のないプロセス間の通信を可能にする FIFO 名前付きパイプ。パイプ...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...

選択ドロップダウンメニューのテキストを左右にスクロールするように設定する

marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...

Vueストレージにはブール値のソリューションが含まれています

Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...

InnoDB のアーキテクチャと機能の詳細な説明 (InnoDB ストレージ エンジンの読書メモの要約)

背景スレッド•マスタースレッドコア バックグラウンド スレッドは主に、バッファー プール データをデ...

Windows オペレーティング システムでポートの使用状況を照会およびクリアするプログラム

Windowsオペレーティングシステムでは、ポートの占有状況を照会し、ポートの占有状況をクリアするプ...

Alibaba Cloud Server Ubuntu 上の Workbench が MySQL に接続できない問題の解決策 (テスト済み)

過去 2 日間、ワークベンチが Alibaba Cloud Server に接続できない問題を解決す...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

Nginx プロキシを使用してインターネットを閲覧する方法

私は通常、Tomcatや他のアプリケーションのリバースプロキシとしてnginxを使用しています。実際...

JavaScript を使用してカルーセル効果を実装する

この記事では、カルーセルマップの特殊効果を実現するためのJavaScriptの具体的なコードを参考ま...

指定フィールドによるMySQLカスタムリストのソートの実装

問題の説明ご存知のとおり、MySQL でフィールドを昇順に並べ替える SQL は次のとおりです (i...