알아두면 유용한 몇 가지 실용적인 JavaScript 최적화 팁

VUE3.0을 빠르게 시작하는 방법:

"난이도:?" 학습을 입력하세요. " 권장 읽기 시간: 5 min "

• if...else 함수를 2개 이상 작성하면

기본 영상이

줄어듭니다.

• , 더 나은 최적화 방법이 있는지 생각해 봐야 합니다.
• 예를 들어, 이제 이름을 기준으로 마이라오의 음식 가격을 계산해야 합니다. 이렇게 할 수 있습니다.

• 이런 식으로 작성하면 함수 본문에 조건부 판단문이 많아지게 됩니다. 다음에 제품을 추가하려면 함수의 논리를 수정하고 if...else 문을 추가해야 합니다. 이 역시 위배됩니다 . 원칙은 로직을 추가해야 할 때 기존 코드를 수정하는 대신 소프트웨어 엔터티를 확장하여 요구 사항의 변경을 해결하려고 노력해야 한다는 것입니다.
• 이는 매우 고전적인 최적화 방법으로, Map 과 유사한 데이터 구조를 사용하여 모든 제품을 저장할 수 있습니다.

• 이런 식으로 다음에 다른 제품을 추가해야 할 때 getPrice 의 논리를 변경할 필요가 없습니다. 물론 실제로는 foodMap 이 사용되는 곳에서 직접 사용하는 것을 선호합니다. 이 아이디어.
• 그러면 일부 학생들은 이때 key 에 문자열만 사용하고 싶지 않으면 어떻게 해야 하는지 묻습니다. 그런 다음 new Map 사용할 수 있습니다. 아이디어는 유사하며 추가 엔터티가 변경 사항을 저장하도록 확장됩니다.

파이프라인 작업은 중복 루프를 대체합니다.

• Mai Moulao의 음식 목록이 있습니다

• 세트 1에 속하는 음식을 찾고 싶다면 어떻게 찾나요?
• 위의 방법은 이전에 자주 사용했던 방법입니다. for 루프 대신 filter 와 map 사용하면 코드가 더 간소화될 뿐만 아니라 의미도 더 명확해집니다. 배열이 먼저过滤다음重组필터링됩니다.

Find는 중복 루프

• 또는 위의 예를 대체합니다. 이 음식 개체 배열의 속성 값에 따라 특정 음식을 찾으려면 find 를 사용하면 됩니다.

include는 중복 루프를 대체합니다

• . 위의 두 가지 세부 사항과 마찬가지로 이들은 모두 기존 함수, 즉 우리가 다시 작성할 필요가 없는 내장 함수입니다.
• 우리 모두 알고 있듯이 강푸라오탄 쇠고기 국수 한 그릇은 사우어크라우트 , 국수 , 쇠고기 큐브 , 담배꽁초 , 발 껍질 로 구성되어 있습니다. 그래서 우리는 이 국수에 발 껍질이 있는지 확인하는 기능을 사용하려고 합니다. 좀 더 간결하게 써볼까?

• 마찬가지로 Kang Fu의 소금에 절인 양배추와 쇠고기 국수를 이렇게 재생할 수 있을 뿐만 아니라 배열에서 특정 요소를 찾는 유사한 모든 작업을 includes 함수를 사용하여 호출할 수 있습니다.

결과 반환 값

• 반환 값이 있는 함수를 작성할 때 반환 값 변수의 이름을 지정하는 데 어려움을 겪는 경우가 많습니다. 일부 긴 함수의 경우에도 변수를 사용하지 않고 직접 return 습관은 실제로는 좋지 않습니다. 다음에 이 코드를 참조할 때 다시 한 번 더 설명하겠습니다.
• 일반적으로 작은 함수에서는 result 반환 값으로 사용할 수 있습니다.

조기 반환

• 그러나 result 위의 반환 값으로 사용하는 것이 모든 상황에 적용되는 것은 아닙니다. 때로는 후속 동료가 중복된 프로그램을 읽지 못하도록 함수 본문을 일찍 종료해야 합니다.

• 다음 예에서는 selectedKey 존재하지 않는 경우 즉시 return 해야 다음 코드를 계속 읽을 필요가 없습니다. 그렇지 않으면 더 복잡한 함수에 직면할 때 읽기 비용이 많이 증가합니다.

객체를 그대로 유지하기 위해

• 요청을 통해 백엔드에서 반환된 데이터를 얻을 때 종종 일부 속성에 따라 처리됩니다. 처리해야 할 속성이 거의 없다면 많은 학생들은 다음을 사용하는 데 익숙해집니다. 첫 번째 방법.
• 그러나 사실 이 습관은 나쁜 것입니다. 왜냐하면 이 함수가 나중에 종속성 속성을 추가해야 하는지 확실하지 않을 때, 지난 기사에서 언급했듯이 변경 사항을 수용하는 방법을 배워야 하기 때문입니다. getDocDetail icon 과 content 사용하는 데에만 국한되지 않고 나중에 title , date 와 같은 속성이 있을 수 있으므로 전체 개체를 직접 전달하는 것이 좋을 수도 있습니다. 이렇게 하면 매개변수 목록이 단축될 뿐만 아니라 코드가 더 많이 만들어집니다. 읽을 수 있습니다.

연산자의 영리한 사용

• 새 변수를 생성해야 할 때, 때로는 변수 값이 참조하는 변수가 null 인지 정의되지 않았는지 확인해야 할 때 간단한 쓰기를 사용할 수 있습니다.

글을 마치면서

• 먼저 이 글을 읽어주신 모든 분들께 감사의 말씀을 전하고 싶습니다. 여기에서 이 글을 공유하고 이것이 모두에게 도움이 되기를 바랍니다.

[추천 관련 비디오 튜토리얼: 웹 프론트엔드]

위 내용은 알아두면 유용한 몇 가지 실용적인 JavaScript 최적화 팁에 대한 세부 정보입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!