溫馨提示×

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

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

10個(gè)超級(jí)實(shí)用的Javascript 技巧是怎么樣的

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

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)10個(gè)超級(jí)實(shí)用的Javascript 技巧是怎么樣的，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

眾所周知，JavaScript 一直在快速變化。在新的 ES2020  中，有很多很棒的特性，我們大都已經(jīng)迫不及待嘗試了。老實(shí)說(shuō)，有時(shí)我們可以用不同角度來(lái)編寫(xiě)代碼，同樣也能達(dá)到相同的效果，而且有的還會(huì)更簡(jiǎn)短，更清晰。

1.方法參數(shù)驗(yàn)證

ES6 中可以為函數(shù)的參數(shù)設(shè)置默認(rèn)值，有了這個(gè)，我們可以實(shí)現(xiàn)一個(gè)驗(yàn)證方法參數(shù)不能為空的巧妙技巧。

const isRequired = () => {    throw new Error('param is required') }  const print = (num = isRequired()) => {    console.log(`printing ${num}`)  }  print(2) //printing 2 print() // error print(null) //printing null

2.格式化JSON代碼

我們都非常熟悉JSON.stringify，但比較少知道的是它還可以進(jìn)行格式化的輸出。

stringify  方法有三個(gè)參數(shù)：value，replacer和space。其中，后兩個(gè)是可選參數(shù)，這也是我們很少知道它的原因。要縮進(jìn)JSON，必須使用space參數(shù)。

console.log(JSON.stringify({name:"John",Age:23},null,'\t')); >>>  {  "name": "John",  "Age": 23 }

3.從數(shù)組中獲取惟一的值

要從數(shù)組中獲得唯一的值，需要使用filter方法過(guò)濾掉重復(fù)的值。但是有了新的Set原生對(duì)象，事情就變得非常簡(jiǎn)單了。

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

4.從數(shù)組中刪除虛值

在某些情況下， 我們想從數(shù)組中刪除虛值。虛值是 JavaScript 中的值為FALSE的值。JavaScript 中只有六個(gè)虛值，它們是：

  • undefined

  • null

  • NaN

  • 0

  • '' (空字符)

  • false

過(guò)濾這些虛值的最簡(jiǎn)單方法是使用下面的函數(shù)：

myArray.filter(Boolean)

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

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

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

實(shí)際需求中，我們經(jīng)常需要合并多個(gè)對(duì)照，快速的做法可以像下面這么做：

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}

6.排序數(shù)字?jǐn)?shù)組

JavaScript  數(shù)組帶有內(nèi)置的sort方法。默認(rèn)情況下，此sort方法將數(shù)組元素轉(zhuǎn)換為字符串，并對(duì)其進(jìn)行字典排序。但這在對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序時(shí)，會(huì)有問(wèn)題，解決方法就是手寫(xiě)一個(gè)排序方法。

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

7.禁用鼠標(biāo)右鍵

有些情況，我們想在網(wǎng)頁(yè)上禁用鼠標(biāo)的右鍵，可以使用下面的方式來(lái)禁用：

<body oncontextmenu="return false">   <div></div> </body>

這個(gè)簡(jiǎn)單的代碼就可以禁用右鍵單擊。

8.在解構(gòu)中使用別名

解構(gòu)賦值是一個(gè)JavaScript表達(dá)式，它可以將數(shù)組中的值或?qū)ο笾械膶傩越鈽?gòu)縮不同的變量中。不必使用現(xiàn)有的對(duì)象變量，我們可以根據(jù)自己的偏好重命名它們。

const object = { number: 10 }  const { number } = object  // 使用別名 const { number: otherNumber } = object  console.log(otherNumber) //10

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

如果要獲取數(shù)組的末尾元素，可以使用slice方法。

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]

10. 等待 Promises

在某些情況下，我們需要等待多個(gè)Promise結(jié)束，這里，我們使用Promise.all。

const PromiseArray = [     Promise.resolve(100),     Promise.reject(null),     Promise.resolve("Data release"),     Promise.reject(new Error('Something went wrong'))]; Promise.all(PromiseArray)   .then(data => console.log('all resolved! here are the resolve values:', data))   .catch(err => console.log('got rejected! reason:', err))

關(guān)于Promise.all需要注意的一件事是，當(dāng)一個(gè)Promise拒絕時(shí)，該方法將引發(fā)錯(cuò)誤。這意味著我們的代碼將不會(huì)等到所有的Promise都完成。

如果想要等到所有Promise都完成后，無(wú)論它們被拒絕還是成功，可以使用Promise.allSettled。此方法在ES2020的最終版本中。

const PromiseArray = [     Promise.resolve(100),     Promise.reject(null),     Promise.resolve("Data release"),     Promise.reject(new Error('Something went 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 ...} //]

上述就是小編為大家分享的10個(gè)超級(jí)實(shí)用的Javascript 技巧是怎么樣的了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向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
助
手