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. 產生隨機十六進位顏色

輕鬆創建隨機十六進位顏色：

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 提示和技巧，請查看有關 Script Binary 的原始文章。

以上是JavaScript 片段可以節省您的編碼時間的詳細內容。更多資訊請關注PHP中文網其他相關文章！