本文主要介绍了Javascript0基础入门之常用的 JavaScript函数，通过具体的内容向大家展现，希望对大家Javascript的学习有所帮助。

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;

};

你还有使用其他有用的函数吗?在评论里分享一下怎么样?

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取最新技术干货教程资源