6月安卓手機(jī)性價(jià)比榜：Note 12 Turbo斷層式碾壓
6月份有一個(gè)618，雖然這是京東周年慶的日子，但別的電商也都不約而同的跟進(jìn)了，反正促銷沒壞處，廠商和用戶都能滿意。618期間一些產(chǎn)品也出現(xiàn)了歷史低價(jià)，那么各個(gè)價(jià)位段的產(chǎn)品性價(jià)比
在掌握如何編寫JavaScript代碼之后，那么就進(jìn)階到實(shí)踐——如何真正地解決問題。我們需要更改JS代碼使其更簡單、更易于閱讀，因?yàn)檫@樣的程序更易于團(tuán)隊(duì)成員之間緊密協(xié)作。
今天，我們將介紹15個(gè)最佳實(shí)踐技巧，可幫助簡化JavaScript代碼，易于其他開發(fā)人員理解，也使程序更具可讀性和可維護(hù)性。
沒有什么比延遲聲明更能破壞可讀性的了。正如在開始工作之前準(zhǔn)備好所有工具可以幫助簡化工作，在進(jìn)入函數(shù)的細(xì)節(jié)之前聲明所有變量也可以讓程序更簡單。這也方便了我們以后調(diào)整變量名稱或值。
至于變量，最佳做法是在創(chuàng)建時(shí)初始化變量，以便你和你的團(tuán)隊(duì)都可以確定沒有undefined的變量。
<script>var x = 5;</script>為了效率和可讀性，單個(gè)函數(shù)走天下是不可行的。所以我們?cè)谠O(shè)計(jì)函數(shù)時(shí)，應(yīng)該秉持著一個(gè)任務(wù)一個(gè)函數(shù)的原則。函數(shù)命名也應(yīng)當(dāng)匹配任務(wù)。
這樣做是不是更方便其他人閱讀代碼了呢？因?yàn)橹惶幚硪豁?xiàng)任務(wù)，自然而然函數(shù)就會(huì)更簡單。甚至以后如果有需要，你和你的團(tuán)隊(duì)還可以將此函數(shù)應(yīng)用到其他程序。
請(qǐng)看下面的示例，改進(jìn)后的代碼只看函數(shù)名和變量名，就可以清楚地知道任務(wù)目的。
function table (columns, rows, item){creates table and searches it for the passed item}// compared tofunction createTable (columns, rows){//creates table}function searchTable (table.length, item) {//searches table for the passed item}有時(shí)，代碼中不可避免地會(huì)出現(xiàn)重復(fù)的代碼行。在這種情況下，應(yīng)將重復(fù)的代碼改寫為函數(shù)，并在以前所有使用過這些代碼的地方改為調(diào)用函數(shù)。
這不但減少了視覺混亂，還有助于以后的調(diào)試，因?yàn)檫@樣一來團(tuán)隊(duì)只需要查看函數(shù)，而不必一一檢查多處代碼。
<script>var x = 5;var y = 6;var x = x*2var y = y*2</script><script>var x = 5;var y = 6;function double (value){return value*2;}double (x);double(y);</script>注釋是總結(jié)代碼片段目的的好方法，可以節(jié)省其他開發(fā)人員靠自己去確定代碼所需的時(shí)間。
如果代碼未完成注釋描述應(yīng)完成的任務(wù)，還能及時(shí)捕獲可能的錯(cuò)誤。一般來說，最好每個(gè)函數(shù)都有一條注釋。
不確定應(yīng)不應(yīng)該寫注釋？那就寫吧！如果太過雜亂，大不了以后刪除罷了。
//declares and initializes var x<script>var x = 5;</script>注意：遞歸函數(shù)不要嵌套太多層。雖然說多層嵌套能一次解決許多問題，但我們很難一目了然。
為避免困惑，盡可能在不產(chǎn)生大量運(yùn)行時(shí)成本的前提下，解放嵌套的遞歸函數(shù)。如果你有3+層的嵌套函數(shù)，那么你的同事可能很難跟上你的思路。
function1 (a,b){ function2{ function3{ //this is too hard to follow and can likely be solved another way } }}</script>訪問DOM對(duì)于充分利用程序至關(guān)重要，但反復(fù)這樣做會(huì)導(dǎo)致視覺混亂并會(huì)減慢程序速度。
因此，我們最好訪問一次并進(jìn)行緩存，以供稍后在變量中使用。然后有需要的話，直接訪問變量而不是訪問DOM。這個(gè)過程在視覺上更干凈、更高效。
注意：最佳做法是使用$符號(hào)標(biāo)記DOM引用。
function accountInfo(){var email = $("#accounts").find(".email").val();var accountNumber = $("#accounts").find(".accountNumber").val();}// Contents cached to variable "accounts"function accountInfo(){ var $accounts = $("#accounts"); var name = $accounts.find(".email").val(); var age = $accounts.find(".accountNumber").val();}在JavaScript中，變量具有或全局或局部的作用域。作用域決定了在代碼何處定義和訪問變量。我們可以在程序中的任何位置，甚至函數(shù)之外定義全局變量。而局部變量僅用于定義的函數(shù)中。
如果存在同名的局部變量和全局變量，那么JavaScript將優(yōu)先考慮局部變量并忽略全局變量。我們應(yīng)避免使用全局變量，因?yàn)槿肿兞靠赡軙?huì)意外覆蓋窗口變量，從而導(dǎo)致錯(cuò)誤。
此外，過多的全局變量會(huì)減慢程序速度，因?yàn)樵诖翱陉P(guān)閉之前不會(huì)刪除全局變量，而局部變量會(huì)在函數(shù)完成后刪除。
<html> <script> var myVar = "my global variable"; // This variable is declared as global function localVariable( ) { var myVar = "my local variable"; // This is a locally declared variable </script> </body></html>在JavaScript中設(shè)計(jì)對(duì)象或數(shù)組時(shí)，可以通過選擇速記符號(hào)來節(jié)省空間。實(shí)現(xiàn)方式是在聲明期間而不是之后設(shè)置對(duì)象或數(shù)組的屬性。
這樣做，我們就不必確定在每一行上設(shè)置了哪個(gè)對(duì)象或數(shù)組，從而使這部分代碼更易于閱讀。雖然是一個(gè)很小的變化，但隨著對(duì)象和數(shù)組逐漸變得復(fù)雜，絕對(duì)可以為你的團(tuán)隊(duì)節(jié)省很多時(shí)間。
例如創(chuàng)建一個(gè)對(duì)象
普通寫法：
var computer = new Object(); computer.caseColor = 'black'; computer.brand = 'Dell'; computer.value = 1200; computer.onSale = true;速記寫法：
var computer = { caseColor: 'black'; brand: 'Dell'; value: 1200; onSale: true;}速記數(shù)組：
var computerBrands = ['Dell','Apple','Lenovo','HP','Toshiba','Sony'];與其他編程語言（如C++和Java）相比，JavaScript是一種語法非常寬松的語言。雖然這種寬大處理有助于在不引發(fā)錯(cuò)誤的情況下運(yùn)行代碼，但可能會(huì)導(dǎo)致隱形的錯(cuò)誤。所以我們需要解決隱形的靜默錯(cuò)誤，否則可能會(huì)導(dǎo)致意料之外的行為。
解決方案就是嚴(yán)格模式。包括兩項(xiàng)主要更改：
或者在腳本部分的頂部，或者在所需功能之前（部分嚴(yán)格），添加'use strict';即可進(jìn)入嚴(yán)格模式。
創(chuàng)建對(duì)象時(shí)，可以為對(duì)象的部分或全部屬性設(shè)置默認(rèn)值。這樣做不僅可確保每個(gè)屬性的值都不是undefined，而且還聲明了屬性所需的數(shù)據(jù)類型。此外，通過不為某些屬性設(shè)置默認(rèn)值，還可以向團(tuán)隊(duì)傳達(dá)對(duì)象正常運(yùn)行不需要這些值的意思。
function logProperty({ address = '111 11th Street, 11111', unit, //optional landlord = 'Sara', tenant = 'Raj', rent = 500, })上面的代碼中，unit屬性可選，但其他四個(gè)屬性（預(yù)期的數(shù)據(jù)類型）都必須有默認(rèn)值。為此，unit留空。
組合字符串可太麻煩了，尤其是在組合字符串和變量時(shí)。我們可以使用模板字面量（用反引號(hào)標(biāo)記），簡化組合過程，因?yàn)槟０遄置媪客瑫r(shí)接受字符串和變量。
function greet(name) { return `Hi, ${name}`; //template literal}console.log(greet('Leo'));注意，通過使用模板字面量，我們可以根據(jù)傳遞的名稱、組合字符串Hi和變量name傳遞的值來記錄對(duì)用戶的問候語。因此，此代碼打印：Hi, Leo
測試數(shù)組中值是否存在是一個(gè)常見問題。值得慶幸的是，JavaScript有一個(gè)特殊的數(shù)組方法include()——如果數(shù)組包含搜索值，則返回布爾值。不用搜索數(shù)組，這是一種高效、易于閱讀的解決方案。
const sections = ['contact', 'shipping']; function displayShipping(sections) { return sections.includes('shipping');} console.log(displayShipping(sections));此外，還有indexOf()方法可用于檢查值以及查找索引。
在JavaScript的跨變量類型中，有一些值等效于false，包括：
在 JavaScript 中，等效的==意味著兩個(gè)對(duì)象共享相同的值，但它們可能不是相同的類型。完全相同的===表示兩個(gè)對(duì)象類型相同，值也相同。這有什么用呢？
好吧，與其創(chuàng)建單獨(dú)的變量來保存布爾值，不如使用上述值作為默認(rèn)值來報(bào)告false，如果沒有任何東西覆蓋的話。比如下面的例子，你需要檢查給定的員工是否接受過設(shè)備培訓(xùn)（equipmentTraining）。這臺(tái)機(jī)器只需要最低級(jí)別的培訓(xùn)，培訓(xùn)水平并不重要。
因此，我們用if語句檢查equipmentTraining是否具有falsy值，即默認(rèn)的' '。如果是，則執(zhí)行if語句并返回員工未獲得授權(quán)。如果equipmentTraining包含除默認(rèn)值以外的任何字符串，則表示具有truthy值，因此不會(huì)執(zhí)行if語句。
const employee = { name: 'Eric', equipmentTraining: '',} if (!employee.equipmentTraining) { console.log('Not authorized to operate machinery');}繼承涉及在類之間共享屬性或方法。下面的示例中使用super標(biāo)簽實(shí)現(xiàn)繼承，允許FlashCoupon中的構(gòu)造函數(shù)訪問Coupon中的父構(gòu)造函數(shù)。只需定義一次方法（在父類中），即可增強(qiáng)代碼的可讀性。代碼也變得更加模塊化，因?yàn)槔^承器類可以專門用于給定任務(wù)。
注意，頂部的代碼框建立了父類Coupon，其屬性和方法共享到FlashCoupon，如FlashCoupon在其最后一行調(diào)用getExpirationMessage方法時(shí)看到的那樣。
class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || 'Two Weeks'; } getExpirationMessage() { return `This offer expires in ${this.expiration}`; }}export default Coupon;import Coupon from './extend'; class FlashCoupon extends Coupon { constructor(price, expiration) { super(price); this.expiration = expiration || 'two hours'; }} const flash = new FlashCoupon(10);console.log(flash.getExpirationMessage());最后一個(gè)小貼士，我們將深入探討數(shù)組優(yōu)化的復(fù)雜性。循環(huán)是創(chuàng)建和填充數(shù)組的常用方法。但是，循環(huán)會(huì)導(dǎo)致代碼雜亂且難以閱讀。
因此，我們可以使用數(shù)組方法來實(shí)現(xiàn)類似的效果，例如for只需若干代碼行即可循環(huán)。以下面的for循環(huán)為例。
const prices = ['1.0', 'negotiable', '2.15']; const formattedPrices = [];for (let i = 0; i < prices.length; i++) { const price = parseFloat(prices[i]); if (price) { formattedPrices.push(price); }}console.log(formattedPrices);我們可以通過三行map方法實(shí)現(xiàn)與上面代碼相同的效果。此方法創(chuàng)建了一個(gè)大小相等的數(shù)組，只有price屬性。然后使用parseFloat獲取價(jià)格的浮點(diǎn)值。
const prices = ['1.0', '2.15'];const formattedPrices = prices.map(price => parseFloat(price));console.log(formattedPrices)對(duì)簡潔代碼的追求是一個(gè)持續(xù)的旅程，因?yàn)樽罴褜?shí)踐會(huì)隨著語言的不斷發(fā)展而不斷改善。這個(gè)過程也是軟件開發(fā)樂趣的一部分，學(xué)習(xí)最佳實(shí)踐有助于開發(fā)人員真正掌握編程語言。大家加油！
本文鏈接：http://www.www897cc.com/showinfo-26-78298-0.html你不可不知的 15 個(gè) JavaScript 小貼士
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)