Vermeiden Sie diese fünf Javascript-Fehler

In der Spalte „

Javascript“ werden fünf Tipps aufgeführt, um Ihren Code lesbarer und einfacher zu warten.

Sind Sie beim Bearbeiten alter Projekte schon einmal auf verwirrenden Code gestoßen, der „zerbricht“, sobald neue Logik hinzugefügt wird? Natürlich waren wir alle dort. Um der Welt weniger unlesbaren Javascript-Code zu hinterlassen, muss ich Ihnen die folgenden fünf Beispiele zeigen – meine Säule der Schande. 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

Verwenden Sie die Array-Destrukturierung, um mehrere Rückgabewerte einer Funktion zu erhalten

Wenn wir eine Funktion haben, die mehrere Werte zurückgibt, können wir die Array-Destrukturierung verwenden, um die Werte zu erhalten . Der Code lautet wie folgt:

// prints on two linesfunction printStartAndEndDate({ startDate, endDate }) {  console.log(`StartDate: ${startDate}
  EndDate: ${endDate}`)
}复制代码

Obwohl die obige Methode eine Zuweisung erreichen kann, hat sie einige Nebenwirkungen. Wenn wir eine Funktion aufrufen, um den Rückgabewert a,b,c,d zu erhalten, müssen wir auf die Reihenfolge achten, in der der Rückgabewert zurückgegeben wird. Ein kleiner Fehler hier könnte Ihr Debugging-Albtraum sein. Wir müssen nicht nur auf die Reihenfolge achten, sondern können auch nicht nur einige der gewünschten Rückgabewerte erhalten. Was ist, wenn ich nur c,d möchte? rrreeeWir können die Objektdestrukturierungszuweisung verwenden, um es zu ersetzen. rrreeeJetzt können wir frei wählen, welche Funktionsrückgabewerte wir benötigen.

Auch wenn die Funktion in Zukunft weitere Rückgabewerte hinzufügt, kann der Objektdestrukturierungscode unverändert bleiben, wodurch der Code stabiler wird. 🎜

In Funktionseingabeparametern wird keine Objektdestrukturierung verwendet

🎜Angenommen, wir haben eine Funktion, deren Eingabeparameter Objekte sind, und der Code innerhalb der Funktion muss die Eigenschaften von verwenden dieses Objekt. Eine naive Implementierung sieht wie folgt aus: 🎜rrreee🎜Obwohl diese Lösung unseren Anforderungen entspricht, deklariert sie zwei unnötige temporäre Referenzvariablen startDate und endDate. 🎜🎜Eine bessere Lösung besteht darin, die Objektdestrukturierung zu verwenden, um die Eingabeparameter startDate und endDate in einer Zeile zu erhalten. 🎜rrreee🎜Wir können sogar die Objektdestrukturierung verwenden, um diese beiden Variablen direkt in den Eingabeparametern zu definieren. 🎜rrreee🎜Finden Sie das nicht eleganter? 🎜

Kopieren Sie das Array ohne Verwendung der Erweiterungssyntax (...)

🎜Verwenden Sie for, um die Elemente zu durchlaufen und sie dann nach a zu kopieren Das neue Array ist nicht nur umständlich, sondern auch sehr umständlich und hässlich. 🎜🎜Die Verwendung der Erweiterungssyntax kann die Implementierung klarer und prägnanter machen. 🎜rrreee

Verwenden Sie Var

🎜Verwenden Sie const, um sicherzustellen, dass eine Variable nicht neu zugewiesen werden kann, was Fehler reduzieren kann und die Lesbarkeit des Codes verbessern. 🎜rrreee🎜Wenn Sie eine Variable wirklich neu zuweisen müssen, bevorzugen Sie immer let gegenüber var . Wenn Sie eine Variable wirklich neu zuweisen müssen, verwenden Sie let anstelle von var. 🎜🎜let funktioniert im Blockbereich, während var im Funktionsbereich funktioniert. 🎜🎜Der Blockbereich macht die Variable nur in dem Codeblock gültig, in dem sie definiert ist. Der Zugriff auf die Variable außerhalb des Blockbereichs führt zu einem ReferenceError. 🎜rrreee🎜Eine im Funktionsumfang definierte Variable kann im Rahmen der Funktion verwendet werden, in der sie definiert ist. 🎜rrreee🎜 Auf die durch let und const definierten Variablen kann im Blockbereich zugegriffen werden. 🎜

Verwendet keine Vorlagenzeichenfolgen

🎜Das manuelle Zusammenfügen von Zeichenfolgen ist sehr kompliziert zu schreiben und verwirrend zu lesen. Siehe Beispiel: 🎜rrreee🎜Template-Strings bieten eine klare und lesbare Möglichkeit, Variablen in Strings einzufügen. 🎜rrreee🎜Template-String bietet eine einfache Möglichkeit, Zeilen umzubrechen. Sie müssen nur die Eingabetaste auf der Tastatur drücken, so wie Sie es normalerweise (im System) verwenden. 🎜rrreee🎜🎜🎜Weitere verwandte kostenlose Lernempfehlungen: 🎜🎜🎜Javascript🎜🎜🎜(Video)🎜🎜🎜

Das obige ist der detaillierte Inhalt vonVermeiden Sie diese fünf Javascript-Fehler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!