這些 JavaScript函數讓你的工作更加 So Easy!

作者：前端小智 2021-03-03 08:02:13

你是否有一個DDL，它每n分鐘顯示一天的時間?用這個函數。

本文已經過原作者 YoussefZidan 授權翻譯。

randomNumber()

獲取指定區間的隨機數。

** 
 * 在最小值和最大值之間生成隨機整數。 
 * @param {number} min Min number 
 * @param {number} max Max Number 
 */ 
export const randomNumber = (min = 0, max = 1000) => 
  Math.ceil(min + Math.random() * (max - min)); 
 
// Example 
console.log(randomNumber()); // 97

capitalize()

將字符串的第一個字母變為大寫。

/** 
 * Capitalize Strings. 
 * @param {string} s String that will be Capitalized 
 */ 
export const capitalize = (s) => { 
  if (typeof s !== "string") return ""; 
  return s.charAt(0).toUpperCase() + s.slice(1); 
} 
 
// Example 
console.log(capitalize("cat")); // Cat

truncate();

這對于長字符串很有用，特別是在表內部。

/** 
 * 截斷字符串.... 
 * @param {string} 要截斷的文本字符串 
 * @param {number} 截斷的長度 
 */ 
export const truncate = (text, num = 10) => { 
  if (text.length > num) { 
    return `${text.substring(0, num - 3)}...` 
  } 
  return text; 
} 
 
// Example 
console.log(truncate("this is some long string to be truncated"));   
 
// this is...

toTop();

滾到到底部，可以通過 behavior 屬性指定滾動速度狀態。

/** 
 * Scroll to top 
 */ 
export const toTop = () => { 
  window.scroll({ top: 0, left: 0, behavior: "smooth" }); 
};

softDeepClone()

這個方法是經常被用到的，因為有了它，我們可以深度克隆嵌套數組或對象。

不過，這個函數不能與new Date()、NaN、undefined、function、Number、Infinity等數據類型一起工作。

你想深度克隆上述數據類型，可以使用 lodash 中的 cloneDeep() 函數。

/** 
 * Deep cloning inputs 
 * @param {any} input Input 
 */ 
export const softDeepClone= (input) => JSON.parse(JSON.stringify(input));

appendURLParams() & getURLParams()

快速添加和獲取查詢字符串的方法，我通常使用它們將分頁元數據存儲到url。

/** 
 * Appen query string and return the value in a query string format. 
 * @param {string} key 
 * @param {string} value 
 */ 
export const appendURLParams = (key, value) => { 
  const searchParams = new URLSearchParams(window.location.search).set(key, value); 
  return searchParams.toString(); 
}; 
 
// example 
console.log(appendURLParams("name", "youssef")) // name=youssef 
 
/** 
 * Get param name from URL. 
 * @param {string} name 
 */ 
export const getURLParams = (name) => new URLSearchParams(window.location.search).get(name); 
 
// Example 
console.log(getURLParams(id)) // 5

getInnerHTML()

每當服務器返回一串HTML元素時，我都會使用它。

/** 
 * 獲取HTML字符串的內部Text 
 * @param {string} str A string of HTML 
 */ 
export const getInnerHTML = (str) => str.replace(/(<([^>]+)>)/gi, "");

scrollToHide()

上滾動以顯示HTML元素，向下滾動以將其隱藏。

/** 
 * 下滾動時隱藏HTML元素。 
 * @param {string} 元素的 id 
 * @param {string} distance in px ex: "100px" 
 */ 
export const scrollToHide = (id, distance) => { 
  let prevScrollpos = window.pageYOffset; 
  window.onscroll = () => { 
    const currentScrollPos = window.pageYOffset; 
    if (prevScrollpos > currentScrollPos) { 
      document.getElementById(id).style.transform = `translateY(${distance})`; 
    } else { 
      document.getElementById(id).style.transform = `translateY(-${distance})`; 
    } 
    prevScrollpos = currentScrollPos; 
  }; 
};

humanFileSize ()

傳入字節為單位的文件，返回我們日常所熟悉的單位。

/** 
 * Converting Bytes to Readable Human File Sizes. 
 * @param {number} bytes Bytes in Number 
 */ 
export const humanFileSize = (bytes) => { 
  let BYTES = bytes; 
  const thresh = 1024; 
 
  if (Math.abs(BYTES) < thresh) { 
    return `${BYTES} B`; 
  } 
 
  const units = ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; 
 
  let u = -1; 
  const r = 10 ** 1; 
 
  do { 
    BYTES /= thresh; 
    u += 1; 
  } while (Math.round(Math.abs(BYTES) * r) / r >= thresh && u < units.length - 1); 
 
  return `${BYTES.toFixed(1)} ${units[u]}`; 
}; 
 
// Example 
console.log(humanFileSize(456465465)); // 456.5 MB

getTimes()

你是否有一個DDL，它每n分鐘顯示一天的時間?用這個函數。

/** 
 * Getting an Array of Times + "AM" or "PM". 
 * @param {number} minutesInterval 
 * @param {number} startTime  
 */ 
