這篇文章將為大家詳細(xì)講解有關(guān)5個(gè)你應(yīng)該知道的JavaScript技巧分別是哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

黃山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

JavaScript是目前最流行的編程語言之一。就像任何其他編程語言一樣，它有許多讓人馬上就能學(xué)會(huì)的小技巧。

每一個(gè)技巧都能完成大多數(shù)開發(fā)人員每天需要完成的工作。根據(jù)經(jīng)驗(yàn)，讀者可能已經(jīng)知道了其中一些，然而仍會(huì)對(duì)其他的技巧大吃一驚。

1. 對(duì)象解構(gòu)

開發(fā)人員一旦了解了對(duì)象解構(gòu)，就可能每天都會(huì)用到。

但什么是解構(gòu)呢?

解構(gòu)是一個(gè)JavaScript表達(dá)式，允許將數(shù)組、對(duì)象、映射和集合中的數(shù)據(jù)提取到其自己的變量中。它允許您一次從一個(gè)或多個(gè)對(duì)象中提取屬性。

一起看看以下示例，其中有一個(gè)用戶對(duì)象。如果要將用戶名(name)存儲(chǔ)在變量中，則必須將其賦給新行上的變量。如果想把性別(gender)也存儲(chǔ)在一個(gè)變量中，就必須重復(fù)上述操作。

const user = {     name: 'Frank',     age: 23,     gender: 'M',     member: false }const name = user.name const gender = user.gender

使用解構(gòu)，就可以通過以下語法直接獲取對(duì)象屬性的變量：

const { name, age, gender, member }= user;console.log(name)   // Frank console.log(age)    // 23 console.log(gender) // M console.log(member) // false

2. 使用設(shè)備性能以更好地調(diào)試

作為一名開發(fā)人員，做的最多的事情就是調(diào)試。但是調(diào)試不僅僅是使用console.log在控制臺(tái)打印出一堆日志信息這么簡(jiǎn)單。

知道控制臺(tái)對(duì)象有分析代碼片段性能的好辦法嗎?大多開發(fā)人員只知道用標(biāo)準(zhǔn)的console.log方法來調(diào)試代碼。

控制臺(tái)對(duì)象有很多有用的功能。它有一個(gè)time和timeEnd函數(shù)，可以幫助分析性能。其工作原理非常簡(jiǎn)單。

在被測(cè)試的代碼前調(diào)用console.time函數(shù)。此函數(shù)有一個(gè)參數(shù)，接受一個(gè)描述被分析內(nèi)容的字符串。在被測(cè)試代碼的末尾，調(diào)用console.timeEnd函數(shù)。給這個(gè)函數(shù)與第一個(gè)參數(shù)相同的字符串。然后，運(yùn)行代碼所需的時(shí)間將會(huì)在控制臺(tái)中顯示。

console.time('loop')  for (let i = 0; i < 10000; i++) {       // Do stuff here }  console.timeEnd('loop')

3. Every和 some函數(shù)

Every和some函數(shù)并不是為所有開發(fā)人員熟知。然而，它們?cè)谀承┣闆r下非常有用。先來講講every函數(shù)。如果想要知道數(shù)組中的所有元素是否都通過了某個(gè)測(cè)試，那就可以應(yīng)用此函數(shù)。本質(zhì)上，這是在遍歷數(shù)組中的每個(gè)元素，并且檢查它們是否屬性都為真。

這聽起來可能有些抽象，所以請(qǐng)看以下示例。并沒有那么復(fù)雜。

const random_numbers = [ 13, 2, 37,18, 5 ] const more_random_numbers = [ 0, -1, 30, 22 ]const isPositive = (number) =>{   return number > 0 }random_numbers.every(isPositive); // returns true more_random_numbers.every(isPositive); // returns false

Every函數(shù)返回一個(gè)布爾值。如果數(shù)組中的所有元素都通過了測(cè)試，則返回“真”(true)。如果數(shù)組中的某個(gè)元素未通過測(cè)試，則返回“假”  (false)。

