對開發有幫助的JS技巧有哪些

這篇文章主要介紹“對開發有幫助的JS技巧有哪些”，在日常操作中，相信很多人在對開發有幫助的JS技巧有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”對開發有幫助的JS技巧有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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→轉換為十六進制

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

4. 轉換十六進制→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://segmentfault.com/u/minnanitkong/articles') // true  isValidURL("https//invalidto"); // false

7.距離過去到現在時間表示

有時我們需要打印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;

8. 用參數生成路徑

我們在處理路線/路徑時常做很多工作，我們總是需要對其進行操作。當我們需要生成帶有參數的路徑以將瀏覽器推送到那里時，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

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.用查詢字符串生成路徑

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

到此，關于“對開發有幫助的JS技巧有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！