コーディング時間を節約する JavaScript スニペット

JavaScript は強力な言語ですが、繰り返しコードを記述すると時間がかかることがあります。これら 10 個の便利な JavaScript スニペットは、一般的なタスクを簡素化し、生産性を向上させます。飛び込んでみましょう!

---

1. 要素がビューポートにあるかどうかを確認する

要素がビューポート内に表示されているかどうかを簡単に判断します:

const isInViewport = (element) => {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

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

外部ライブラリを使用せずにテキストをクリップボードにすばやくコピーします:

const copyToClipboard = (text) => {  navigator.clipboard.writeText(text); };

---

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

次のワンライナーを使用して、配列内の要素の順序をランダム化します。

const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);

---

4. 多次元配列の平坦化

ネストされた配列を単一レベルの配列に変換します:

const flattenArray = (arr) => arr.flat(Infinity);

---

5. 配列内の固有の値を取得する

配列から重複を削除します:

const uniqueValues = (array) => [...new Set(array)];

---

6. ランダムな 16 進カラーを生成する

ランダムな 16 進カラーを簡単に作成します:

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;

---

7. 関数のデバウンス

関数が頻繁に起動しすぎるのを防ぎ、検索入力に最適です:

const debounce = (func, delay) => {  let timeoutId;  return (...args) => {    clearTimeout(timeoutId);    timeoutId = setTimeout(() => func(...args), delay);  }; };

---

8. ダークモードの検出

ユーザーのシステムがダーク モードかどうかを確認します:

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

---

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

最初の文字を大文字にする簡単なスニペット:

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

---

10. ランダムな整数を生成する

範囲内の乱数を生成します:

const randomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

---

結論

これらのスニペットは、JavaScript プロジェクトの時間と労力を節約する優れた方法です。ブックマークするか、個人用ユーティリティ ライブラリに統合してください!

もっと詳しく知る

JavaScript のヒントやテクニックの詳細については、スクリプト バイナリに関する元の記事を参照してください。

以上がコーディング時間を節約する JavaScript スニペットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。