也可以使用一個(gè)匿名函數(shù)作為測(cè)試函數(shù)：

random_numbers.every((number) =>{     return number > 0 })

some函數(shù)與every函數(shù)的工作原理幾乎完全相同。兩個(gè)函數(shù)只有一個(gè)主要區(qū)別：some函數(shù)測(cè)試的是數(shù)組中是否至少有一個(gè)元素通過了測(cè)試。

回顧上述實(shí)例，如果使用some函數(shù)而不是every函數(shù)，那么兩個(gè)數(shù)組都將返回“真”(true)，因?yàn)閮蓚€(gè)數(shù)組都包含一個(gè)正數(shù)。

const random_numbers = [ 13, 2, 37,18, 5 ] const more_random_numbers = [ 0, -1, 30, 22 ]const isPositive = (number) =>{   return number > 0 }random_numbers.some(isPositive); // returns true more_random_numbers.some(isPositive); // returns true

4. 有條件地設(shè)置一個(gè)變量

有條件地設(shè)置一個(gè)變量很簡(jiǎn)單，而且能使代碼更漂亮。在應(yīng)用這個(gè)技巧的時(shí)候并不需要編寫if語句——這是筆者最喜歡的JavaScript技巧之一。

所以要如何有條件地設(shè)置一個(gè)變量?

const timezone =user.preferred_timezone || 'America/New_York'

上述例子是檢查用戶是否有首選時(shí)區(qū)。如果用戶有首選時(shí)區(qū)，則使用該時(shí)區(qū)。如果用戶沒有首選時(shí)區(qū)，則使用默認(rèn)時(shí)區(qū)，即“美國(guó)/紐約”(‘America/New_York’)。

這段代碼看起來比使用if語句要干凈得多。

let timezone = 'America/New_York'if(user.preferred_timezone) {     timezone = user.preferred_timezone }

更簡(jiǎn)潔了，不是嗎?

來源：Pexels

5. 將值轉(zhuǎn)換為字符串?dāng)?shù)組

有時(shí)需要將所有的值轉(zhuǎn)換為字符串?dāng)?shù)組。例如，當(dāng)使用Triple equal(===)運(yùn)算符檢查數(shù)組中是否存在某個(gè)數(shù)字時(shí)，可能會(huì)出現(xiàn)這種情況。

筆者最近遇到了一個(gè)問題，其包含multi-select控件。Select選項(xiàng)的HTML值是字符串而不是整數(shù)，而這是有意義的，選定值的數(shù)組如下所示：

let selected_values = [ '1', '5','8' ]

問題在于，沒能成功檢查所選值的數(shù)組中是否存在某個(gè)整數(shù)。筆者使用了一個(gè)Intersect函數(shù)，它使用了triple  equals(===)運(yùn)算符。并且由于‘5’ !== 5 ，而必須找到一個(gè)解決辦法。

在筆者看來，最漂亮的解決方案是將數(shù)組中的所有值都轉(zhuǎn)換為整數(shù)。當(dāng)筆者進(jìn)行嘗試時(shí)，偶然間發(fā)現(xiàn)了一個(gè)極其簡(jiǎn)單，卻又漂亮的解決辦法。

selected_valuesselected_values = selected_values.map(Number)// [ 1, 5, 8 ]

與將所有值轉(zhuǎn)換為整數(shù)不同，可以通過簡(jiǎn)單地更改map函數(shù)的參數(shù)，將數(shù)組中的值轉(zhuǎn)化為布爾值。

selected_valuesselected_values =selected_values.map(Boolean)

關(guān)于5個(gè)你應(yīng)該知道的JavaScript技巧分別是哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文標(biāo)題：5個(gè)你應(yīng)該知道的JavaScript技巧分別是哪些
本文來源：http://jinyejixie.com/article14/ghoide.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)頁(yè)設(shè)計(jì)公司、App開發(fā)、服務(wù)器托管、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)