日韩精品成人无码专区免费-国产99久久久久久免费看-国产精品丝袜久久久久久不卡-国产精品无码一区二区三区

杜絕這五個 Javascript 錯誤啦

發布時間:2025-01-16 點擊:138
javascript欄目將列出五個讓你的代碼更加可讀和易于維護小竅門。
在編輯舊項目的時候,有沒有遇到過那種一加新邏輯就“粉碎”的迷惑代碼?我們當然都遇到過。
為了讓世界上不可讀的 javascript 代碼更少,我得給你們看看以下的五個例子 — 我的恥辱柱。
使用數組解構獲取函數的多個返回值
如果我們有一個返回多個值的函數,可以使用數組解構實現取值。代碼如下:
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return [a,b,c,d];}const [a,b,c,d] = func();console.log(a,b,c,d); // outputs: 1,2,3,4復制代碼雖然上面的方法能實現賦值,但是它有一些副作用。
調用函數得到返回值 a,b,c,d 時,我們需要注意返回值返回的順序。這里的一個小錯誤很可能就是你 debug 路上的夢魘。
除了需要注意順序,我們還不能只獲取想要的其中幾個返回值,假如我只想要 c,d 呢?
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return {a,b,c,d};}const {c,d} = func();復制代碼我們可以使用對象解構賦值來代替它。
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return {a,b,c,d};}const {c,d} = func();復制代碼現在我們可以自由地選擇需要哪些函數返回值。
以后就算函數增加了更多的返回值,對象解構的代碼也可以不做任何變更,使代碼更加穩定。
沒有在函數入參使用對象解構
假設我們有一個入參是對象的函數,函數內代碼需要使用到這個對象的屬性。
一個幼稚的實現如下:
// badfunction getdaysremaining(subscription) { const startdate = subscription.startdate; const enddate = subscription.enddate; return enddate - startdate;}復制代碼這個方案雖然滿足了我們的需要,但是聲明了兩個沒什么必要的臨時引用變量 startdate 和 enddate。
一個更好的方案是使用對象解構在一行里面獲取入參 startdate 和 enddate。
// betterfunction getdaysremaining(subscription) { const { startdate, enddate } = subscription; return startdate - enddate;}復制代碼我們甚至可以直接在入參使用對象解構定義這兩個變量。
// even betterfunction getdaysremaining({ startdate, enddate }) { return startdate - enddate;}much more elegant wouldn’t you agree?復制代碼你難道不覺得這樣實現更優雅嗎?
不使用展開語法(…)拷貝數組
使用 for 循環遍歷元素再拷貝到新數組除了繁瑣還很丑陋。
使用展開語法可以讓實現更加清晰和簡潔。
const stuff = [1,2,3];// badconst stuffcopybad = []for(let i = 0; i < stuff.length; i ){ stuffcopybad[i] = stuff[i];}// goodconst stuffcopygood = [...stuff];復制代碼使用 var
使用 const 保證一個變量不能重新賦值,能夠減少 bug 以及提高代碼可讀性。
// badvar x = "badx";var y = "baxy";// goodconst x = "goodx";const y = "goodx";復制代碼if you really need to reassign a variable, always prefer let over var .
如果真的需要對一個變量重新賦值,使用 let 代替 var。
let 作用于塊作用域,而 var 作用于函數作用域。
塊作用域使變量僅在定義它的代碼塊中有效,在塊作用域外訪問變量將會提示 referenceerror。
for(let i = 0; i < 10; i ){ //something}print(i) // referenceerror: i is not defined復制代碼定義在函數作用域的變量可以在定義它的函數范圍內使用。
for(var i = 0; i < 10; i ){ //something}console.log(i) // outputs 10復制代碼let和const定義都變量都可以在塊作用域訪問到。
不使用模板字符串
手動拼接字符串寫起來非常復雜,讀起來很困惑。看例子:
// badfunction printstartandenddate({ startdate, enddate }) { console.log('startdate:' startdate ',enddate:' enddate)}復制代碼模板字符串提供清晰和易讀的在字符串插入變量的方法。
// goodfunction printstartandenddate({ startdate, enddate }) { console.log(`startdate: ${startdate}, enddate: ${enddate}`)}復制代碼模板字符串提供了也簡單的方法換行,你只需要在鍵盤按下 enter 鍵,像你平時(在系統)使用一樣。
// prints on two linesfunction printstartandenddate({ startdate, enddate }) { console.log(`startdate: ${startdate} enddate: ${enddate}`)}復制代碼更多相關免費學習推薦:javascript(視頻)

如何在Mac系統上創建大文件?高手教你在Mac系統創建大文件的方法
域名的級別怎么劃分的?
云服務器 便宜的推薦
解除網站阻斷-虛擬主機/數據庫問題
如果我買了云服務器的話
上海電信云服務器租用
hex文件用什么軟件打開 hex文件怎么打開
國內的云服務器租用多少錢一臺