这些 JavaScript函数让你的工作更加 So Easy!

爱丽丝13 等级 665 0 1
标签: httpsJavascript

作者: YoussefZidan
译者:前端小智
来源:dev

点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq44924588...

在本文中,分享一些我几乎在每个项目中都会用到的一些函数。

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()NaNundefinedfunctionNumberInfinity等数据类型一起工作。

你想深度克隆上述数据类型,可以使用 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;
};

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

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


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://dev.to/youssefzidan/j...

交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

这些 JavaScript函数让你的工作更加 So Easy!

本文转自 https://segmentfault.com/a/1190000039182225,如有侵权,请联系删除。

收藏
评论区

相关推荐

Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
这些 JavaScript函数让你的工作更加 So Easy!
作者: YoussefZidan 译者:前端小智 来源:dev 点赞再看,养成习惯 本文 GitHub https://github.com/qq44924588...(https://github.com/qq449245884/xiaozhi) 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
Moncler Outlet was admittedly
You need shoes which have a higher rate of shock absorption and **[ugg womens shoes](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.dahugs.com%2F)** are also light in
10 个非常有用的 SVG 动画的 JavaScript 库
SVG 通常可以用作跨分辨率视频。这意味着在一块高分屏幕上不会降低图片的锐度。此外,你甚至可以让SVG动起来,通过使用一些javascript类库。下面,我们分享一些javascript类库,这些类库会帮助我们将SVG动画提高一个等级。 1\. Vivus --------- [Vivus](https://www.oschina.net/action/
CSRF 令牌 & JavaScript
当构建由 JavaScript 驱动的应用时,可以方便地让 JavaScript HTTP 函数库发起每一个请求时自动附上 CSRF 令牌。默认情况下, `resources/js/bootstrap.js` 文件会用 Axios HTTP 函数库注册的 `csrf-token` meta 标签中的值。如果你不使用这个函数库,你需要手动为你的应用配置此行为。
ES2020 中 Javascript 10 个你应该知道的新功能
好消息 - ES2020 新功能已经落地!这就意味着,现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变。 **1、BigInt** ------------ BigInt,Javascript 中最期待的新功能终于落地。它允许开发者在 JS 中使用更大的整数进行数据处理。 之前,Javas
JavaScript 核心原理精讲【朋友圈已刷屏】
作为一名前端工程师,JavaScript 你一定每天都在用。但是,即便工作 5 年以上的前端也不一定用得非常熟,甚至很多前端对 JavaScript 的掌握程度仅仅停留在会用的层面。 而且 Vue/React 等框架的便利,更是让前端人无需苦学 JavaScript 原生,就可以快速构建一个网页。它解决了开发者短期的痛点,却为依赖框架开发的程序员埋下长期隐
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript中8个常见的陷阱
**译者按:** 漫漫编程路,总有一些坑让你泪流满面。 原文: [Who said javascript was easy ?](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fhackernoon.com%2Fwho-said-javascript-easy-f4a1d5b399b8)
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript常见的10个错误
10 种最常见的 Javascript 错误 ---------------------- **以下是 JavaScript 错误 Top 10:** 为了便于阅读,我们将每个错误描述都缩短了。接下来,让我们深入到每一个错误,来确定什么会导致它,以及如何避免创建它。 **1\. Uncaught TypeError: Cannot read prope
Javascript开发人员偏爱Deno而不是Node的5大原因
![](https://oscimg.oschina.net/oscnet/2f078ca0f30b400261bf865253aa28f0a40.jpg) NodeJS的作者Ryan Dahl发布了一个新的运行时,旨在解决Node的许多缺点。你最初的反应可能是“哦,太棒了,另一个Javascript框架?正是我所需
Node.js
1.Node来历 --------     2009年,正是推出基于Javascript语言和V8引擎的开源Web服务项目,命名为Node.js,Node.js是第一次把Javascript带到后端开发。全很很多开发人员都熟悉Javascript,所以Node.js一下子就火了。     Javascript语言本身是完善的函数式语言,在前端开发时,开发
Spring Boot 支持 HTTPS 如此简单,So easy!
这里讲的是 Spring Boot 内嵌式 Server 打 jar 包运行的方式,打 WAR 包部署的就不存在要 Spring Boot 支持 HTTPS 了,需要去外部对应的 Server 配置。 你所需具备的基础 -------- * [什么是 Spring Boot?](https://www.oschina.net/action/GoToL