溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-09-30 16:09:34 來(lái)源：億速云 閱讀：148 作者：柒染 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript開(kāi)發(fā)人員都忽略了的十大超實(shí)用技巧有哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

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

寫代碼的方法有很多，總有一些方法寫出來(lái)的代碼要更加簡(jiǎn)潔清楚，這就需要一些小技巧了。

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

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

const isRequired = () => { thrownew Error('param is required'); }; const print = (num =isRequired()) => { console.log(`printing ${num}`) }; print(2);//printing 2 print()// error 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ù)。

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

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

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

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

篩選數(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)單的解決方案：

[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. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

  2. undefined

  3. null

  4. NaN

  5. 0

  6.  “” (空字符串)

  7. false

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

myArray     .filter(Boolean);

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

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

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

碰到要合并兩類或多類的情況時(shí)，下面的方法非常好用：

const user = { name: 'John Ludwig', gender: 'Male' };const college = { primary: 'Mani Primary School', secondary: 'Lass Secondary School' };const skills = { programming: 'Extreme', swimming: 'Average', sleeping: 'Pro' };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ì)象全部得到解析。

const PromiseArray = [     Promise.resolve(100),     Promise.reject(null),     Promise.resolve("Datarelease"),     Promise.reject(new Error('Somethingwent wrong'))];Promise.all(PromiseArray)   .then(data => console.log('allresolved! here are the resolve values:', data))   .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è)方法：

const PromiseArray = [     Promise.resolve(100),     Promise.reject(null),     Promise.resolve("Datarelease"),     Promise.reject(new Error('Somethingwent wrong'))];Promise.allSettled(PromiseArray).then(res =>{ console.log(res); }).catch(err => console.log(err));//[ //{status: "fulfilled", value: 100}, //{status: "rejected", reason: null}, //{status: "fulfilled", value: "Data release"}, //{status: "rejected", reason: Error: Something went wrong ...} //]

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

禁用右鍵

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

<body oncontextmenu="returnfalse">     <div></div> </body>

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

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

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

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

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

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

關(guān)于JavaScript開(kāi)發(fā)人員都忽略了的十大超實(shí)用技巧有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手