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

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

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

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

怎麼把它轉換回去？這是實現該目標的一種好方法。

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

使用 位 運算的方式：

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

const isValidURL = (url) => {  try {    new URL(url);    return true;  } catch (error) {    return false;  }}isValidURL('https://segmentfault.com/u/minnanitkong/articles')// trueisValidURL("https//invalidto");// false

有時我們需要列印6分鐘前的日期，但不希望很大的庫來完成。這裡有一個小片段可以做到這一點：

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;

我們在處理路線/路徑時常做很多工作，我們總是需要對其進行操作。當我們需要生成帶有引數的路徑以將瀏覽器推送到那裡時，generatePath 可以幫助我們！

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

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 }

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' }

我是小智，我要去刷碗了，我們下期見~

原文：https://dev.to/11-javascript-tips-and-tricks-to-code-like-a-superhero-vol-2-mp6