国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術(shù)干貨  > 21個面向Web開發(fā)人員的JavaScript技巧匯總

21個面向Web開發(fā)人員的JavaScript技巧匯總

來源:千鋒教育
發(fā)布人:wjy
時間: 2022-06-01 13:26:00 1654061160

  作為程序員,編寫代碼也需要大量的技巧。好的代碼可以讓人耳目一新、通俗易懂、舒適自然,同時又充滿成就感。因此,整理了一些經(jīng)常使用的JavaScript開發(fā)技巧,希望能讓大家寫出耳目一新、通俗易懂、舒適自然的代碼。

21個面向Web開發(fā)人員的JavaScript技巧匯總

  **字符串技巧**

  **1、比較時間**

  ```text

  const time1 = "2022-03-02 09:00:00";

  const time2 = "2022-03-02 09:00:01";

  const overtime = time1 < time2;

  // overtime => true

  ```

  **2、格式化money**

  ```text

  const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

  const money = ThousandNum(1000000);

  // money => '1,000,000'

  ```

  **3、生成隨機ID**

  ```text

  const RandomId = len => Math.random().toString(36).substr(3, len);

  const id = RandomId(10);

  // id => "xdeguewg1f"

  ```

  **4、生成隨機 HEX 顏色值**

  ```text

  const RandomColor = () => "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");

  const color = RandomColor();

  // color => "#2cbf89"

  ```

  **5、Generate star ratings**

  ```text

  const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

  const start = StartScore(3);

  // start => '★★★☆☆'

  ```

  **6、網(wǎng)址查詢參數(shù)**

  ```text

  const params = new URLSearchParams(location.search.replace(/\?/ig, "")); // location.search = "?name=test&sex=man"

  params.has("test"); // true

  params.get("sex"); // "man"

  ```

  **數(shù)字技能**

  **7、Arrangement**

  ```text

  用 Math.floor() 代替正數(shù),用 Math.ceil() 代替負數(shù)

  const num1 = ~~ 1.19;

  const num2 = 2.29 | 0;

  const num3 = 3.09 >> 0;

  // num1 num2 num3 => 1 2 3

  ```

  **8、零填充**

  ```text

  const FillZero = (num, len) => num.toString().padStart(len, "0");

  const num = FillZero(1234, 5);

  // num => "01234"

  ```

  **9、轉(zhuǎn)數(shù)**

  ```text

  僅對 null、“”、false、數(shù)字字符串有效

  const num1 = +null;

  const num2 = +"";

  const num3 = +false;

  const num4 = +"169";

  // num1 num2 num3 num4 => 0 0 0 169

  ```

  **10、時間戳**

  ```text

  const timestamp = +new Date("2022-03-22");

  // timestamp => 1647907200000

  ```

  **11、精確小數(shù)**

  ```text

  const RoundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;

  const num = RoundNum(1.2345, 2);

  // num => 1.23

  ```

  **12、平價**

  ```text

  const OddEven = num => !!(num & 1) ? "odd" : "even";

  const num = OddEven(2);

  // num => "even"

  ```

  **13、取最小值最大值**

  ```text

  const arr = [0, 1, 2, 3];

  const min = Math.min(...arr);

  const max = Math.max(...arr);

  // min max => 0 3

  ```

  **14、生成范圍隨機數(shù)**

  ```text

  const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

  const num = RandomNum(1, 10); // 5

  布爾技能

  ```

  **布爾技能**

  **15、短路運算符**

  ```text

  const a = d && 1; // Fake operation, judge from left to right, return a false value when encountering a false value, and no longer execute it later, otherwise return the last true value

  const b = d || 1; // Take the true operation, judge from left to right, return the true value when encountering the true value, and do not execute it later, otherwise return the last false value

  const c = !d; // Returns false if a single expression converts to true, otherwise returns true

  ```

  **16、確定數(shù)據(jù)類型**

  ```text

  可確定的類型:undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap

  function DataType(tgt, type) {

  const dataType = Object.prototype.toString.call(tgt).replace(/\[object (\w+)\]/, "$1").toLowerCase();

  return type ? dataType === type : dataType;

  }

  DataType("test"); // "string"

  DataType(20220314); // "number"

  DataType(true); // "boolean"

  DataType([], "array"); // true

  DataType({}, "array"); // false

  ```

  **17、檢查數(shù)組是否為空**

  ```text

  const arr = [];

  const flag = Array.isArray(arr) && !arr.length;

  // flag => true

  18、滿足條件時執(zhí)行

  const flagA = true; // Condition A

  const flagB = false; // Condition B

  (flagA || flagB) && Func(); // Execute when A or B is satisfied

  (flagA || !flagB) && Func(); // Execute when A is satisfied or B is not satisfied

  flagA && flagB && Func(); // Execute when both A and B are satisfied

  flagA && !flagB && Func(); // Execute when A is satisfied and B is not satisfied

  19、如果非假則執(zhí)行

  const flag = false; // undefined、null、""、0、false、NaN

  !flag && Func();

  ```

  **20、數(shù)組不為空時執(zhí)行**

  ```text

  const arr = [0, 1, 2];

  arr.length && Func();

  ```

  **21、對象不為空時執(zhí)行**

  ```text

  const obj = { a: 0, b: 1, c: 2 };

  Object.keys(obj).length && Func();

  ```

  **- End -**

  更多關(guān)于“html5培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗,課程大綱更科學更專業(yè),有針對零基礎(chǔ)的就業(yè)班,有針對想提升技術(shù)的提升班,高品質(zhì)課程助理你實現(xiàn)夢想。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學 138****2860 剛剛成功領(lǐng)取
