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)

推薦する

MySQLデータベースのロック機構の分析

同時アクセスの場合、非反復読み取りやその他の読み取り現象が発生する可能性があります。高い同時実行性に...

Alibaba Cloud Server ドメイン名解決手順 (初心者向けチュートリアル)

ウェブサイトの構築を始めたばかりの初心者には、理解し、学ぶべきことがたくさんあります。ウェブサイトを...

HTML でフォントの色を設定する方法と、PS を使用して HTML で正確なフォントの色を取得する方法

1. HTMLフォントカラー設定HTML では、フォント タグを使用してフォント コンテンツの色を設...

CSS 評価効果の星の例

何?何のスターコートですか?さて、もっとわかりやすくするために写真を見てみましょう。 よく見ると、パ...

MySQLのexecute、executeUpdate、executeQueryの違い

execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...

MySQLの共同クエリ最適化メカニズムの詳細な説明

目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...

JS オブジェクト配列の重複排除のための 3 つの方法の例と比較

目次1. 重複排除前後のデータの比較2. 使い方1. フィルターとマップを使用する2. 削減を使用す...

HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明

1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...

MySQLがトランザクション分離を実装する方法の簡単な分析

目次1. はじめに2. RC および RR 分離レベル2.1. RRトランザクション分離レベルでのク...

Windows での MySQL 5.7.10 のインストールと設定のチュートリアル

MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...

記事では、js を使用して弾幕効果を実現する方法を説明します

目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

MySQLストアドプロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...

Chrome タブバーを実装するための CSS のヒント

今回は、Google Chrome のタブバーのような、特殊な丸い角を持つナビゲーション バーのレイ...