JavaScript的錯誤風格有哪些

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); // 1,2,3,4

盡管上面的方法很好用，但確實引入了一些復雜性。

當我們調用函數并將值分配給 a,b,c,d 時，我們需要注意返回數據的順序。這里的一個小錯誤可能會成為調試的噩夢。

此外，無法確切指定我們要從函數中獲取哪些值，如果我們只需要 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();

現在，我們可以輕松地從函數中選擇所需的數據，這也為我們的代碼提供了未來的保障，允許我們在不破壞東西的情況下增加額外的返回變量。

不對函數參數使用對象分解

假設我們有一個函數，該函數將一個對象作為參數并對該對象的屬性執行一些操作。一種幼稚的方法可能看起來像這樣：

// 不推薦 function getDaysRemaining(subscription) {   const startDate = subscription.startDate;   const endDate = subscription.endDate;   return endDate - startDate; }

上面的方法按預期工作，但是，我們創建了兩個不必要的臨時引用 startDate 和 endDate。

一種更好的實現是對 subscription 對象使用對象解構來在一行中獲取 startDate 和 endDate。

// 推薦 function getDaysRemaining(subscription) {   const { startDate, endDate } = subscription;   return startDate - endDate; }

我們可以更進一步，直接對參數執行對象析構。

// 更好 function getDaysRemaining({ startDate, endDate }) {   return startDate - endDate; }

更優雅，不是嗎?

在不使用擴展運算符的情況下復制數組

使用 for 循環遍歷數組并將其元素復制到新數組是冗長且相當丑陋的。

可以以簡潔明了的方式使用擴展運算符來達到相同的效果。

const stuff = [1,2,3];  // 不推薦 const stuffCopyBad = [] for(let i = 0; i < stuff.length; i++){   stuffCopyBad[i] = stuff[i]; }  // 推薦 const stuffCopyGood = [...stuff];

使用var

使用 const 保證不能重新分配變量。這樣可以減少我們代碼中的錯誤，并使其更易于理解。

// 不推薦 var x = "badX"; var y = "baxY";  // 推薦 const x = "goodX"; const y = "goodX";

果你確實需要重新分配變量，請始終選擇 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) // 10

let 和 const 都是塊范圍的。

不使用模板字面值

手動將字符串連接在一起相當麻煩，而且輸入時可能會造成混淆。這是一個例子：

// 不推薦 function printStartAndEndDate({ startDate, endDate }) {   console.log('StartDate:' + startDate + ',EndDate:' + endDate) }

模板文字為我們提供了一種可讀且簡潔的語法，該語法支持字符串插值。

// 推薦 function printStartAndEndDate({ startDate, endDate }) {   console.log(`StartDate: ${startDate}, EndDate: ${endDate}`) }

模板文字也提供了嵌入新行的簡便方法，你所需要做的就是照常按鍵盤上的Enter鍵。

// 兩行打印 function printStartAndEndDate({ startDate, endDate }) {   console.log(`StartDate: ${startDate}   EndDate: ${endDate}`) }

關于JavaScript的錯誤風格有哪些問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。