王同學 131****2015 剛剛成功領(lǐng)取
張同學 133****4652 剛剛成功領(lǐng)取
李同學 135****8607 剛剛成功領(lǐng)取
楊同學 132****5667 剛剛成功領(lǐng)取
岳同學 134****6652 剛剛成功領(lǐng)取
梁同學 157****2950 剛剛成功領(lǐng)取
劉同學 189****1015 剛剛成功領(lǐng)取
張同學 155****4678 剛剛成功領(lǐng)取
鄒同學 139****2907 剛剛成功領(lǐng)取
董同學 138****2867 剛剛成功領(lǐng)取
周同學 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
今日頭條展現(xiàn)量是什么?今日頭條展現(xiàn)量規(guī)則分析

目前頭條用戶會發(fā)現(xiàn)微頭條和問答新增了“展現(xiàn)量”指標。那么這個今日頭條展現(xiàn)量是什么意思呢?如何提高呢?下面千鋒教育小編就和大家說...詳情>>

2023-09-19 09:15:47
我想直播帶貨去哪里找貨源一件代發(fā)

現(xiàn)在直播帶貨是一個非常火的行業(yè),越來越多的人進入到這個圈子,但是,認真地說,直播帶貨能不能賺到錢還是要看自己。雖然這一行業(yè)火,收入高,...詳情>>

2023-09-19 08:41:02
入駐短視頻mcn需要多少錢?有哪些費用?

眾所周知,現(xiàn)在短視頻成了很多人的自媒體創(chuàng)業(yè)道路之一,越來越多人喜歡在網(wǎng)上消遣時間,購物等。也有很多優(yōu)秀的博主去做出很多新的內(nèi)容,那么入...詳情>>

2023-09-19 08:12:47
短視頻帶貨應(yīng)該注冊什么公司?需要什么資料?

短視頻大家應(yīng)該都非常熟悉,現(xiàn)在很多人都喜歡在閑暇的時候刷短視頻,短視頻平臺也開始了直播帶貨,商家也都開始創(chuàng)業(yè)了,那么短視頻帶貨需要營業(yè)...詳情>>

2023-09-19 08:09:31
怎樣投抖加不花錢?別人能看出來嗎?

抖音一些視頻為了獲取更多點擊,一些博主機會投抖加。其實抖加的投放沒有絕對正確的方法,而不同賬號和視頻投放的策略都是不一樣的,不過一般情...詳情>>

2023-09-19 08:00:10
開班信息
北京校區(qū)
  • 北京校區(qū)
  • 大連校區(qū)
  • 廣州校區(qū)
  • 成都校區(qū)
  • 杭州校區(qū)
  • 長沙校區(qū)
  • 合肥校區(qū)
  • 南京校區(qū)
  • 上海校區(qū)
  • 深圳校區(qū)
  • 武漢校區(qū)
  • 鄭州校區(qū)
  • 西安校區(qū)
  • 青島校區(qū)
  • 重慶校區(qū)
  • 太原校區(qū)
  • 沈陽校區(qū)
  • 南昌校區(qū)
  • 哈爾濱校區(qū)