偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

很多JavaScript開(kāi)發(fā)人員都忽略了的十大超實(shí)用技巧

開(kāi)發(fā) 前端
眾所周知,JavaScript更新?lián)Q代的速度特別快,總能給人新鮮感,也一直有能讓我們挖掘探索的東西,新版ES2020就有許多特別厲害的功能讓人迫不及待想試試。

 本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID:AI_Discovery)

眾所周知,JavaScript更新?lián)Q代的速度特別快,總能給人新鮮感,也一直有能讓我們挖掘探索的東西,新版ES2020就有許多特別厲害的功能讓人迫不及待想試試。

[[331845]]

寫(xiě)代碼的方法有很多,總有一些方法寫(xiě)出來(lái)的代碼要更加簡(jiǎn)潔清楚,這就需要一些小技巧了。本文就列出了一些對(duì)JavaScript開(kāi)發(fā)人員有用的技巧,希望會(huì)對(duì)你有所幫助。

方法參數(shù)校驗(yàn)

JavaScript可以設(shè)置參數(shù)的默認(rèn)值,這提供了一個(gè)驗(yàn)證方法參數(shù)的小竅門(mén):

 

  1. const isRequired = () => { thrownew Error('param is required'); }; 
  2. const print = (num =isRequired()) => { console.log(`printing ${num}`) }; 
  3. print(2);//printing 2 
  4. print()// error 
  5. print(null)//printing null 

格式化JSON編碼

你肯定對(duì)JSON.stringify 已經(jīng)很熟悉了,但你會(huì)用 stringify 將輸出格式化嗎?這個(gè)操作實(shí)際非常簡(jiǎn)單。stringify 需要三個(gè)參數(shù),value , replacer 和space,后兩個(gè)是可選參數(shù),所以之前沒(méi)有用到過(guò)它,如果要縮進(jìn)JSON就必須設(shè)置space參數(shù)。

 

  1. console.log(JSON.stringify({name:"John",Age:23},null,'\t'));>>> 
  2.  "name""John"
  3.  "Age": 23 
很多JavaScript開(kāi)發(fā)人員都忽略了的十大超實(shí)用技巧

從數(shù)組中獲取唯一值

從數(shù)組中獲取唯一值要使用filter過(guò)濾出重復(fù)值,但有了新的set原生對(duì)象就變得順手多了。

 

  1. let uniqueArray = [...newSet([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])]; 
  2. >>> [1, 2, 3,"school""ball"falsetrue

篩選數(shù)字?jǐn)?shù)組

JavaScript數(shù)組帶有內(nèi)置的篩選方法。默認(rèn)情況下,該方法將數(shù)組元素轉(zhuǎn)換為字符串,并對(duì)其進(jìn)行字典排序。在對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序時(shí)可能會(huì)出現(xiàn)問(wèn)題,這兒有一個(gè)簡(jiǎn)單的解決方案:

 

  1. [0,10,4,9,123,54,1].sort((a,b)=> a-b);>>> [0, 1, 4, 9, 10, 54, 123] 

這個(gè)函數(shù)通過(guò)比較數(shù)字?jǐn)?shù)組中的兩個(gè)元素實(shí)現(xiàn)篩選,可以得到正確的輸出。

刪除數(shù)組中的虛假值

有時(shí)我們可能需要?jiǎng)h掉數(shù)組中的虛假值,即那些在JavaScript中等同于FALSE的值,JavaScript有六種虛假值,包括:

  1. undefined
  2. null
  3. NaN
  4. 0
  5.  “” (空字符串)
  6. false

過(guò)濾出虛假值比較簡(jiǎn)單的方法是使用下面的函數(shù):

 

  1. myArray 
  2.     .filter(Boolean); 

如果要對(duì)數(shù)組進(jìn)行一些修改,然后過(guò)濾新數(shù)組,可以嘗試如下操作。記住,原始myArray保持不變。

 

  1. myArray 
  2.     .map(item => { 
  3.         // Do your changes and return thenew item 
  4.     }) 
  5.     .filter(Boolean); 

合并多個(gè)對(duì)象

碰到要合并兩類(lèi)或多類(lèi)的情況時(shí),下面的方法非常好用:

 

  1. const user = { 
  2. name'John Ludwig'
  3. gender: 'Male' 
  4. };const college = { 
  5. primary'Mani Primary School'
  6. secondary: 'Lass Secondary School' 
  7. };const skills = { 
  8. programming: 'Extreme'
  9. swimming: 'Average'
  10. sleeping: 'Pro' 
  11. };const summary = {...user, ...college,...skills}; 

等所有promise完成后再行動(dòng)

