玩转Javascript魔法篇

简介: 这些都是平时我们经常在业务中会用的功能,实现起来的方法不止一种,但是我们要经常思考,举一反三,追求一种简洁高效的写法,不是吗?

7_0)52US2JO]BY1X[Q@`B88.png


1.生成一连串随机数

我们经常碰到一些奇怪的需求,比如生成一定长度的随机数

Array.from({ length: 1000 }, Math.random)
// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items


2.生成整数数组

利用这招很容易生成指定长度的递增数组

Array.from({ length: 1000 }, (v, i) => i)
// [0, 1, 2, 3, 4, 5, 6....999]


3.颜色值RGB格式和HEX之间的转化

const rgb2hex = ([r, g, b]) =>
  `#${(1 << 24) + (r << 16) + (g << 8) + b}`.toString(16).substr(1);
rgb2hex([76, 11, 181]);
// #4c0bb5


4.颜色值HEX格式和RGB之间的转化

const hex2rgb = hex =>
  [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16));
hex2rgb("#4c0bb5");
// [76, 11, 181]


5.奇偶数判断

const value = 232;  
if (value & 1) console.log("odd");
else console.log("even");
// even


6.有效URL判断

const isValidURL = (url) => {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
};
isValidURL("https://dev.to");
// true
isValidURL("https//invalidto");
// false


7.多长时间以前

我们经常有这样的需求,在页面中打印已经过去多长时间6 minute(s) ago,但是我们又不想为了这点功能去引入一个日期的库,这里一个简单的函数帮你搞定

const fromAgo = (date) => {
  const ms = Date.now() - date.getTime();
  const seconds = Math.round(ms / 1000);
  const minutes = Math.round(ms / 60000);
  const hours = Math.round(ms / 3600000);
  const days = Math.round(ms / 86400000);
  const months = Math.round(ms / 2592000000);
  const years = Math.round(ms / 31104000000);
  switch (true) {
    case seconds < 60:
      return `${seconds} second(s) ago"`;
    case minutes < 60:
      return `${minutes} minute(s) ago"`;
    case hours < 24:
      return `${hours} hour(s) ago"`;
    case days < 30:
      return `${days} day(s) ago`;
    case months < 12:
      return `${months} month(s) ago`;
    default:
      return `${years} year(s) ago`;
  }
};
const createdAt = new Date(2021, 0, 5);
fromAgo(createdAt); // 14 day(s) ago;


8.通过传参生成路径

const generatePath = (path, obj) =>
    path.replace(/(\:[a-z]+)/g, (v) => obj[v.substr(1)]);
const route = "/app/:page/:id";
generatePath(route, {
  page: "products",
  id: 85,
});
// /app/products/123


9.从路径中获取参数

我们经常需要从页面路径中解析出我们要的参数,通过传入路径和路径匹配规则参数就能轻松获取

const getPathParams = (path, pathMap, serializer) => {
  path = path.split("/");
  pathMap = pathMap.split("/");
  return pathMap.reduce((acc, crr, i) => {
    if (crr[0] === ":") {
      const param = crr.substr(1);
      acc[param] = serializer && serializer[param]
        ? serializer[param](path[i])
        : path[i];
    }
    return acc;
  }, {});
};
getPathParams("/app/products/123", "/app/:page/:id");
// { page: 'products', id: '123' }
getPathParams("/items/2/id/8583212", "/items/:category/id/:id", {
  category: v => ['Car', 'Mobile', 'Home'][v],
  id: v => +v
});
// { category: 'Home', id: 8583212 }


10.参数生成页面路径

这种是我们经常要在业务中用到的,通过一个对象参数拼接成URL后面的请求参数,注意它的写法,如果是你可能用for循环

const generatePathQuery = (path, obj) =>
  path +
  Object.entries(obj)
    .reduce((total, [k, v]) => (total += `${k}=${encodeURIComponent(v)}&`), "?")
    .slice(0, -1);
generatePathQuery("/user", { name: "Orkhan", age: 30 }); 
// "/user?name=Orkhan&age=30"


11.从URL请求字符串中解析出参数对象

const getQueryParams = url =>
  url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => {
    const [key, value] = crr.split("=");
    total[key] = value;
    return total;
  }, {});
getQueryParams("/user?name=Orkhan&age=30");
// { name: 'Orkhan', age: '30' }

这些都是平时我们经常在业务中会用的功能,实现起来的方法不止一种,但是我们要经常思考,举一反三,追求一种简洁高效的写法,不是吗?


目录
相关文章
|
JavaScript 前端开发
70.【JavaScript 6.0】(二)
70.【JavaScript 6.0】
55 0
|
1月前
|
Web App开发 JavaScript 前端开发
javascript主要特点有哪些,简单描述javascript的特点
javascript主要特点有哪些,简单描述javascript的特点
38 0
|
JavaScript 前端开发 Java
70.【JavaScript 6.0】(三)
70.【JavaScript 6.0】
55 0
|
Web App开发 JavaScript 前端开发
JavaScript Day01 初识JavaScript 1
JavaScript Day01 初识JavaScript
82 0
|
存储 JSON JavaScript
JavaScript Day01 初识JavaScript 3
JavaScript Day01 初识JavaScript
83 0
|
存储 JavaScript 前端开发
JavaScript Day01 初识JavaScript 2
JavaScript Day01 初识JavaScript
52 0
|
JavaScript 前端开发
【JavaScript】什么是JavaScript?
【JavaScript】什么是JavaScript?
87 0
|
JavaScript 前端开发 Java
JavaScript简识
本文主要介绍前端三剑客中的JavaScript的基础语法,关于JavaScript的DOM API在下文中介绍。
147 0
JavaScript简识
|
JavaScript 前端开发
JavaScript 介绍
JavaScript 介绍
198 0
JavaScript 介绍
|
JavaScript 前端开发 Java
JavaScript的知识总结(5)
JavaScript的知识总结(4)
105 0