다섯 가지 자바스크립트 실수를 피하세요

javascript 열에는 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만드는 5가지 팁이 나열되어 있습니다.

오래된 프로젝트를 편집할 때 새로운 로직이 추가되자마자 "깨지는" 혼란스러운 코드를 만난 적이 있나요? 물론 우리 모두 거기에 가본 적이 있습니다. 읽을 수 없는 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();复制代码

위 방법으로 할당을 달성할 수 있지만 몇 가지 부작용이 있습니다.

반환값 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();复制代码

객체 분해 할당을 사용하여 대체할 수 있습니다.

// 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

앞으로 함수가 더 많은 반환 값을 추가하더라도 객체 구조 분해 코드는 변경되지 않고 코드가 더 안정적으로 유지될 수 있습니다.

let 代替 var。

let 作用于块作用域，而 var 作用于函数作用域。

块作用域使变量仅在定义它的代码块中有效，在块作用域外访问变量将会提示 ReferenceError。

// badvar x = "badX";var y = "baxY";// goodconst x = "goodX";const y = "goodX";复制代码

定义在函数作用域的变量可以在定义它的函数范围内使用。

for(let i = 0; i < 10; i++){  //something}
print(i) // ReferenceError: i is not defined复制代码

let和const定义都变量都可以在块作用域访问到。

不使用模板字符串

手动拼接字符串写起来非常复杂，读起来很困惑。看例子：

for(var i = 0; i < 10; i++){  //something}console.log(i) // Outputs 10复制代码

模板字符串提供清晰和易读的在字符串插入变量的方法。

// badfunction printStartAndEndDate({ startDate, endDate }) {  console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}复制代码

模板字符串提供了也简单的方法换行，你只需要在键盘按下 enter함수 매개변수에는 객체 구조 분해가 사용되지 않습니다.

입력 매개변수가 객체인 함수가 있고 함수 내의 코드가 이 객체의 속성을 사용해야 한다고 가정해 보겠습니다. 순진한 구현은 다음과 같습니다.

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

이 솔루션은 우리의 요구 사항을 충족하지만 두 개의 불필요한 임시 참조 변수 startDate 및 endDate를 선언합니다. 더 나은 해결책은 객체 구조 분해를 사용하여 입력 매개변수 startDate 및 endDate를 한 줄로 얻는 것입니다.

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

객체 구조 분해를 사용하여 입력 매개변수에서 이 두 변수를 직접 정의할 수도 있습니다. rrreee이게 더 우아하지 않나요?

확장 구문을 사용하지 않고 배열 복사(...)

for를 사용하여 요소를 반복한 다음 새 배열에 복사하는 것은 번거로울 뿐만 아니라 추악하기도 합니다. 🎜🎜확장 구문을 사용하면 구현이 더 명확하고 간결해질 수 있습니다. 🎜rrreee

Var 사용🎜🎜변수를 다시 할당할 수 없도록 const를 사용하면 버그가 줄어들고 코드가 개선됩니다. 가독성 . 🎜rrreee🎜정말로 변수를 다시 할당해야 한다면 항상 var를 그대로 두는 것이 좋습니다. 정말로 변수를 다시 할당해야 한다면 var 대신 let을 사용하세요. 🎜🎜let는 블록 범위에서 작동하고 var는 함수 범위에서 작동합니다. 🎜🎜블록 범위는 변수가 정의된 코드 블록에서만 유효하도록 만듭니다. 블록 범위 외부의 변수에 액세스하면 ReferenceError가 발생합니다. 🎜rrreee🎜함수 범위에 정의된 변수는 해당 변수가 정의된 함수 범위 내에서 사용할 수 있습니다. 🎜rrreee🎜 let 및 const 정의 변수는 모두 블록 범위에서 액세스할 수 있습니다. 🎜

템플릿 문자열을 사용하지 않습니다. 🎜🎜 수동으로 문자열을 연결하는 것은 작성하기가 매우 복잡하고 읽기에도 혼란스럽습니다. 예를 참조하세요. 🎜rrreee🎜템플릿 문자열은 문자열에 변수를 삽입하는 명확하고 읽기 쉬운 방법을 제공합니다. 🎜rrreee🎜템플릿 문자열은 줄 바꿈을 위한 간단한 방법을 제공합니다. (시스템에서) 일반적으로 사용하는 것처럼 키보드의 enter 키만 누르면 됩니다. 🎜rrreee🎜🎜🎜더 많은 관련 무료 학습 권장 사항: 🎜🎜🎜javascript🎜🎜🎜(동영상)🎜🎜🎜

위 내용은 다섯 가지 자바스크립트 실수를 피하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!