export const getTimes = (minutesInterval = 15, startTime = 60) => { 
  const times = []; // time array 
  const x = minutesInterval; // minutes interval 
  let tt = startTime; // start time 
  const ap = ["AM", "PM"]; // AM-PM 
 
  // loop to increment the time and push results in array 
  for (let i = 0; tt < 24 * 60; i += 1) { 
    const hh = Math.floor(tt / 60); // getting hours of day in 0-24 format 
    const mm = tt % 60; // getting minutes of the hour in 0-55 format 
    times[i] = `${`${hh === 12 ? 12 : hh % 12}`.slice(-2)}:${`0${mm}`.slice(-2)} ${ 
      ap[Math.floor(hh / 12)] 
    }`; // pushing data in array in [00:00 - 12:00 AM/PM format] 
    tt += x; 
  } 
  return times; 
}; 
 
// Example 
console.log(getTimes()); 
/* [ 
    "1:00 AM", 
    "1:15 AM", 
    "1:30 AM", 
    "1:45 AM", 
    "2:00 AM", 
    "2:15 AM", 
    "2:30 AM", 
    // .... 
    ] 
*/

setLocalItem() & getLocalItem()

讓 LocalStorage 具有過期時間。

/** 
 * Caching values with expiry date to the LocalHost. 
 * @param {string} key Local Storage Key 
 * @param {any} value Local Storage Value 
 * @param {number} ttl Time to live (Expiry Date in MS) 
 */ 
export const setLocalItem = (key, value, ttl = duration.month) => { 
  const now = new Date(); 
  // `item` is an object which contains the original value 
  // as well as the time when it's supposed to expire 
  const item = { 
    value, 
    expiry: now.getTime() + ttl, 
  }; 
  localStorage.setItem(key, JSON.stringify(item)); 
}; 
 
/** 
 * Getting values with expiry date from LocalHost that stored with `setLocalItem`. 
 * @param {string} key Local Storage Key 
 */ 
export const getLocalItem = (key) => { 
  const itemStr = localStorage.getItem(key); 
  // if the item doesn't exist, return null 
  if (!itemStr) { 
    return null; 
  } 
  const item = JSON.parse(itemStr); 
  const now = new Date(); 
  // compare the expiry time of the item with the current time 
  if (now.getTime() > item.expiry) { 
    // If the item is expired, delete the item from storage 
    // and return null 
    localStorage.removeItem(key); 
    return null; 
  } 
  return item.value; 
};

formatNumber()

/** 
 * Format numbers with separators. 
 * @param {number} num 
 */ 
export const formatNumber = (num) => num.toLocaleString(); 
 
// Example 
console.log(formatNumber(78899985)); // 78,899,985

我們還可以添加其他選項來獲取其他數字格式，如貨幣、距離、權重等。

export const toEGPCurrency = (num) => 
  num.toLocaleString("ar-EG", { style: "currency", currency: "EGP" }); 
 
export const toUSDCurrency = (num) => 
  num.toLocaleString("en-US", { style: "currency", currency: "USD" }); 
 
console.log(toUSDCurrency(78899985)); // $78,899,985.00 
console.log(toEGPCurrency(78899985)); // ٧٨٬٨٩٩٬٩٨٥٫٠٠ ج.م.

toFormData()

每當我需要向服務器發送文件時，我就使用這個函數。

/** 
 * Convert Objects to Form Data Format. 
 * @param {object} obj 
 */ 
export const toFormData = (obj) => { 
  const formBody = new FormData(); 
  Object.keys(obj).forEach((key) => { 
    formBody.append(key, obj[key]) 
  }) 
   
  return formBody; 
}

getScreenWidth()

獲取一個表示屏幕寬度的字符串。

/** 
 * Detect screen width and returns a string representing the width of the screen. 
 */ 
export const getScreenWidth = () => { 
  const screenWidth = window.screen.width; 
  if (screenWidth <= 425) return "mobile"; 
  if (screenWidth <= 768) return "tablet"; 
  if (screenWidth <= 1024) return "laptopSm"; 
  if (screenWidth <= 1440) return "laptopLg"; 
  if (screenWidth <= 2560) return "HD"; 
  return screenWidth; 
};

檢查數組中的每個元素是否存在于另一個數組中。

export const containsAll = (baseArr, arr) => { 
  let all = false; 
 
  for (let i = 0; i < arr.length; i += 1) { 
    if (baseArr.includes(arr[i])) { 
      all = true; 
    } else { 
      all = false; 
      return all; 
    } 
  } 
 
  return all; 
};

你還有使用其他有用的函數嗎?在評論里分享一下怎么樣?

完~，我是小智，我要去刷碗去了。

作者：YoussefZidan 譯者：前端小智來源：dev原文：https://dev.to/youssefzidan/javascript-functions-that-will-make-your-life-much-easier-1imh

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。

責任編輯：武曉燕來源：大遷世界

JavaScript 函數字節