11 個對開發有幫助的 JS 技巧,進收藏夾當小詞典吧!

前端小智
作者:Orkhan Jafarov
譯者:前端小智
來源: dev
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

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('http://www.tvxinternet.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' }

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


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://dev.to/11-javascript-...

交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

閱讀 2.5k

終身學習者
我要先堅持分享20年,大家來一起見證吧。
avatar
前端小智
前端開發工程師

我不是什么大牛,我其實想做的就是一個傳播者。內容可能過于基礎,但對于剛入門的人來說或許是一個窗口,一個解惑之窗。我要先堅持分享20年,大家來一起見證吧。

57.1k 聲望
9.9k 粉絲
0 條評論
avatar
前端小智
前端開發工程師

我不是什么大牛,我其實想做的就是一個傳播者。內容可能過于基礎,但對于剛入門的人來說或許是一個窗口,一個解惑之窗。我要先堅持分享20年,大家來一起見證吧。

57.1k 聲望
9.9k 粉絲
宣傳欄
一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>