Heim > Web-Frontend > js-Tutorial > Hauptteil

11 JS-Tipps, die es wert sind, gesammelt zu werden und die für die Entwicklung hilfreich sind

青灯夜游
Freigeben: 2021-03-02 09:41:38
nach vorne
1486 Leute haben es durchsucht

In diesem Artikel erfahren Sie 11 JS-Tipps, die für die Entwicklung hilfreich sind. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

11 JS-Tipps, die es wert sind, gesammelt zu werden und die für die Entwicklung hilfreich sind

Verwandte Empfehlungen: JavaScript-Video-Tutorial

1. Generieren Sie eine Liste mit Zufallszahlen

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

3. RGB → Konvertierung in Hexadezimalzahl

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

4. Hexadezimal→RGB konvertieren

Wie konvertiert man es zurück? Dies ist eine großartige Möglichkeit, dieses Ziel zu erreichen.
const rgb2hex = ([r, g, b]) =>
  `#${(1 << 24) + (r << 16) + (g << 8) + b}`.toString(16).substr(1);

rgb2hex([76, 11, 181]);
// #4c0bb5
Nach dem Login kopieren

5. Ungerade oder gerade Zahl

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

hex2rgb("#4c0bb5");
// [76, 11, 181]
Nach dem Login kopieren

6. Überprüfen Sie die gültige URL

const value = 232;  

if (value & 1) console.log("odd");
else console.log("even");
// even
Nach dem Login kopieren

7. Manchmal müssen wir 6 Minuten drucken vor dem Datum, möchten aber nicht, dass eine große Bibliothek fertiggestellt wird. Hier ist ein kleiner Ausschnitt, der genau das tut:
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
Nach dem Login kopieren

8. Generieren von Routen mit Parametern

Wir machen oft viel Arbeit, wenn wir mit Routen/Pfaden umgehen, und wir müssen sie immer manipulieren. Wenn wir einen Pfad mit Parametern generieren müssen, um den Browser dorthin zu schieben, kann

uns helfen!

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;
Nach dem Login kopieren

9. Parameter aus Pfad abrufen

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
Nach dem Login kopieren

generatePath10. Pfad mit Abfragezeichenfolge generieren

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 }
Nach dem Login kopieren
Originaladresse: https://dev.to/11-javascript-tips-and-tricks-to - code-like-a-superhero-vol-2-mp6

Autor: Orkhan JafarovÜbersetzungsadresse: https://segmentfault.com/a/1190000039122988

Weitere Programmierkenntnisse finden Sie unter:

Programmierung Video

! !

Das obige ist der detaillierte Inhalt von11 JS-Tipps, die es wert sind, gesammelt zu werden und die für die Entwicklung hilfreich sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage