Home > Web Front-end > JS Tutorial > body text

11 JS tips worth collecting that are helpful for development

青灯夜游
Release: 2021-03-02 09:41:38
forward
1481 people have browsed it

This article will share with you 11 JS tips that are helpful for development. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

11 JS tips worth collecting that are helpful for development

Related recommendations: JavaScript video tutorial

1. Generate a list with random numbers

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

2. Generate a list with numbers

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

3. RGB→convert to hexadecimal

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

rgb2hex([76, 11, 181]);
// #4c0bb5
Copy after login

4. Convert hexadecimal → RGB

How to convert it back? This is a great way to achieve that goal.

const hex2rgb = hex =>
  [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16));

hex2rgb("#4c0bb5");
// [76, 11, 181]
Copy after login

5. Odd or even number

Use bitwise operations:

const value = 232;  

if (value & 1) console.log("odd");
else console.log("even");
// even
Copy after login

6. Check for valid URL

const isValidURL = (url) => {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

isValidURL(&#39;https://segmentfault.com/u/minnanitkong/articles&#39;)
// true

isValidURL("https//invalidto");
// false
Copy after login

7. Representation of time from past to present

Sometimes we need to print the date 6 minutes ago, but we don’t want a large library to complete it. Here's a small snippet to do just that:

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;
Copy after login

8. Generating routes with parameters

We do a lot of work when dealing with routes/paths, we always It needs to be acted upon. When we need to generate a path with parameters to push the browser there, generatePath can help us!

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
Copy after login

9. Get parameters from path

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: &#39;products&#39;, id: &#39;123&#39; }

getPathParams("/items/2/id/8583212", "/items/:category/id/:id", {
  category: v => [&#39;Car&#39;, &#39;Mobile&#39;, &#39;Home&#39;][v],
  id: v => +v
});
// { category: &#39;Home&#39;, id: 8583212 }
Copy after login

10. Generate path with query string

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: &#39;Orkhan&#39;, age: &#39;30&#39; }
Copy after login

Original address: https://dev.to/11-javascript-tips-and-tricks-to-code-like-a-superhero-vol-2-mp6

Author: Orkhan Jafarov

Translation address: https://segmentfault.com/a/1190000039122988

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of 11 JS tips worth collecting that are helpful for development. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template