Top 10+1 JavaScript one-liners I love to use
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
今日は、私のプロジェクト作成に大いに役立った、最も有用でシンプルなJavaScriptのワンライナーをいくつか紹介します。
以下は、私が日常的に使用している、ワークフローを効率化するためのトップ10のJavaScriptワンライナーです。これらのスニペットは簡単でありながら強力で、最小限の労力でアプリのパフォーマンスと機能性を向上させます。
それでは、さっそく始めましょう！
1. 配列が空かどうかをチェックする
const isEmpty = arr => arr.length === 0;
配列に要素がないかどうかをチェックします。
2. 現在のタイムスタンプを取得する
const timestamp = () => Date.now();
1970年1月1日からのミリ秒数を返します。 使用可能な日付に変換するには、以下のコードを適用します：
const myDate = new Date(timestamp).toLocaleString();
3. 配列をクローンする
const cloneArray = arr => [...arr];
配列の浅いコピーを作成します。
4. 配列から偽値を削除する
const removeFalsy = arr => arr.filter(Boolean);
false、null、0、""、undefined、NaNなどの値を配列から削除します。
5. 文字列の配列を大文字に変換する
const toUpperCaseArray = arr => arr.map(s => s.toUpperCase());
配列内のすべての文字列要素を大文字に変換します。
6. 配列内のすべての数値を合計する
const sum = arr => arr.reduce((a, b) => a + b, 0);
配列内の数値の合計を計算します。
7. 配列からランダムな要素を取得する
const randomElement = arr => arr[Math.floor(Math.random() * arr.length)];
配列からランダムな要素を返します。
8. ランダムな16進数カラーを生成する
const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
ランダムな16進数のカラーコードを生成します。
9. 関数をデバウンスする（基本的な実装）
const debounce = (fn, delay) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; };
関数の実行を遅延させることで、関数が発火できる頻度を制限します。
10. 関数をスロットルする（基本的な実装）
const throttle = (fn, limit) => { let lastFunc; let lastRan; return (...args) => { if (!lastRan) { fn(...args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(() => { if ((Date.now() - lastRan) >= limit) { fn(...args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; };
指定された時間間隔で1回だけ関数が発火できるように、関数の発火頻度を制限します。
11. 文字列内のHTMLをエスケープする
const escapeHTML = str => str.replace(/[&<>"']/g, match => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[match]));
XSS攻撃を防ぐために、特殊なHTML文字をエスケープします。
これらのスニペットを日常のワークフローに統合することで、プロジェクトのセキュリティと機能性を効率的かつ効果的に向上させることができます。
ハッピーコーディング！