有時(shí)你需要等一些promise對(duì)象完成后才能進(jìn)行下一步操作,我們可以使用Promise.all 來(lái)同步完成。注意,所有Promise可以在單核CPU中同時(shí)運(yùn)行,在多核CPU中并行運(yùn)行。它的主要任務(wù)是等待傳遞給它的所有promise對(duì)象全部得到解析。

 

  1. const PromiseArray = [ 
  2.     Promise.resolve(100), 
  3.     Promise.reject(null), 
  4.     Promise.resolve("Datarelease"), 
  5.     Promise.reject(new Error('Somethingwent wrong'))];Promise.all(PromiseArray) 
  6.   .then(data => console.log('allresolved! here are the resolve values:', data)) 
  7.   .catch(err => console.log('gotrejected! reason:', err)) 

Promise.all必須注意的要點(diǎn)是,如果其中一個(gè)promise被拒,就會(huì)發(fā)出錯(cuò)誤警告。這意味著你的代碼不用等所有promise對(duì)象全部解析完畢。

如果不管promise是否被拒都想讓它全部運(yùn)行完,可以用Promise.allSettled,在ES2020的最終版本中使用這個(gè)方法:

 

  1. const PromiseArray = [ 
  2.     Promise.resolve(100), 
  3.     Promise.reject(null), 
  4.     Promise.resolve("Datarelease"), 
  5.     Promise.reject(new Error('Somethingwent wrong'))];Promise.allSettled(PromiseArray).then(res =>{ 
  6. console.log(res); 
  7. }).catch(err => console.log(err));//[ 
  8. //{status: "fulfilled", value: 100}, 
  9. //{status: "rejected", reason: null}, 
  10. //{status: "fulfilled", value: "Data release"}, 
  11. //{status: "rejected", reason: Error: Something went wrong ...} 
  12. //] 

盡管有些promise被拒,Promise.allSettled 會(huì)返回所有promise的結(jié)果。

禁用右鍵

盡管不多見(jiàn),但有時(shí)你可能需要阻止用戶在網(wǎng)頁(yè)上使用鼠標(biāo)右鍵,這個(gè)簡(jiǎn)單的代碼就能做到:

  1. <body oncontextmenu="returnfalse"
  2.     <div></div> 
  3. </body> 

利用別名節(jié)點(diǎn)解構(gòu)

解構(gòu)賦值是JavaScript的一種表達(dá)式,可以將數(shù)組中的值或?qū)ο髮傩越鈮簽椴煌淖兞?,且不必?jiān)持使用現(xiàn)有的對(duì)象變量,而可以按照個(gè)人喜好對(duì)其重新命名:

 

  1. const object = { number: 10 };//Grabbing number 
  2. const { number } = object;// Grabbing number and renaming it as otherNumber 
  3. const { number: otherNumber } = object;console.log(otherNumber); //10 

獲取數(shù)組中的最后幾項(xiàng)

如果要提取數(shù)組最后幾項(xiàng),可以使用slice方法,參數(shù)設(shè)置為負(fù)參數(shù):

 

  1. let array = [0, 1, 2, 3, 4, 5,6, 7] 
  2. console.log(array.slice(-1)); 
  3. >>>[7] 
  4. console.log(array.slice(-2)); 
  5. >>>[6, 7] 
  6. console.log(array.slice(-3)); 
  7. >>>[5, 6, 7] 

這些可能會(huì)被忽視的小技巧可能會(huì)給你幫大忙,趕快學(xué)起來(lái)吧!

 

責(zé)任編輯:華軒 來(lái)源: 讀芯術(shù)
相關(guān)推薦

2011-03-31 10:22:41

Java開(kāi)發(fā)

2018-05-08 12:00:33

開(kāi)發(fā)代碼Swift

2020-06-28 09:56:48

.NET開(kāi)發(fā)工具

2024-09-06 15:48:13

2009-04-03 14:36:05

Java問(wèn)卷調(diào)查開(kāi)源

2016-10-18 10:45:00

開(kāi)發(fā)開(kāi)源

2020-06-05 14:38:25

開(kāi)發(fā)人員職位開(kāi)發(fā)

2021-11-21 22:43:10

Java開(kāi)發(fā)框架

2016-11-09 13:46:00

云數(shù)據(jù)庫(kù)

2016-10-14 19:30:21

云計(jì)算云數(shù)據(jù)庫(kù)數(shù)據(jù)庫(kù)

2015-07-09 10:18:36

Android開(kāi)發(fā)工具

2019-07-02 14:27:31

編程語(yǔ)言開(kāi)發(fā)

2024-08-12 08:00:00

人工智能開(kāi)發(fā)AI編程助理

2015-03-03 09:35:46

移動(dòng)開(kāi)發(fā)APP趨勢(shì)

2017-10-24 11:59:41

JavaScript

2012-07-13 09:18:29

2022-01-21 10:18:53

VSCode擴(kuò)展插件

2015-03-03 14:58:56

移動(dòng)開(kāi)發(fā)APP趨勢(shì)

2010-05-17 09:50:24

PHP

2024-11-04 14:18:32

JavaScript編程語(yǔ)言開(kāi)發(fā)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)